在 extjs4.1 和 4.2 中使用 CheckboxModel 删除和添加 Gridpanel 再次失败

Posted 2023-02-26

【中文标题】在 extjs4.1 和 4.2 中使用 CheckboxModel 删除和添加 Gridpanel 再次失败

【英文标题】：Remove and Add Gridpanel again fail with CheckboxModel in extjs4.1 and 4.2

【发布时间】：2013-09-27 14:18:48

【问题描述】：

我有一个带有layout: border 的面板，看起来像http://jsfiddle.net/rpcbX/

当我单击西部区域的add 按钮时，我使用中心区域的removeAll 并再次添加一些内容，在此示例中，我添加和删除网格面板。

但我的网格面板有CheckboxModel。并且在我再次添加网格面板后无法删除。 按照下面的步骤你会看到错误。

1. 运行我的应用并点击add 按钮 2. 点击网格面板上的checkall按钮 3.再次点击add按钮

现在你会看到错误，选择了选择，你不能点击checkall按钮来工作。看起来像

我认为当我单击添加按钮时，中心区域将有一个新的网格面板（新状态）

如何解决这个问题，谢谢

p/s：我在 extjs4.2.1 上进行了测试，结果更糟。我不能点击行上的复选框（我想我点击了那个但图形没有改变）

这是我使用add按钮的代码

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

【参考方案1】：

您的示例不起作用，因为您正在向原型添加实例，并且这些存储实例，selModel 可能列将在Example 的所有实例之间共享。您的示例遇到了未定义的行为。原型上的非原语通常是一件坏事，出于某种原因，我经常在 *** 上看到它们。 Here 是更深入的解释。

为Example 执行此操作应该有助于解决您的问题。

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();
    

);