删除和添加网格面板再次失败与复选框模型在extjs4.1和4.2 [英] Remove and Add Gridpanel again fail with CheckboxModel in extjs4.1 and 4.2

问题描述

我有一个面板与 layout：border ，看起来像 是一个更深入的解释。

执行示例应该有助于解决您的问题。

  Ext.define（'Example'，{
 extends：'Ext.grid.Panel'，
 title：'Simpsons'，
 initComponent ：function（）{
 Ext.apply（this，{
 selModel：Ext.create（'Ext.selection.CheckboxModel'，{
 checkOnly：true，
 mode：' MULTI'
}），
 store：Ext.create（'Ext.data.Store'，{
 fields：['name'，'email'，'phone']，
 data：{
'items'：[{
'name'：'Lisa'，
email：[e-mail]，
phone ：[phone]
}，{
'name'：'Bart'，
email：[e-mail]，
 电话：555-222-1234
}，{
'name'：'荷马'，
电子邮件：[e-mail]，
 电话：555-222-1244
}，{
'name'：'Marge'，
email：[e-mail]，
 电话：555-222-1254
} 
] 
}，
代理：{
类型：'内存'，
阅读器： {
 type：'json'，
 root：'items'
} 
} 
}），
列：[{
 header ：'Name'，
 dataIndex：'name'，
 editor：{
 xtype：'textfield'
} 
}，{
 header：'Email'，
 dataIndex：'email'，
 flex：1 
} {
 header：'Phone'，
 dataIndex：'phone'
} 
] 
}）; 
 
 this.callParent（）; 
} 
 
}）; 
  

I have a panel with layout: border, that look like http://jsfiddle.net/rpcbX/

When i click add button on west region I with removeAll from center region and add something again, in this example i add and remove gridpanel.

But My gridpanel has CheckboxModel. And that can't remove after i add gridpanel again. Follow bellow step u will see bug.

1. Run my app and click add button
2. Click checkall butoon on gridpanel
3. Click add button again

Now u will see the bug, the selection was selected and u can't click checkall button to working. Look like

I think when i click add button then center region will has a new gridpanel (new state)

How to fix that thank

p/s: i was test that on extjs4.2.1 and the result's worse. i can't click checkbox on row ( i think i was click that but graphic not change)

Here is my code i using with add button

                text: 'add',
                handler: function() {
                    panel.down('panel[region="center"]').removeAll();
                    var grid = new Example();
                    panel.down('panel[region="center"]').add(grid);
                }

解决方案

You example doesn't work because you are adding instances to the prototype and those instances of store, selModel potentially columns will be shared across all the instances of Example. Your example is hitting undefined behavior. Non primitives on the prototype is generally a bad thing and for some reason I see them on stackoverflow a lot. Here is a more in depth explanation.

Doing this for Example should help fix your problem.

Ext.define('Example', {
    extend: 'Ext.grid.Panel',
    title: 'Simpsons',
    initComponent: function() {
        Ext.apply(this, {
            selModel: Ext.create('Ext.selection.CheckboxModel', {
                checkOnly: true,
                mode: 'MULTI'
            }),
            store: Ext.create('Ext.data.Store', {
                fields: ['name', 'email', 'phone'],
                data: {
                    'items': [{
                            'name': 'Lisa',
                            "email": "[e-mail]",
                            "phone": "555-111-1224"
                        }, {
                            'name': 'Bart',
                            "email": "[e-mail]",
                            "phone": "555-222-1234"
                        }, {
                            'name': 'Homer',
                            "email": "[e-mail]",
                            "phone": "555-222-1244"
                        }, {
                            'name': 'Marge',
                            "email": "[e-mail]",
                            "phone": "555-222-1254"
                        }
                    ]
                },
                proxy: {
                    type: 'memory',
                    reader: {
                        type: 'json',
                        root: 'items'
                    }
                }
            }),
            columns: [{
                    header: 'Name',
                    dataIndex: 'name',
                    editor: {
                        xtype: 'textfield'
                    }
                }, {
                    header: 'Email',
                    dataIndex: 'email',
                    flex: 1
                }, {
                    header: 'Phone',
                    dataIndex: 'phone'
                }
            ]
        });

        this.callParent();
    }

});

这篇关于删除和添加网格面板再次失败与复选框模型在extjs4.1和4.2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！