Question

我有一个extJS小提琴，当点击该复选框时会提醒用户。

以下是代码：

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及之前的版本时它不会触发。

但是当我检查api doc for 4.1.1版时，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); }
        }
    });

试试这个小提琴：

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

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

1 个答案: