javascript - 在 extjs 中为 DOM 操作分配 tpl 值

Question

我有一个接一个的过滤器复选框，如下所示:

现在我想将其更改为:

我解决这个问题的方法是:

我选择 DOM 并循环遍历它以选择所有复选框:

var x  = $("table .x-form-type-checkbox")
    $(x).each(function (index, value){
    console.log(value.children)
});

输出:

我正在创建 extjs 组合框下拉列表:

Ext.application({
    name: 'timefilter',
    launch: function() {
        Ext.widget({
            xtype: 'combobox',
            renderTo: Ext.get('newfilter1'),
            fieldLabel: 'Time Frame',
            labelAlign: 'right',
            displayField: 'name',
            editable: false,
            multiSelect: false,
            tpl: new Ext.XTemplate('<tpl for=".">', '<div class="x-boundlist-item">', '<input type="radio" />', '{name}', '</div>', '</tpl>'),
            store: Ext.create('Ext.data.Store', {
                fields: [{
                    type: 'string',
                    name: 'name'
                }],
                data: [{
                    "name": "Today"
                }, {
                    "name": "This week"
                }, {
                    "name": "This month"
                }, {
                    "name": "Next week"
                }, {
                    "name": "Next month"
                }, {
                    "name": "All time"
                }]
            }),
            queryMode: 'local',
            listeners: {
                select: function(combo, records) {
                    var node;
                    Ext.each(records, function(rec) {
                        node = combo.getPicker().getNode(rec);
                        Ext.get(node).down('input').dom.checked = true;
                    });
                },
                beforedeselect: function(combo, rec) {
                    var node = combo.getPicker().getNode(rec);
                    Ext.get(node).down('input').dom.checked = false;
                }
            }
        });
    }
});

输出:

现在我尝试循环并将包含每个复选框输入的 value.children 映射到 tpl，如下所示:

var x = $("table .x-form-type-checkbox")
$(x).each(function(index, value) {

    Ext.application({
        name: 'timefilter',
        launch: function() {
            Ext.widget({
                xtype: 'combobox',
                renderTo: Ext.get('newfilter1'),
                fieldLabel: 'Activity Status',
                labelAlign: 'right',
                displayField: 'name',
                editable: false,
                multiSelect: false,
                tpl: value.innerHTML,
                queryMode: 'local',
                listeners: {
                    select: function(combo, records) {
                        var node;
                        Ext.each(records, function(rec) {
                            node = combo.getPicker().getNode(rec);
                            Ext.get(node).down('input').dom.checked = true;
                        });
                    },
                    beforedeselect: function(combo, rec) {
                        var node = combo.getPicker().getNode(rec);
                        Ext.get(node).down('input').dom.checked = false;
                    }
                }
            });
        }
    });

    console.log(value.children)
});

但我没有得到预期的结果:

请告诉我哪里做错了或者有更好的方法。

Answer 1

您可以使用 store.filter() 来实现此功能combobox 中的方法选择事件。

在此Fiddle ，我使用相同的 store.filter() 方法和 combo 的 select 事件创建了一个演示。

节点这只是一个示例，您可以根据您的要求进行更改。

代码片段:

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.define('ComboCheckbox', {
            extend: 'Ext.form.field.ComboBox',
            xtype: 'combocheckbox',
            fieldLabel: 'Status',
            tpl: new Ext.XTemplate('<tpl for=".">', '<div class="x-boundlist-item">', '<input type="checkbox" {checked} />', '{text}', '</div>', '</tpl>'),
            store: Ext.create('Ext.data.Store', {
                fields: ['text', 'value', {
                    name: 'checked',
                    defaultValue: ''
                }],
                data: [{
                    text: "All Statuses"
                }, {
                    text: "Not Started"
                }, {
                    text: "In Progress"
                }, {
                    text: "Completed"
                }, {
                    text: "Overdue"
                }]
            }),
            queryMode: 'local',
            listeners: {
                select: function (combo, rec) {
                    rec.set('checked', 'checked');
                },
                beforedeselect: function (combo, rec) {
                    rec.set('checked', '');
                }
            }
        });

        Ext.define('GridStore', {
            extend: 'Ext.data.Store',
            alias: 'store.gridstore',
            autoLoad: true,
            fields: [{
                name: 'issue',
                mapping: 'issuetype',
                convert: function (v) {
                    return v.toLowerCase();
                }
            }],
            proxy: {
                type: 'ajax',
                url: 'task.json',
                reader: {
                    type: 'json',
                    rootProperty: 'task'
                }
            }
        });

        Ext.create({
            xtype: 'grid',
            renderTo: Ext.getBody(),
            title: 'Demo Grid',
            store: {
                type: 'gridstore'
            },
            height: 400,
            width: '100%',

            tbar: [{
                xtype: 'combocheckbox',
                listeners: {
                    select: function (combo, rec) {
                        var store = combo.up('grid').getStore();
                        store.clearFilter();
                        if (rec.get('text').toLowerCase() !== 'all statuses') {
                            store.filter('issue', rec.get('text').toLowerCase());
                        }
                    }
                }
            }],
            columns: [{
                text: 'Status',
                width: 120,
                dataIndex: 'issuetype',
                renderer: function (value, metaData, record, rowIndex) {
                    let cls = 'notstarted';
                    switch (value.toLowerCase()) {
                    case 'in progress':
                        cls = 'inprocess';
                        break;
                    case 'completed':
                        cls = 'completed';
                        break;
                    case 'overdue':
                        cls = 'overdue';
                        break;
                    }

                    return `<span class="issuetype ${cls}">${value}</span>`;
                }
            }, {
                text: 'Summary',
                flex: 1,
                dataIndex: 'summary'
            }],
            selModel: {
                selType: 'checkboxmodel',
                mode:'SIMPLE'
            }
        })
    }
});