PDA

View Full Version : adding panel before doLayout?



SlashEMc2k
29 Nov 2007, 6:47 AM
Can anyone see what Ive done wrong here? /:)

I want to remove item gridPanel (component id = gridPanelID).
and add contentBody (Ext.Panel) in its place but all that happens is gridPanel is removed.
I get no errors in firebug, I'm confused I can`t see what I've missed?




var myWindow = new Ext.Window({
id:'myWindow',
title: 'My Test Window',
width:700,
height:350,
plain:true,
layout: 'border',
items: [tree, gridPanel]
});

var myWindow = Ext.getCmp("myWindow");
var myGridPanel = Ext.getCmp("gridPanelID");

var contentBody = new Ext.Panel({
id:'contentBody',
region: 'center',
html: 'hello'
});

myWindow.add(contentBody);
myWindow.remove('gridPanelID', true);
myWindow.doLayout();

santosh.rajan
29 Nov 2007, 6:57 AM
var myWindow = new Ext.Window({
id:'myWindow',
title: 'My Test Window',
width:700,
height:350,
plain:true,
layout: 'border',
items: [
tree, {
xtype='panel',
region='center'
items: gridPanel
}
]
});

var myWindow = Ext.getCmp("myWindow");
var myGridPanel = Ext.getCmp("gridPanelID");

var contentBody = new Ext.Panel({
id:'contentBody',
html: 'hello'
});

myWindow.remove(myGridPanel);
myWindow.add(contentBody);
myWindow.doLayout();

SlashEMc2k
29 Nov 2007, 8:28 AM
thanks santosh.rajan; but it didn't appear to work :(

I included the extra xtype to the gridPanel and Panel and tried referencing the remove just by using the getCmp, instead of the id and autodestroy args.
It just seems to ignore the add, I`m really puzzled?:-/


I need more ~o)
I`ve attached the gridPanel code encase I have missed something?




/******************************************/
//Setup grid
/******************************************/
var gridPanel = new Ext.grid.GridPanel({
id:'gridPanelID',
region:'center',
xtype:'panel',

store: new Ext.data.GroupingStore({
autoLoad: true,
url: 'userdata/grid.json',
reader: new Ext.data.JsonReader({
root: 'gridData'
},[
{name: 'id'},
{name: 'department'},
{name: 'storageType'}
{name: 'client'}
]),
sortInfo:{field: 'department', direction: "ASC"},
groupField:'client'
}),

columns: [
{id:'Department',header: "Department", sortable: true, dataIndex: 'department'},
{header: "Client", dataIndex: 'client', hidden:true}
],

view: new Ext.grid.GroupingView({
autoFill:true,
//forceFit:true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})',
enableGroupingMenu: false,
scrollOffset: 0
})
});



/******************************************/
//Setup Containing Window Panel
/******************************************/
var myWindow = new Ext.Window({
id:'myWindow',
title: 'My Test Window',
width:700,
height:350,
plain:true,
layout: 'border',
items: [tree, gridPanel]
});



var myWindow = Ext.getCmp("myWindow");
var myGridPanel = Ext.getCmp("gridPanelID");



/******************************************/
//Setup Panel to replace GridPanel
/******************************************/
var contentBody = new Ext.Panel({
id:'contentBody',
region: 'center',
xtype:'panel',
html: 'hello'
});


/******************************************/
//Remove GridPanel from Window Add Panel - refresh.
/******************************************/
myWindow.remove('gridPanelID', true);
myWindow.add(contentBody);
myWindow.doLayout();

santosh.rajan
29 Nov 2007, 8:50 AM
remove region: 'center' from grid panel bcos you have already defined panel as center and no need for xtype for gridpanel. bcos by calling new Ext.gridpanel() it is already a grid panel.

SlashEMc2k
29 Nov 2007, 9:09 AM
I need region: 'center', because the grid panel is the first to load up.
I am replacing gridPanel with a panel - with the content of 'hello'

It still doesn't seem to be adding the panel,
it removes the gridPanel with no probs.

santosh.rajan
29 Nov 2007, 9:14 AM
Ya right. "center" of which border layout?

SlashEMc2k
29 Nov 2007, 9:20 AM
center of myWindow, as I have a tree which is in the west region :>

santosh.rajan
29 Nov 2007, 9:27 AM
I am posting my earlier code here again. your gridpanel is now inside a panel which is the center panel. do you get it?



var myWindow = new Ext.Window({
id:'myWindow',
title: 'My Test Window',
width:700,
height:350,
plain:true,
layout: 'border',
items: [
tree, {
xtype='panel',
region='center'
items: gridPanel
}
]
});

var myWindow = Ext.getCmp("myWindow");
var myGridPanel = Ext.getCmp("gridPanelID");

var contentBody = new Ext.Panel({
id:'contentBody',
html: 'hello'
});

myWindow.remove(myGridPanel);
myWindow.add(contentBody);
myWindow.doLayout();

SlashEMc2k
29 Nov 2007, 9:57 AM
Thanks santosh.rajan;

It makes sense now:">
I thought because windows are panels.
I could just remove and add panels within the window.

But what I need to do, as I can now see; is add an extra panel that is region:'center' and add and remove my components ie the GridPanel from within that. :D

Sorry it took me so many questions; I`ll give that a go and add a new containing centerised panel..

here is the working version for anyone who got confused with this :


var myWindow = new Ext.Window({
id:'myWindow',
title: 'My Test Window',
width:700,
height:350,
plain:true,
layout: 'border',
items: [
tree,
{
id:'containerCenter',
xtype:'panel',
region:'center',
layout:'fit',
items: gridPanel
}]
});

var contentContainer = Ext.getCmp("containerCenter");

var contentBody = new Ext.Panel({
id:'contentBody',
html: 'hello'
});

contentContainer.remove(0, true);
contentContainer.add(contentBody);
contentContainer.doLayout();