javascript - extJS 版本 4.1.1 中不会触发 beforecheckchange 事件

Question

我有一个 extJS fiddle ，当单击复选框时它会提醒用户。

这是代码:

Ext.application({
    name : 'Fiddle',

    launch : function() {
        var myStore = Ext.create('Ext.data.Store',{
            data: [
                {
                    name: 'ex',
                    oldUser: 'Y'
                },
                {
                    name: 'ea',
                    oldUser: 'N'
                }
            ],
            fields: [
                {
                    name: 'name'
                },
                {
                    name: 'oldUser'
                }
            ]
        });
        Ext.create('Ext.grid.Panel', {
            height: 250,
            width: 579,
            title: 'My Grid Panel',
            renderTo: Ext.getBody(),
            defaultListenerScope: true,
            store: myStore,
            columns: [
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'name',
                    text: 'Name'
                },
                {
                    xtype: 'checkcolumn',

                    dataIndex: 'oldUser',
                    text: 'OldUser',
                    listeners: {
                        // problem here!
                        beforecheckchange: function(checkcolumn, rowIndex, checked, eOpts) { alert("asd"); }
                    }
                }
            ]
        });
    }
});

当我使用 extjs 4.2.0 及更高版本时，beforecheckchange 事件将触发，但当我使用 extjs 4.1.1 及之前的版本时，它不会触发。

但是当我检查 4.1.1 版本的 api 文档时，beforecheckchange 被列为我可以使用的事件。

我想知道为什么上面的例子不适用于 4.1.1

Answer 1

看起来您必须手动添加 CheckColumn:

var myCheckColumn = Ext.create('Ext.ux.CheckColumn',{
        text: 'OldUser',
        dataIndex: 'oldUser',
        listeners: {
          beforecheckchange: function(checkcolumn, rowIndex, checked, eOpts) { alert(checked); }
        }
    });

试试这个 fiddle :

Ext.application({
name : 'Fiddle',

launch : function() {
    Ext.Loader.setConfig({enabled:true});
    var myStore = Ext.create('Ext.data.Store',{
        data: [
            {
                name: 'ex',
                oldUser: true
            },
            {
                name: 'ea',
                oldUser: false
            }
        ],
        fields: [
            {
                name: 'name'
            },
            {
                name: 'oldUser'
            }
        ]
    });

    var myCheckColumn = Ext.create('Ext.ux.CheckColumn',{
        text: 'OldUser',
        dataIndex: 'oldUser',
        listeners: {
          beforecheckchange: function(checkcolumn, rowIndex, checked, eOpts) { alert(checked); }
        }
    });




    Ext.create('Ext.grid.Panel', {
        height: 250,
        width: 579,
        title: 'My Grid Panel',
        renderTo: Ext.getBody(),
        defaultListenerScope: true,
        store: myStore,
        columns: [
            {
                xtype: 'gridcolumn',
                dataIndex: 'name',
                text: 'Name'
            },
            myCheckColumn
        ]
    });
}
});

但是，渲染复选框可能会出现问题。更改 CheckHeader.css 中的背景图像或创建新的背景图像并将其添加到应用程序中。

CheckHeader.css:

.x-grid-checkheader {
height: 14px;
background-image: url('images/unchecked.gif');
background-position: 50% -2px;
background-repeat: no-repeat;
background-color: transparent;
}

.x-grid-checkheader-checked {
background-image: url('images/checked.gif');
}

.x-grid-checkheader-editor .x-form-cb-wrap {
text-align: center;
}