Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: Clear a Panel

  1. #1

    Default Clear a Panel

    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?

  2. #2
    Sencha User aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,488

    Default

    Try calling myPanel.doLayout() after clearing the items and adding new ones.
    Aaron Conran
    @aconran

  3. #3

    Default

    It didn't work =[

  4. #4
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    How did you add the components to the panel?

    You should use:

    Code:
    panel.add(item);
    panel.doLayout();
    (and NOT item.render(panel.body); )

    and you can remove them by using

    Code:
    panel.remove(item);

  5. #5
    Sencha User aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,488

    Default

    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.
    Aaron Conran
    @aconran

  6. #6

    Default

    Here is a simple example.

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

    PHP Code:
    testPanel = function() { 
                
    testPanel.superclass.constructor.call(this, {
                    
    region:'west',
                    
    id:'west-panel',
                    
    split:true,
                    
    width250,
                    
    minSize175,
                    
    maxSize250,
                    
    triggerAction'all',
                    
    collapsibletrue,
                    
    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'],
                            
    expandDatatrue,
                            
    data : [
                                [
    'Test1'], 
                                [
    'Test2'], 
                                [
    'Test3'], 
                                [
    'Test4']
                                ]
                        }),
                        
    displayField'text'
                        
    })]                     
                });
            };
        
            
    Ext.extend(testPanelExt.Panel, {
            });


           var 
    test = new testPanel();

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

  7. #7
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

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

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

  8. #8

    Default

    Quote Originally Posted by Condor View Post
    items.clear() won't work. Try:

    Code:
    var f;
    while(f = test.items.first()){
      test.remove(f, true);
    }
    Thank you very much Condor and Aconran!!!
    Now it's working.

  9. #9

    Exclamation

    Quote Originally Posted by eudega View Post
    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?

  10. #10

    Default

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

    still not works for me!

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •