I cannot figure out how to get dynamically added GridPanels to render. I'm trying to swap GridPanels using add/remove methods within a tabchange event handler. What I want is for the grids split below the tab to change when a tab is selected (contextual grids).
From the docs I expect to be able to do this with a combination of add() and remove() method calls, followed by a doLayout() call, all with autoDestroy set to false. The remove() call works, as does the add() call (by inspecting the Panel.items property), but the added GridPanels never render. I've tried calling render() explicitly, but the docs seem to state that a mere call to doLayout() should cause the newly added components to appear.
Here's a simplified version of my UI that you can run from the Firebug console. Can anyone see what I'm doing wrong? The key code block is probably the tabchange event hander.
var employee = Ext.data.Record.create([
{name: 'name'},
{name: 'occupation'}
]);
var reader = new Ext.data.JsonReader({
totalProperty: "results",
root: "rows"
}, employee);
var store = new Ext.data.Store({
reader: this.reader
});
var data1 = { 'results': 2, 'rows': [
{ 'id': 1, 'name': 'Bill', occupation: 'Gardener' },
{ 'id': 2, 'name': 'Ben', occupation: 'Horticulturalist' } ]
};
var data2 = { 'results': 2, 'rows': [
{ 'id': 1, 'name': 'Sally', occupation: 'Programmer' },
{ 'id': 2, 'name': 'Patrick', occupation: 'Designer' } ]
};
var formIsInitialized = false;
var gridPanelWest1 = new Ext.grid.GridPanel({
title: 'GridPanelWest1',
store: store,
split: true,
region: 'center',
width: '50%',
columns: [{
id: 'Col1',
header: "Col1"
},
{
id: 'Col2',
header: "Col2"
}],
listeners: {
'render': function() {
store.loadData(data1);
}
}
});
var gridPanelEast1 = new Ext.grid.GridPanel({
title: 'GridPanelEast1',
store: store,
split: true,
region: 'east',
width: '50%',
columns: [{
id: 'Col1',
header: "Col1"
},
{
id: 'Col2',
header: "Col2"
}],
listeners: {
'render': function() {
store.loadData(data1);
}
}
});
var gridPanelWest2 = new Ext.grid.GridPanel({
title: 'GridPanelWest2',
store: store,
split: true,
region: 'center',
width: '50%',
columns: [{
id: 'Col1',
header: "Col1"
},
{
id: 'Col2',
header: "Col2"
}],
listeners: {
'render': function() {
store.loadData(data2);
}
}
});
var gridPanelEast2 = new Ext.grid.GridPanel({
title: 'GridPanelEast2',
store: store,
split: true,
region: 'east',
width: '50%',
columns: [{
id: 'Col1',
header: "Col1"
},
{
id: 'Col2',
header: "Col2"
}],
listeners: {
'render': function() {
store.loadData(data2);
}
}
});
var pnlTab1 = new Ext.Panel ({
id: 'Tab1',
title: 'Tab1',
layout: 'table',
items: [{html: 'pnlTab1'}]
});
Why arent dynamically added GridPanels appearing, even after doLayout ::
[Archive] Why arent dynamically added GridPanels appearing, even after doLayout()? Ext: Help Why arent dynamically added GridPanels appearing, even after
http://extjs.com/forum/archive/index.php/t-27899.htmlHOME |
var pnlTab2 = new Ext.Panel ({
id: 'Tab2',
title: 'Tab2',
layout: 'table',
items: [{html: 'pnlTab2'}]
});
var pnlGrids = new Ext.Panel({
region: 'south',
split: true,
layout: 'border',
autoDestroy: false,
height: 200,
minSize: 25,
maxSize: 400,
width: '100%',
frame: true,
items: [gridPanelWest1, gridPanelEast1]
});
var tabPanel = new Ext.TabPanel({
deferredRender: false,
activeTab: 0,
region: 'center',
split: true,
items: [pnlTab1, pnlTab2],
listeners: {
'tabchange': function(tpnl, tab) {
if (formIsInitialized)
{
if (tab.id == 'Tab1')
{
pnlGrids.remove(gridPanelWest1);
pnlGrids.remove(gridPanelEast1);
pnlGrids.add(gridPanelWest2);
pnlGrids.add(gridPanelEast2);
}
else
{
pnlGrids.remove(gridPanelWest2);
pnlGrids.remove(gridPanelEast2);
pnlGrids.add(gridPanelWest1);
pnlGrids.add(gridPanelEast1);
};
pnlGrids.doLayout();
};
}
}
});
var viewport = new Ext.Viewport({
layout: 'border',
items: [tabPanel, pnlGrids]
});
formIsInitialized = true;
What are you trying to do?
If you want two different things displaying in a panel, then giving that Panel layout:'card' is what you want. Then you just add as many child items as you want, and you can use myCardPanel.layout.setActiveItem to show the one you want to be "on top"
I just spent half an hour fiddling with the code. I see your point, but I don't know how to fix it. The grid, however, must be changing, because the data swap is triggered by the sender's title (you can verify this by putting alert(cmp.title) in the add handler). So the grid does change, but the new title doesn't automatically update, even when I explicitly call setTitle(cmp.title).
We ended up jettisoning this feature from our app, so I never got very far with it.
Maybe Animal will step in again and offer some insights, because I don't understand what's wrong.
Thank you, Animal! That fixed the grid add/remove problem. My only remaining problem is getting the data to reload. The add event handler is working, but calling store.loadData inside it doesn't load the added grid. I haven't researched why yet, so I hope to figure it out on my own. But if you happen to know off the top of your head, feel free to chime in : ).
Here's my code with your suggested changes:
Dynamic creation of Layouts and Panels. How? [Archive] - Ext JS Forums::
of a Layout, and then add ContentPanels or GridPanels to them. I am having to call doLayout() after each item Im adding, rather than once at the end.
http://extjs.com/forum/archive/index.php/t-14697.htmlHOME |
var employee = Ext.data.Record.create([
{name: 'name'},
{name: 'occupation'}
]);
var reader = new Ext.data.JsonReader({
totalProperty: "results",
root: "rows"
}, employee);
var store = new Ext.data.Store({
reader: this.reader
});
var data1 = { 'results': 2, 'rows': [
{ 'id': 1, 'name': 'Bill', occupation: 'Gardener' },
{ 'id': 2, 'name': 'Ben', occupation: 'Horticulturalist' } ]
};
var data2 = { 'results': 2, 'rows': [
{ 'id': 1, 'name': 'Sally', occupation: 'Programmer' },
{ 'id': 2, 'name': 'Patrick', occupation: 'Designer' } ]
};
var formIsInitialized = false;
var gridPanelWest1 = new Ext.grid.GridPanel({
title: 'GridPanelWest1',
store: store,
columns: [{
id: 'Col1',
header: "Col1"
},
{
id: 'Col2',
header: "Col2"
}],
listeners: {
'render': function() {
store.loadData(data1);
}
}
});
var gridPanelEast1 = new Ext.grid.GridPanel({
title: 'GridPanelEast1',
store: store,
columns: [{
id: 'Col1',
header: "Col1"
},
{
id: 'Col2',
header: "Col2"
}],
listeners: {
'render': function() {
store.loadData(data1);
}
}
});
var gridPanelWest2 = new Ext.grid.GridPanel({
title: 'GridPanelWest2',
store: store,
columns: [{
id: 'Col1',
header: "Col1"
},
{
id: 'Col2',
header: "Col2"
}],
listeners: {
'render': function() {
store.loadData(data2);
}
}
});
var gridPanelEast2 = new Ext.grid.GridPanel({
title: 'GridPanelEast2',
store: store,
columns: [{
id: 'Col1',
header: "Col1"
},
{
id: 'Col2',
header: "Col2"
}],
listeners: {
'render': function() {
store.loadData(data2);
}
}
});
var pnlGridWest = new Ext.Panel ({
id: 'pnlGridWest',
split: true,
region: 'center',
width: '50%',
layout: 'fit',
items: gridPanelWest1,
listeners: {
'add': function(ct, cmp, idx) {
var data = cmp.title == 'GridPanelWest2' ? data2 : data1;
store.loadData(data);
}
}
});
var pnlGridEast = new Ext.Panel ({
id: 'pnlGridEast',
split: true,
region: 'east',
width: '50%',
layout: 'fit',
items: gridPanelEast1,
listeners: {
'add': function(ct, cmp, idx) {
var data = cmp.title == 'GridPanelEast2' ? data2 : data1;
store.loadData(data);
}
}
});
var pnlTab1 = new Ext.Panel ({
id: 'Tab1',
title: 'Tab1',
layout: 'table',
items: [{html: 'pnlTab1'}]
Ext: Help [Archive] - Page 37 - Ext JS Forums::
added GridPanels appearing, even after doLayout I add a new function to an existing component? Dynamic content in dynamically added tab
http://extjs.com/forum/archive/index.php/f-9-p-37.htmlHOME |
extjs.com/forum/showthread.php?t=27899::
href=http://av.rds.yahoo.com/_ylt=A0oGktiIrGVJsMgA7C9tCqMX;_ylu=X3oDMTBzdXAxcThoBHBndANhdl93ZWJfYWR2X3Jlc3VsdARzZWMDc3I-/SIG=123ss82o9/EXP=1231486472/**http%3a//extjs.com/forum/showthread.php%3ft=27899>extjs.com/forum/showthread.php?t=27899extjs.com/forum/showthread.php?t=27899 More pages from extjs.com
Result Pages:
<< Prev 1
Back To Top
Advanced Web Search
Help
Build a query with
all of these words:
this exact phrase:
any of these words:
and none of these words
SEARCH:
Worldwide
USA
RESULTS IN:
All languages
English, Spanish
Date:
by timeframe:
Anytime
Week
Two weeks
Month
Four months
Eight months
One year
by date range:
12345678910111213141516171819202122232425262728293031
JanuaryFebruaryMarchAprilMayJuneJulyAugustSeptemberOctoberNovemberDecember
198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009
12345678910111213141516171819202122232425262728293031
JanuaryFebruaryMarchAprilMayJuneJulyAugustSeptemberOctoberNovemberDecember
198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009
File type:
Any format
Adobe PDF (.pdf)
Microsoft Word (.doc)
Microsoft Excel (.xls)
Microsoft Power Point (.ppt)
HTML
Text (.txt)
Location
by domain:
By URL:
Display:
site collapse (on/off) What is this?
10
20
30
40
50
results per page
Another great way to search. Try Yahoo! Answers
Business Services
Submit a Site
About AltaVista
Privacy Policy
Help
© 2007 Overture Services, Inc.
http://ef=av.rds.yahoo.com/_ylt=A0oGktiIrGVJsMgA7C9tCqMX;_ylu=X3oDMTBzdXAxcThoBHBndANhdl93ZWJfYWR2X3Jlc3VsdARzZWMDc3I-/SIG=123ss82o9/EXP=1231486472/**extjs.com/forum/showthread.php?t=27899>extjs.com/forum/showthread.php?t=27899
extjs.com/forum/showthread.php?t=27899HOME |
});
var pnlTab2 = new Ext.Panel ({
id: 'Tab2',
title: 'Tab2',
layout: 'table',
items: [{html: 'pnlTab2'}]
});
var pnlGrids = new Ext.Panel({
region: 'south',
split: true,
layout: 'border',
autoDestroy: false,
height: 200,
minSize: 25,
maxSize: 400,
width: '100%',
frame: true,
items: [pnlGridWest, pnlGridEast]
});
var tabPanel = new Ext.TabPanel({
deferredRender: false,
activeTab: 0,
region: 'center',
split: true,
items: [pnlTab1, pnlTab2],
listeners: {
'tabchange': function(tpnl, tab) {
if (formIsInitialized)
{
if (tab.id == 'Tab1')
{
pnlGridWest.remove(gridPanelWest2);
pnlGridEast.remove(gridPanelEast2);
pnlGridWest.add(gridPanelWest1);
pnlGridEast.add(gridPanelEast1);
}
else
{
pnlGridWest.remove(gridPanelWest1);
pnlGridEast.remove(gridPanelEast1);
pnlGridWest.add(gridPanelWest2);
pnlGridEast.add(gridPanelEast2);
};
pnlGrids.doLayout();
};
}
}
});
var viewport = new Ext.Viewport({
layout: 'border',
items: [tabPanel, pnlGrids]
});
formIsInitialized = true;
The problem with the card layout is that it puts every item you add into the DOM - is that a problem? Just I am working on an app which could have maybe 25-50 items in the layout. If possible I'd rather load / destroy as they navigate around the app rather than leave everything in memory.
What I am trying to do is dynamically add / remove items from a panel, which itself is inside the region of a border layout. This does not seem to work :/
PaddyInDaGorge,
Are you sure this worked for you? I am having similar issues to the problem you are facing. I run your example and when switching between the tabs, after you switch to the West2/East2 grids, they never switch back to West1/East1.
If you rename the column headers on West1/East1 so they don't match the column headers on West2 / East2, you will notice that the store updates, but the grids are not swapped.
Has anyone else found a workaround for this behaviour? I don't want to use a card layout, but there seems to be problems adding / removing components into a panel which is inside a border layout.
Thanks
James
I wasn't ignoring you! :))
Different time zones!
Isn't that what you have done in the final solution you posted... or am I missing something? If not, an example would be great as I am getting so confused over this issue.
Animal, your silence was educational for me : ). I figured out that the problem was not with store.loadData in the add event listener, but that I had the autoDestroy config assigned to the wrong container. I moved it to pnlGridWest and pnlGridEast, and the problem is now solved. I also removed the render listeners because I discovered they were redundant.
For the benefit of future readers, here's the full working code:
var employee = Ext.data.Record.create([
{name: 'name'},
{name: 'occupation'}
]);
var reader = new Ext.data.JsonReader({
totalProperty: "results",
root: "rows"
}, employee);
var store = new Ext.data.Store({
reader: this.reader
});
var data1 = { 'results': 2, 'rows': [
{ 'id': 1, 'name': 'Bill', occupation: 'Gardener' },
{ 'id': 2, 'name': 'Ben', occupation: 'Horticulturalist' } ]
};
var data2 = { 'results': 2, 'rows': [
{ 'id': 1, 'name': 'Sally', occupation: 'Programmer' },
{ 'id': 2, 'name': 'Patrick', occupation: 'Designer' } ]
};
var formIsInitialized = false;
var gridPanelWest1 = new Ext.grid.GridPanel({
title: 'GridPanelWest1',
store: store,
columns: [{
id: 'Col1',
header: "Col1"
},
{
id: 'Col2',
header: "Col2"
}]
});
var gridPanelEast1 = new Ext.grid.GridPanel({
title: 'GridPanelEast1',
store: store,
columns: [{
id: 'Col1',
header: "Col1"
},
{
id: 'Col2',
header: "Col2"
}]
});
var gridPanelWest2 = new Ext.grid.GridPanel({
title: 'GridPanelWest2',
store: store,
columns: [{
id: 'Col1',
header: "Col1"
},
{
id: 'Col2',
header: "Col2"
}]
});
var gridPanelEast2 = new Ext.grid.GridPanel({
title: 'GridPanelEast2',
store: store,
columns: [{
id: 'Col1',
header: "Col1"
},
{
id: 'Col2',
header: "Col2"
}]
});
var pnlGridWest = new Ext.Panel ({
id: 'pnlGridWest',
split: true,
region: 'center',
autoDestroy: false,
width: '50%',
layout: 'fit',
items: gridPanelWest1,
listeners: {
'add': function(ct, cmp, idx) {
store.loadData(cmp.title == 'GridPanelEast2' ? data2 : data1);
}
}
});
var pnlGridEast = new Ext.Panel ({
id: 'pnlGridEast',
split: true,
region: 'east',
autoDestroy: false,
width: '50%',
layout: 'fit',
items: gridPanelEast1,
listeners: {
'add': function(ct, cmp, idx) {
store.loadData(cmp.title == 'GridPanelEast2' ? data2 : data1);
}
}
});
var pnlTab1 = new Ext.Panel ({
id: 'Tab1',
title: 'Tab1',
layout: 'table',
items: [{html: 'pnlTab1'}]
});
var pnlTab2 = new Ext.Panel ({
id: 'Tab2',
title: 'Tab2',
layout: 'table',
items: [{html: 'pnlTab2'}]
});
var pnlGrids = new Ext.Panel({
region: 'south',
split: true,
layout: 'border',
height: 200,
minSize: 25,
maxSize: 400,
width: '100%',
frame: true,
items: [pnlGridWest, pnlGridEast]
});
var tabPanel = new Ext.TabPanel({
deferredRender: false,
activeTab: 0,
region: 'center',
split: true,
items: [pnlTab1, pnlTab2],
listeners: {
'tabchange': function(tpnl, tab) {
if (formIsInitialized)
{
if (tab.id == 'Tab1')
{
pnlGridWest.remove(gridPanelWest2);
pnlGridEast.remove(gridPanelEast2);
pnlGridWest.add(gridPanelWest1);
pnlGridEast.add(gridPanelEast1);
}
else
{
pnlGridWest.remove(gridPanelWest1);
pnlGridEast.remove(gridPanelEast1);
pnlGridWest.add(gridPanelWest2);
pnlGridEast.add(gridPanelEast2);
};
pnlGrids.doLayout();
};
}
}
});
var viewport = new Ext.Viewport({
layout: 'border',
items: [tabPanel, pnlGrids]
});
formIsInitialized = true;
The answer is in Animal's first post in this thread. I never posted the final code. Did you implement his suggestion?
Border layouts do not tolerate adding and removing the Panels which act as their regions. The initial Panels become region containers, and must stay fixed.
What you must do is have fixed west and east region Panels, each with layout:'fit'.
You add and remove the grids to/from these Panels.
Ack, bad joke on my part. I didn't mean to imply that you were ignoring me. You've always been surprisingly quick to help, and very knowledgeable. Thanks again for shedding light on the problem I was facing!
I don't know if this "gotcha" is in the docs, but it would be great (I think) if an appropriate note was added to the add/remove methods for Panel and its subclasses.
 Nortel Unveils Vision, Strategy for Israeli High-Performance Net
 Busy Friday Leads to Strong Close for Net Stocks
|
PRINT
Add to favorites