PDA

View Full Version : Update content in dynamically created panel



dmitriyriki
3 Dec 2009, 2:12 PM
I need help with dynamically created panel. I posted 3 images that will help to understand my task. I have a grid in the center region which you can see image Campaign_1.jpg where the user double clicks on a grid item and it calls the openTab() function. This function create a new tab and panel which you can see in image Campaign_2.jpg. The new panel is supposed to navigate to another page for the selected grid item. I use this code:

Ext.extend(MainPanel, Ext.TabPanel, {
openTab: function(record) {
record = (record && record.data) ? record : this.gsm.getSelected();
var d = record.data;
var src = 'mydynamicurl'; //dynamic url base of grid item type
tab = new Ext.Panel({
hideMode: 'nosize',
id: id,
cls: 'preview single-preview',
title: d.name,
tabTip: d.name,
autoScroll: true,
border: true,
stateful: false,
closable: true,
autoLoad: {
url: src,
text: 'Loading Content...',
script: true
}
});
this.add(tab);
}
});


When I click on the first grid item, it work fine. It creates a tab/panel and navigates to the url that I specified in my src variable which you can see in image Campaign_2.jpg. The problem is that when I click on another item in the grid, it creates the new tab/panel but it displays the same information as the first dynamic tab/panel as you can see in the image named Campaign_3.jpg. I have verified that the URLs are different but it doesnít matter how I navigate to the new URL, it always displays the information from the first tab/panel created. In addition to the standard method above, I have also tried the following, which doesnít work either:

Ext.extend(MainPanel, Ext.TabPanel, {
openTab: function(record) {
record = (record && record.data) ? record : this.gsm.getSelected();
var d = record.data;
tab = new Ext.Panel({
hideMode: 'nosize',
id: id,
cls: 'preview single-preview',
title: d.name,
tabTip: d.name,
listeners: MainViewer.LinkInterceptor,
autoScroll: true,
border: true,
stateful: false,
closable: true,
html: d.name
});
this.add(tab);
}
});

CrazyEnigma
3 Dec 2009, 2:16 PM
What is id? Is this unique?

dmitriyriki
3 Dec 2009, 2:19 PM
Yes id is unique it's from var d = record.data; d.id

CrazyEnigma
3 Dec 2009, 2:27 PM
Do you mean to use:


id: d.id,


Because id looks like it would be undefined in your posted code.

dmitriyriki
3 Dec 2009, 2:30 PM
Sorry I forgot posted another line of my code
var id = d.id
But I verified my id is unique

CrazyEnigma
3 Dec 2009, 3:10 PM
Is id numeric?

dmitriyriki
3 Dec 2009, 3:11 PM
Yes id is numeric.

CrazyEnigma
3 Dec 2009, 3:13 PM
I am not too sure you should be using numeric ids for div tags, nor have a number start a div tag id.

dmitriyriki
3 Dec 2009, 3:16 PM
I will try right now use "div" prefix with dynamic number after

dmitriyriki
3 Dec 2009, 3:24 PM
The same result I just tried. I even try
doLayout() before I am adding tab and after and I tried tab.getUpdater().refersh() the same result all new tabs has first tab content. I just donít understand even firebug show me that it going to anther page but content show only from first tab that I created.

CrazyEnigma
3 Dec 2009, 8:01 PM
I am not fully sure what is wrong, but I did a similar thing, however, I had no problems with my code.

Try adding the listener to the grid.


listeners: {
rowclick: {
fn: function(grid, row, e) {
var record = grid.getStore().getAt(row);
var d = record.data;
var tabs = grid.findParentByType('tabpanel');
var tab = Ext.ComponentMgr.get('div' + d.id);
if (tab == null)
{
tabs.add({
xtype: 'panel',
id: 'div' + d.id,
title: d.name,
html: d.name
});
};
}
}
},

dmitriyriki
4 Dec 2009, 9:04 AM
I start review each line of my code for creating tab and I found the problem I just can't believe one line can make such as nightmare to figure out the problem. The problem is hideMode: 'nosize' as soon as I delete this line everything start work fine. CrazyEnigma I really appreciate for your help and time that you spend to help me thank you.