Hi,
I've been created a Viewport which has two main region, west and center. The west is Tree Panel, and the center one is the Tab Panel which will load a page based on the Tree Panel node href attribute via AJAX. There is a Ext Element inside one of the page loaded to the Tab, and after the page loaded and the Ext Element rendered, it doesn't work properly.
For example, I have a DatePicker inside a page. The page and the datepicker is loaded to the tab successfully, but when I click the calendar icon in the datepicker, the calendar box isn't show up under the textbox, but it goes to the TreePanel in the west region.
How could it be? And how to fix it?
Here is the code:
Main page
Ext.onReady(function(){
//variables
var Tree = Ext.tree;
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
var viewport = new Ext.Viewport({
layout:'border',
items:[
new Ext.BoxComponent({ // raw
region:'north',
el: 'north',
id: 'north',
height:70
}),new Ext.BoxComponent({ // raw
region:'south',
el: 'south',
id: 'south',
height:20
}),{
xtype: 'treepanel',
region:'west',
id:'west-panel',
title:'Menu',
split: true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins:'0 0 0 5',
autoScroll:true,
loader: new Tree.TreeLoader({dataUrl:'pages/TreeMenu.jsp'}),
root: new Tree.AsyncTreeNode({
text: 'Menu',
expanded: true
Imran's Knowledge Base World: Load method of DataTable::
I found very interesting method of DataTable. There is Load method which loads the Sharing the knowledge to the people who are stuck in general problem.
http://knowledgebaseworld.blogspot.com/2008/09/load-method-of-datatable.htmlHOME |
}),
listeners: {
click: function(node, e){
e.stopEvent();
},
dblclick: function(node, e) {
if(node.isLeaf())
ajaxTab(node.attributes.text, node.attributes.href)
}
}
}, centralTab = new Ext.TabPanel({
region: 'center',
activeTab: 0,
enableTabScroll:true,
id: 'centralTab',
items: [{
title: 'Welcome',
contentEl: 'center'
}]
})
]
});
});
The function to add a tab
function ajaxTab(id, url) {
var tab = Ext.getCmp(id);
if (!tab) {
tab = centralTab.add({
title: id,
id: id,
closable:true
});
}
centralTab.setActiveTab(tab);
tab.body.load({
url: url,
scripts: true
});
}
And the page that will be loaded
Ext.onReady(function(){
var dateFormat = 'd/m/Y'
var form = new Ext.FormPanel({
title: 'Daily Branch Activity Report',
labelWidth: 75, // label settings here cascade unless overridden
bodyStyle:'padding:5px 5px 0',
width: 400,
defaults: {width: 230},
id: 'form',
renderTo: 'filter',
items: [{
layout: 'column',
width: 600,
border: false,
items: [{
columnWidth: .5,
layout: 'form',
items: [{
xtype: 'datefield',
id: 'date',
fieldLabel: 'Filter',
name: 'date',
format: dateFormat,
anchor: '95%'
}],
border: false
},{
columnWidth: .5,
layout: 'form',
items: [{
xtype: 'button',
text: 'View',
handler: function(){
loadGrid(Ext.get('date').getValue())
}
}],
border: false
}]
}]
});
var grid = new Ext.Panel({
id: 'grid',
height: 500,
renderTo: 'grid',
border: false
})
function loadGrid(dateValue){
var date = dateValue.toString()
var url = 'ViewDailyBranchActivity.aspx?date=' + date
grid.load({
url: url,
text: 'Loading...',
scripts: true
});
}
})
Thanks for helping
I have this problem.... load grid into new tab....
 Red Hat's Rough Recovery From CFO Exit
 Windows Live Finds a New, Pre-installed Home
|
HOME