1. #1
    Sencha User
    Join Date
    Sep 2010
    Posts
    40
    Answers
    1
    Vote Rating
    1
    earist is on a distinguished road

      0  

    Default Unanswered: Problem when add item to collapsed panel

    Unanswered: Problem when add item to collapsed panel


    Hi, all

    I use ExtJS version 4.0.7
    I created viewport as border layout like the attached file (border.zip)

    For south panel, it was stateful and its items would be added after viewport was rendered.
    The items was rendered correctly if south panel was expanded.
    But they could not be rendered when I collapsed this panel, refreshed page and then expanded this panel again.

    Step for reproduce;
    Code:
    1. Open page
    2. Collapse the south panel
    3. Refresh page
    4. Expand the south panel
    South panel code:

    PHP Code:
    {
                    
    xtype'tabpanel',
                    
    id 'south-panel',
                      
    region 'south',
                      
    activeTab 0,
                      
    height 200,
                      
    collapsible true,
                      
    floatable true,
                      
    split true,
                   
    getState : function() {
                    return {
                        
    collapsed this.collapsed
                    
    };
                },
                
    applyState : function(state) {
                    if (
    state && state.collapsed)
                        
    this.collapsed state.collapsed;
                },
                
    saveState : function() {
                    var 
    me thisidstate;
                    if (
    me.stateful !== false) {
                        
    id me.getStateId();
                        if (
    id) {
                            
    state me.getState();
                            if (
    me.fireEvent('beforestatesave'mestate) !== false) {
                                
    Ext.state.Manager.set(idstate);
                                
    me.fireEvent('statesave'mestate);
                            }
                        }
                    }
                }
            } 
    Afterrender code:
    PHP Code:
    listeners: {
                
    afterrender: function()
                {
                        var 
    south Ext.getCmp("south-panel");
                        if (
    south)
                            
    south.add({
                                
    title 'South Tab',
                              
    id 'in-south-panel',
                              
    layout'border',
                              
    items : [ {
                                 
    xtype 'toolbar',
                                 
    region 'north',
                                 
    items : [ 'Search:'' 'Ext.create('Ext.form.field.Trigger')]
                             }, {
                                 
    xtype 'panel',
                                 
    autoScroll true,
                                 
    region 'center',
                                 
    margin '0 0 3 0',
                                 
    html'Test'
                             
    } ]
                          });
                }
            } 

    South panel and its items were displayed correctly:
    Correctly South.png

    South panel and its items were displayed incorrectly:
    Incorrectly South.png


    How should I do if I would like to add items to the panel after viewport is rendered?

    Thank you in advance.
    earist.
    Attached Files

  2. #2
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,333
    Answers
    124
    Vote Rating
    85
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

    Default


    Hi earist ,
    You have to use doComponentLayout() method for your south panel when you are adding items to it in viewport afterrender event.

    Try the Code given below:
    Code:
    listeners: {
          	  afterrender: function()
          	  {
          	  		var south = Ext.getCmp("south-panel");
          	  		if (south)
          	  			south.add({
          	  				title : 'South Tab',
    						id : 'in-south-panel',
    						layout: 'border',
    						items : [ {
    							xtype : 'toolbar',
    							region : 'north',
    							items : [ 'Search:', ' ', Ext.create('Ext.form.field.Trigger')]
    						}, {
    							xtype : 'panel',
    							autoScroll : true,
    							region : 'center',
    							margin : '0 0 3 0',
    							html: 'Test'
    						} ]
          				});
    		         south.doComponentLayout();
          	  }
            }
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  3. #3
    Sencha User
    Join Date
    Sep 2010
    Posts
    40
    Answers
    1
    Vote Rating
    1
    earist is on a distinguished road

      0  

    Default


    Hi, sword-it

    I try to use south.doComponentLayout() as your suggestion.
    But this bug still occcure on all browsers (Firefox, IE, Chrome).

  4. #4
    Sencha User
    Join Date
    Jul 2010
    Posts
    50
    Answers
    1
    Vote Rating
    -1
    hdave is an unknown quantity at this point

      0  

    Default


    Did you solve this? I am having the same problem. Adding items to a collapsed panel messes things up.

  5. #5
    Sencha User
    Join Date
    Sep 2010
    Posts
    40
    Answers
    1
    Vote Rating
    1
    earist is on a distinguished road

      0  

    Default


    Hi hdave,

    I sovled this problem by using expand event.

    I added expand events to all panels that can be collapsed/expanded and then checking the component after the panel is expanded.

    For example,

    1. Create application with expand event (In this case, I added this event to my south panel)

    Code:
    Ext.define('Me.Application', {
        extend : 'Ext.util.Observable',
        constructor : function(config) {
            this.addEvents({
                "south-expand" : true,
            });
    ...
    Code:
    ...
    southExpand : function() {
            Me.application.fireEvent('south-expand', EWork.application);
        },
    ...
    Code:
    Me.application = new Me.Application();
    2. For my south panel, called southExpand function after this panel is expanded.

    Code:
    ...
    listeners : {
                    expand : function(panel) {
                        Me.application.southExpand();
                    }
                },
    ...
    3. For south-expand function, checking search-view component in south-panel. If the view is not found, create new one and add to south-panel.

    Code:
    Me.application.on('south-expand', function() {
        var southPanel = Ext.getCmp('south-panel'), searchView = Ext.getCmp('search-view');
        if (!southPanel.getComponent('search-view')) {
            if (!searchView)
                searchView = Ext.create('Me.SearchView');
            southPanel.insert(0, searchView);
            southPanel.doComponentLayout();
        }
    });

Thread Participants: 2