The grid panel disappears after it expanded.

[manlsea]

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

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

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

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,

[scottmartin]

Last edited by manlsea; Today at 1:33 AM. Reason: Resolved

Is this resolved, or a workaround and it still needs attention?

Scott.

[manlsea]

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.

[dongryphon]

Thanks - I've moved this to the Bugs forum and will open a ticket.

[evant]

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:

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
                }]
            }]
        }    
    });
});