Looks like we cannot reproduce this. Please provide another test case to reproduce this issue.
  1. #1
    Sencha User
    Join Date
    Apr 2010
    Location
    China
    Posts
    43
    Vote Rating
    0
    manlsea is on a distinguished road

      0  

    Default The grid panel disappears after it expanded.

    The grid panel disappears after it expanded.


    Environment:Extjs 4.1.0 & Extjs 4.1.1RC2; Firefox & Chromium;
    There are two grid in the customers tab;
    The contacts grid config: {region: 'south', collapsible: true, split: true, collapsed: true};
    The grid disappears after it expanded.
    2012-06-21.png
    CustomerContacts.js
    Code:
    Ext.define('App.view.CustomerContacts', {
        extend: 'Ext.panel.Panel',
        alias: 'widget.customerslist',
        
        initComponent: function () {
            
            Ext.apply(this, {
                layout: 'border',
                border: false,
                items: [
                        {xtype: 'customersgrid', region: 'center', border: false },
                        {xtype: 'contactsgrid', region: 'south', collapsible: true, split: true, border: false, height: 300, collapsed: true}
                        
                       ] 
    
    
            });
            
            this.callParent(arguments);
        }
    });
    ContactsGrid.js
    Code:
    Ext.define('App.view.ContactsGrid', {
        extend: 'Ext.grid.Panel',
        alias: 'widget.contactsgrid',
        title: columnsTextArr[31],
        border: true,
        selModel: { selType: 'checkboxmodel', mode: 'MULTI', checkOnly: true }, //添加checkbox列 SIMPLE MULTI SINGLE
        
    
    
        initComponent: function () {
            var createAction = Ext.create('Ext.Action', {
                
                scope: this,
                iconCls: 'iconAdd',
                text: actions[0],
                action: 'create',
                disabled: true,
                handler: function (bt, ck) {
                    editContact();
                }
            });
            var editContact = function (record) {
                var cstm = Ext.widget('contactwindow',{animateTarget: 'targetContact', unSaveable: editAction.isDisabled()});
                if (record) {
                    cstm.down('form').loadRecord(record);
                    cstm.setIconCls('iconFeedEdit');
                    cstm.setTitle('Edit Contact');
                }
            };
            var removeAction = Ext.create('Ext.Action', {
                
                scope: this,
                iconCls: 'iconAllDelete',
                text: actions[3],
                action: 'remove',
                disabled: true,
                handler: function (bt, ck) {
                    
                    var selections = this.getSelectionModel().getSelection();
                    if (selections.length > 0) {
                        var store = this.store;
                        Ext.Msg.show({
                            title: 'Warning',
                            msg: actions[24],
                            buttons: Ext.Msg.OKCANCEL,
                            icon: Ext.Msg.QUESTION,
                            fn: function (btn, text) {
                                if (btn == 'ok') {
                                    store.remove(selections);
                                    store.sync();
                                }
                            }
                        });
                    }
                }
            });
            var editAction = Ext.create('Ext.Action', {
                
                scope: this,
                iconCls: 'iconEdit',
                text: actions[1],
                action: 'edit',
                disabled: true,
                handler: function (bt, ck) {
                    var selections = this.getSelectionModel(); 
                    if (selections.getSelection().length > 0) {
                        selections = selections.getLastSelected();
                        editContact(selections);
                    }
                }
    
    
            });
    
    
            var refreshAction = Ext.create('Ext.Action', {
                
                scope: this,
                iconCls: 'iconRefresh',
                text: actions[11],
                action: 'refresh',
                disabled: false,
                handler: function (bt, ck) {
                    this.store.load();
                }
            });
            
            var slmd = Ext.getCmp('AppMenu');
            slmd = slmd.getSelectionModel().getLastSelected(); 
            if (slmd) {
                if (slmd.get('addp'))
                    createAction.enable();
                if (slmd.get('upp'))
                    editAction.enable();
                if (slmd.get('delp'))
                    removeAction.enable();
            };
            
            var contextMenu = Ext.create('Ext.menu.Menu', {
                scope: this,
                items: [ createAction, editAction, refreshAction, '-', removeAction]
            });
            
            
            Ext.apply(this, {
                tbar: [createAction, '-', editAction, '-', refreshAction, '->', removeAction],
                store: contactStore,
                bbar: { xtype: 'pagingtoolbar', store: contactStore, displayInfo: true,
                    items: ['-', { typeAhead: true, width: 100, queryMode: 'local', labelWidth: 30, fieldLabel: 'Size', xtype: 'combobox', editable: false, displayField: 'name', store: pageSize, value: initialPageSize,
                        listeners: { change: function (cmbx, newValue, oldValue, eOpts) {
                            this.up('grid').store.pageSize = newValue;
                        }
                        }
                    },  { xtype: 'tbtext', id: 'targetContact'}]
                },
        columns: [
        { text: 'SN', xtype: 'rownumberer', width: 26 },
        { text: columnsTextArr[0], dataIndex: 'rname' }, 
        { text: columnsTextArr[1], dataIndex: 'call', flex: 1},
        { text: columnsTextArr[2], dataIndex: 'email' },
        { text: columnsTextArr[6], dataIndex: 'telephone' },
        { text: columnsTextArr[7], dataIndex: 'extension' },
        { text: columnsTextArr[37], dataIndex: 'fax' },
        { text: columnsTextArr[8], dataIndex: 'mobile' },
        { text: columnsTextArr[38], dataIndex: 'language' },
        { text: columnsTextArr[4], dataIndex: 'online', renderer: formatOnLine, align: 'center', width: 60 },
        { text: columnsTextArr[39], dataIndex: 'allowlogon' , width: 60, xtype: 'booleancolumn', trueText: 'Yes', falseText: 'No'},
        { text: columnsTextArr[9], dataIndex: 'errorcount', width: 70, align: 'right', renderer: formatErrorTimes },
        { text: columnsTextArr[5], dataIndex: 'lastaction', width: 150}],
        
           viewConfig: {
                    stripeRows: true,
                    listeners: {
                        itemcontextmenu: function (view, rec, node, index, e) {
                            e.stopEvent();
                            contextMenu.showAt(e.getXY());
                            return false;
                        }
                    }
                }
            });
            this.on('itemdblclick', function (view, rec, node, index, e) {
                    editContact(rec);
              });
            this.callParent(arguments);
    
    
        }
    });
    CustomersGrid.js
    Code:
    
    Ext.define('App.view.CustomersGrid', {
        extend: 'Ext.grid.Panel',
        alias: 'widget.customersgrid',
        border: true,
        selModel: { selType: 'checkboxmodel', mode: 'MULTI', checkOnly: true }, 
        
        initComponent: function () {
            var createAction = Ext.create('Ext.Action', {
                scope: this,
                iconCls: 'iconAdd',
                text: actions[0],
                action: 'create',
                disabled: true,
                handler: function (bt, ck) {
                    editCustomer();
                }
            });
            var editCustomer = function (record) {
                var cstm = Ext.widget('customerwindow',{animateTarget: 'targetCustomer', unSaveable: editAction.isDisabled()});
                if (record) {
                    contactStore.getProxy().extraParams['cstid'] = record.getId();
                    contactStore.load();
                    cstm.down('form').loadRecord(record);
    
    
                } else {
                    contactStore.removeAll();
                    cstm.setIconCls('iconFeed');
                    cstm.setTitle('New Customer');
                }
            };
            var removeAction = Ext.create('Ext.Action', {
                scope: this,
                iconCls: 'iconAllDelete',
                text: actions[3],
                action: 'remove',
                disabled: true,
                handler: function (bt, ck) {
                    
                    var selections = this.getSelectionModel().getSelection();
                    if (selections.length > 0) {
                        var store = this.store;
                        Ext.Msg.show({
                            title: 'Warning',
                            msg: actions[24],
                            buttons: Ext.Msg.OKCANCEL,
                            icon: Ext.Msg.QUESTION,
                            fn: function (btn, text) {
                                if (btn == 'ok') {
                                    store.remove(selections);
                                    store.sync();
                                }
                            }
                        });
                    }
                }
            });
            var editAction = Ext.create('Ext.Action', {
                scope: this,
                iconCls: 'iconEdit',
                text: actions[1],
                action: 'edit',
                disabled: true,
                handler: function (bt, ck) {
                    var selections = this.getSelectionModel(); 
                    if (selections.getSelection().length > 0) {
                        selections = selections.getLastSelected();
                        editCustomer(selections);
                    }
                }
    
    
            });
    
    
            var refreshAction = Ext.create('Ext.Action', {
                scope: this,
                iconCls: 'iconRefresh',
                text: actions[11],
                action: 'refresh',
                disabled: false,
                handler: function (bt, ck) {
                    this.store.load();
                }
            });
            var getMoreAction = Ext.create('Ext.Action', {
                scope: this,
                iconCls: 'iconAddRead',
                text: actions[4],
                action: 'getMore',
                disabled: false,
                handler: function (widget, event) {
                    var store = this.store;
                    var cp = store.getCount();
                    if (cp == 0) {
                        store.load();
    
    
                    } else {
                        cp = store.getTotalCount();
                        cpc = store.currentPage;
                        cps = store.pageSize;
                        if (cp > cpc * cps) {
                            store.clearOnPageLoad = false;
                            store.nextPage();
                            store.clearOnPageLoad = true;
                        } else {
                            Ext.Msg.show({
                                title: 'Message',
                                msg: 'Reached the last page.',
                                icon: Ext.Msg.WARNING,
                                buttons: Ext.Msg.OK
                            });
                        }
                    }
                }
            });
    
    
            var slmd = Ext.getCmp('AppMenu');
            slmd = slmd.getSelectionModel().getLastSelected(); 
            if (slmd) {
                if (slmd.get('addp'))
                    createAction.enable();
                if (slmd.get('upp'))
                    editAction.enable();
                if (slmd.get('delp'))
                    removeAction.enable();
            };
            
            var contextMenu = Ext.create('Ext.menu.Menu', {
                scope: this,
                items: [ createAction, editAction, refreshAction, getMoreAction, '-', removeAction]
            });
            
            if(partUsersStore==null){
             partUsersStore = Ext.create('App.store.PartUsers', { autoLoad: false, autoSync: false });
             
            partCustomerStore = stringHead(currUser.userType, true)
            if (partCustomerStore == '2') {
                partUsersStore.getProxy().extraParams['part'] = 'groupid';
                partUsersStore.getProxy().extraParams['key'] = stringHead(currUser.userGD, true); 
            }
            else if (partCustomerStore == '3') {
                partUsersStore.getProxy().extraParams['part'] = 'departmentid';
                partUsersStore.getProxy().extraParams['key'] = stringHead(currUser.userGD, false).substring(1);
            }
            else {
                partUsersStore.getProxy().extraParams['part'] = 'id';
                partUsersStore.getProxy().extraParams['key'] = stringHead(currUser.user, true);
            }
            partCustomerStore = Ext.create('App.store.Customers', { autoLoad: false, autoSync: false });
            partCustomerStore.getProxy().extraParams['part'] = partUsersStore.getProxy().extraParams['part'];
            partCustomerStore.getProxy().extraParams['key'] = partUsersStore.getProxy().extraParams['key'];
            partUsersStore.load();
            partCustomerStore.load();
            }
            if(contactStore==null){
             contactStore = Ext.create('App.store.Contacts', { autoLoad: false, autoSync: false });
             }
            Ext.apply(this, {
                tbar: [createAction, '-', editAction, '-', refreshAction, '->', removeAction],
                store: partCustomerStore,
                bbar: { xtype: 'pagingtoolbar', store: partCustomerStore, displayInfo: true,
                    items: ['-', { typeAhead: true, width: 100, queryMode: 'local', labelWidth: 30, fieldLabel: 'Size', xtype: 'combobox', editable: false, displayField: 'name', store: pageSize, value: initialPageSize,
                        listeners: { change: function (cmbx, newValue, oldValue, eOpts) {
                            this.up('grid').store.pageSize = newValue;
                        }
                        }
                    }, '-', getMoreAction, { xtype: 'tbtext', id: 'targetCustomer'}]
                },
                columns: [
        { text: 'SN', xtype: 'rownumberer', width: 26 },
        { text: columnsTextArr[12], dataIndex: 'rname' }, 
        {text: columnsTextArr[21], dataIndex: 'fullname', flex: 1},
        { text: columnsTextArr[23], dataIndex: 'web' },
        { text: columnsTextArr[22], dataIndex: 'countryid', renderer: formatCountry },
        { text: columnsTextArr[25], dataIndex: 'regionid', renderer: formatRegion },
        { text: columnsTextArr[26], dataIndex: 'code' },
        { text: columnsTextArr[32], dataIndex: 'bank' },
        { text: columnsTextArr[27], dataIndex: 'ownerid', renderer: formatUser },
        { text: columnsTextArr[28], dataIndex: 'createrid', renderer: formatUser },
        { text: columnsTextArr[29], dataIndex: 'ispartner', width: 60, xtype: 'booleancolumn', trueText: 'Yes', falseText: 'No' },
        { text: columnsTextArr[30], dataIndex: 'createdate', width: 150}],
        
                viewConfig: {
                    stripeRows: true,
                    listeners: {
                        itemcontextmenu: function (view, rec, node, index, e) {
                            e.stopEvent();
                            contextMenu.showAt(e.getXY());
                            return false;
                        }
                    }
                }
            });
            this.on('itemdblclick', function (view, rec, node, index, e) {
                    editCustomer(rec);
              });
            this.callParent(arguments);
        }
    });
    Turn off the animation effects can resolve the issue.
    animCollapse: false,
    Last edited by manlsea; 25 Jun 2012 at 10:33 PM. Reason: Resolved

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,010
    Vote Rating
    460
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Last edited by manlsea; Today at 1:33 AM. Reason: Resolved
    Is this resolved, or a workaround and it still needs attention?

    Scott.

  3. #3
    Sencha User
    Join Date
    Apr 2010
    Location
    China
    Posts
    43
    Vote Rating
    0
    manlsea is on a distinguished road

      0  

    Default


    You are right, it still needs attention. because the problem still remains, turn off the dynamic effects, just a way to avoid the error occurred.

  4. #4
    Sencha - Ext JS Dev Team dongryphon's Avatar
    Join Date
    Jul 2009
    Posts
    1,348
    Vote Rating
    134
    dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all

      0  

    Default


    Thanks - I've moved this to the Bugs forum and will open a ticket.
    Don Griffin
    Ext JS Development Team Lead

    Check the docs. Learn how to (properly) report a framework issue and a Sencha Cmd issue

    "Use the source, Luke!"

  5. #5
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,941
    Vote Rating
    635
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    There's too many missing parts in your test case to run it directly, so I tried to simulate it and I can't reproduce it with 4.1.1. Please post a test case that I can run locally that demonstrates the issue.

    My sample:

    Code:
    Ext.define('MyModel', {
        extend: 'Ext.data.Model',
        fields: ['name']
    });
    
    Ext.require('*');
    
    Ext.onReady(function() {
        var store = Ext.create('Ext.data.Store', {
            model: MyModel,
            data: [{
                name: 'Item 1'
            }]
        });
        
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: {
                xtype: 'tabpanel',
                items: [{
                    title: 'A tab',
                    layout: 'border',
                    items: [{
                        title: 'Center',
                        region: 'center',
                        xtype: 'gridpanel',
                        store: store,
                        columns: [{
                            dataIndex: 'name',
                            text: 'Name'
                        }]
                    }, {
                        title: 'South',
                        region: 'south',
                        xtype: 'gridpanel',
                        store: store,
                        columns: [{
                            dataIndex: 'name',
                            text: 'Name'
                        }],
                        height: 200,
                        collapsible: true,
                        collapsed: true,
                        split: true
                    }]
                }]
            }    
        });
    });
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!