extjs表格实现复选框的代码

以下是实现 extjs 表格复选框的代码示例：

1. 在列模型中添加一个复选框列：

{
    xtype: 'checkcolumn',
    header: '选择',
    dataIndex: 'selected',
    width: 50,
    editor: {
        xtype: 'checkbox',
        cls: 'x-grid-checkheader-editor'
    }
}

2. 在数据模型中添加一个 selected 字段：

Ext.define('MyModel', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'id', type: 'int'},
        {name: 'name', type: 'string'},
        {name: 'selected', type: 'bool'}
    ]
});

3. 在表格中启用多选模式：

selModel: {
    selType: 'checkboxmodel',
    mode: 'MULTI'
}

以上就是实现 extjs 表格复选框的代码示例。

相关问题

ExtJS复选框如何监听

在ExtJS的复选框组件中，可以通过监听`change`事件来处理复选框的状态变化。当复选框的状态发生变化时，`change`事件就会被触发，可以在事件处理函数中获取到复选框的当前状态，从而进行相应的处理。

下面是一个示例：

Ext.create('Ext.form.Panel', {
    title: 'Checkbox Example',
    bodyPadding: 10,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'checkbox',
        fieldLabel: 'My Checkbox',
        listeners: {
            change: function(checkbox, newValue, oldValue, eOpts) {
                // newValue为当前状态，true为选中，false为未选中
                if (newValue) {
                    console.log('复选框被选中了');
                } else {
                    console.log('复选框被取消选中');
                }
            }
        }
    }]
});

在上述示例中，我们创建了一个复选框组件，并在其中添加了`change`事件监听器。当复选框的状态发生变化时，`change`事件就会被触发，并执行相应的事件处理函数。在事件处理函数中，可以通过`newValue`参数获取到复选框的当前状态，从而进行相应的处理。

extjs表格搜索框代码

以下是一个简单的 extjs 表格搜索框代码示例：

Ext.create('Ext.toolbar.Toolbar', {
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: '搜索',
        labelWidth: 50,
        width: 200,
        enableKeyEvents: true,
        listeners: {
            keyup: function(field, e) {
                var value = field.getValue();
                var store = Ext.getCmp('myGrid').getStore();
                store.clearFilter();
                if (value) {
                    var regex = new RegExp(value, "i");
                    store.filterBy(function(record) {
                        return regex.test(record.get('name'));
                    });
                }
            }
        }
    }]
});

Ext.create('Ext.grid.Panel', {
    id: 'myGrid',
    renderTo: Ext.getBody(),
    store: Ext.create('Ext.data.Store', {
        fields: ['name', 'email', 'phone'],
        data: [{
            name: 'Lisa',
            email: 'lisa@simpsons.com',
            phone: '555-111-1224'
        }, {
            name: 'Bart',
            email: 'bart@simpsons.com',
            phone: '555-222-1234'
        }, {
            name: 'Homer',
            email: 'homer@simpsons.com',
            phone: '555-222-1244'
        }, {
            name: 'Marge',
            email: 'marge@simpsons.com',
            phone: '555-222-1254'
        }]
    }),
    columns: [{
        text: '姓名',
        dataIndex: 'name'
    }, {
        text: '邮箱',
        dataIndex: 'email'
    }, {
        text: '电话',
        dataIndex: 'phone'
    }]
});