Clear a Panel

[eudega]

I'm trying to load the items of a Ext.Panel dinamicaly. To load is easy, but how to clear the itens after they are rendered? When the user change the value of a combobox I want to clear the panel and load new items.

I have tryied 'mypanel.items.clear()' but it doesn't work. I have to do something else?

[aconran]

Try calling myPanel.doLayout() after clearing the items and adding new ones.

[eudega]

It didn't work =[

[Condor]

How did you add the components to the panel?

You should use:

panel.add(item);
panel.doLayout();

(and NOT item.render(panel.body); )

and you can remove them by using

panel.remove(item);

[aconran]

Could you post a sample? It's not common to clear an entire panel of all items and then re-render. Typically I would just remove the entire panel and create a new one.

[eudega]

Here is a simple example.

The complex.zip file is based on the layout/complex example.

testPanel = function() { 
            testPanel.superclass.constructor.call(this, {
                region:'west',
                id:'west-panel',
                split:true,
                width: 250,
                minSize: 175,
                maxSize: 250,
                triggerAction: 'all',
                collapsible: true,
                collapseMode:'mini',
                margins:'0 0 5 5',
                layout:'accordion',
                title:'West',
                layoutConfig:{
                    animate:true
                },  
                items: [{
                                contentEl: 'west',
                                title:'Navigation',
                                border:false,
                                iconCls:'nav'
                            },{
                                title:'Settings',
                                html:'<p>Some settings in here.</p>',
                                border:false,
                                iconCls:'settings'
                            }
                            ],      
                tbar: ['ComboBox: ', ' ',
                    new Ext.form.ComboBox({
                    listClass:'x-combo-list-small',
                    width:180,
                    value: 'Test1',
                    id:'app-select',
                    mode: 'local',
                    triggerAction: 'all',
                    store: new Ext.data.SimpleStore({
                        fields: ['text'],
                        expandData: true,
                        data : [
                            ['Test1'], 
                            ['Test2'], 
                            ['Test3'], 
                            ['Test4']
                            ]
                    }),
                    displayField: 'text'
                    })]                     
            });
        };
    
        Ext.extend(testPanel, Ext.Panel, {
        });


       var test = new testPanel();

       /*######################################################################*/
       
       test.topToolbar[2].on('select', function(objeto, registro, indice) {
           alert('xxxxxxxxxxxxx');
           test.items.clear();             
           test.doLayout()
       });
       
       /*######################################################################*/ 

[Condor]

items.clear() won't work. Try:

var f;
while(f = test.items.first()){
  test.remove(f, true);
}

[eudega]

items.clear() won't work. Try:

var f;
while(f = test.items.first()){
  test.remove(f, true);
}

Thank you very much Condor and Aconran!!!
Now it's working.

[say2paul]

I'm trying to load the items of a Ext.Panel dinamicaly. To load is easy, but how to clear the itens after they are rendered? When the user change the value of a combobox I want to clear the panel and load new items.

I have tryied 'mypanel.items.clear()' but it doesn't work. I have to do something else?

How are you loading the panel? Could you write down a snippet here for loading a panel dynamically with a data?

[ghostzhang]

ext3.3.1 :
var f;
while(f = test.items.first()){
test.remove(f, true);
}

still not works for me!