PDA

View Full Version : Problem with Panel load method



nazieb
30 Jan 2008, 9:08 PM
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
}),
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

dima
31 Jan 2008, 1:21 AM
I have this problem.... load grid into new tab....