PDA

View Full Version : Panel not updating dynamically



pm13
22 Aug 2011, 8:12 AM
Hi,

I'm trying out some test functionality that involves adding a component to a panel when a user clicks on the accordion panel.

It's working as far as it's accessing the external function but it's not adding the panel to the container. There are no errors being returned in firebug.

Click Listener:
items:[{
stateId:'main'
,title:'Summary'
,layout:'fit'
,collapsed:false
,frame:true
,expand : function(){
alert('expanded!')
getGrids()

}
},

Container Definition within viewport:
{
xtype : 'container',
region : 'center',
layout : 'fit',
id : 'centerRegion',
margins: '100 0 0 0',
autoEl : {},
items : {
title : 'Center Region',
id : 'centerPanel',
frame : true
}
}

External Function to generate panel
function getGrids(){
var container = viewport.getComponent('centerRegion');
var panel = new Ext.Panel({
id: 'testPanel',
width: '100px',
title: 'My Title',
html: 'Testing testing 123'
});

alert('in function');
container.add(panel);
alert('processed');

container.doLayout();

}

Ultimately what I want it to do is to add 2 grids that have been generated in another javascript file - I'm assuming I will be able to access these via Ext.GetComponent if the file is loaded on startup?

jratcliff
22 Aug 2011, 8:44 AM
can you add code tags around your code and perhaps even post a full working example that I can drop into the examples folder to troubleshoot for you.

Uberdude
22 Aug 2011, 9:02 AM
Maybe you need to call


container.update()

after adding the item.

pm13
22 Aug 2011, 12:22 PM
I've attached the full working.
27620

jratcliff
25 Aug 2011, 5:51 PM
ok, thanks for posting the code. Next time though, you can just include the code inside code tags directly in the post. Makes it easier to copy and paste that way without having to first download a file.

Anyway, the panel does get added but the issue you are having is that your center region has it's layout set to 'fit' and you already have a panel. So when you add another panel it is added but the layout : 'fit' property only allows showing one panel at a time.

So what are you wanting to do? Do you want to replace the current panel with a new one each time? if so, you can just add a container.removeAll() call in your getGrids function before you do the add.

If you want to leave the current panel and just keep adding more panels then just remove the layout : 'fit' property from the center region.

pm13
29 Aug 2011, 1:17 AM
I got this working by sorting out my vbox layout and adding css margins to the grids themselves.