Назначение TPL со значениями для манипулирования DOM в extjs

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 , Iсоздали демонстрационную версию, используя тот же метод store.filter() и select событие combo.

Узел Это всего лишь пример, который вы можете изменить в зависимости от ваших требований.

Фрагмент кода:

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