为什么带有CheckboxModel的ExtJS 4.2网格停止工作?

时间:2014-08-02 16:19:05

标签: extjs grid

在第一次弹出窗口时,在以下网格中,您可以选中带有复选框的项目。

但是,如果单击“确定”关闭弹出窗口,然后单击再次启动它,则复选框似乎不起作用。

如果您关闭弹出窗口并再次启动它,则现在选中/取消选中您刚刚点击的复选框。

如果我将closeAction设置为'隐藏'在窗口上这个问题消失了,但是我不会失去破坏的默认closeAction的值吗?

事实上,每次都不会破坏窗口并重新创建它会弄乱其他东西,所以设置closeAction隐藏在我的真实应用程序中不起作用。

当closeAction设置为destroy时,单击网格行复选框时,至少会调度这三个事件:itemclick,cellclick,select。但是当closeAction设置为hide时,不会调度select事件。

Ext.define('MyPopup', {
    extend: 'Ext.window.Window',
    alias: 'widget.myPopup',
    width: 200,
    height: 200,
    layout: {
        type: 'vbox',
        align: 'stretch'
    },
    items: [{
        xtype: 'grid',
        selModel: Ext.create('Ext.selection.CheckboxModel', {
            checkOnly: false,
            mode: "MULTI"
        }),
        store: Ext.create('Ext.data.Store', {
            fields: ['name'],
            data: [
                {name: 'one'},
                {name: 'two'},
                {name: 'three'}
            ]
        }),
        columns: [{
            text: 'Name',
            dataIndex: 'name'
        }]
    }],
    dockedItems: [{
        dock: 'bottom',
        xtype: 'button',
        width: '50',
        text: 'OK',
        handler: function(comp){
            comp.up('window').close();
        }
    }]
});

Ext.onReady(function() {
    Ext.create('Ext.container.Viewport', {
        renderTo: Ext.getBody(),
        layout: 'fit',
        items: [{
            xtype: 'container',
            layout: {
                type: 'vbox',
                align: 'center'
            },
            items: [{
                xtype: 'button',
                width: 50,
                text: 'Click',
                handler: function(){
                    Ext.create('MyPopup').show();
                }
            }]
        }]
    });
});

1 个答案:

答案 0 :(得分:2)

我能够在小提琴中重新创建您的问题,并发现如果不是创建checkboxmodel对象而是定义它。它解决了这个问题。

以下是演示定义selTypeselModel配置的代码:

Ext.define('MyPopup', {
            extend: 'Ext.window.Window',
            alias: 'widget.myPopup',
            width: 200,
            height: 200,
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            items: [{
                xtype: 'grid',
                selType:'checkboxmodel',
                selModel: {
                    checkOnly: false,
                    mode: "MULTI"
                },
                store: Ext.create('Ext.data.Store', {
                    fields: ['name'],
                    data: [{
                        name: 'one'
                    }, {
                        name: 'two'
                    }, {
                        name: 'three'
                    }]
                }),
                columns: [{
                    text: 'Name',
                    dataIndex: 'name'
                }]
            }],
            dockedItems: [{
                dock: 'bottom',
                xtype: 'button',
                width: '50',
                text: 'OK',
                handler: function(comp) {
                    comp.up('window').close();
                }
            }]
        });

working fiddle for demonstration.