CheckboxGroup с данными из своей таблицы

Добры день.
Подскажите, как правильно сделать checkboxgroup с данными их своей таблицы? Пока я научился делать свои xtype, оформленный в виде select, а такой вид не знаю, как сделать. Прошу помощи у специалистов))

Андрей

26 марта 2018, 12:21

1 179

Комментарии: 4

Андрей

27 марта 2018, 11:39

Добрый день. Прошу помощи у сообщества, как решить мою проблему. Я делаю так:
В файле combo.js регистрирую свой кастомный comboboxgroup

MyComp.combo.CheckboxGroup = function (config) {
    config = config || {};
    Ext.applyIf(config, {
        items: [{
            boxLabel: 'hidden',
            name: config.hiddenName + '[]',
            inputValue: '',
            itemId: '',
            hidden: true,
            checked: true
        }],
        msgTarget: 'under',
        listeners: {
            afterrender: {fn: this.onAfterRender, scope: this}

        }
    });
    MyComp.combo.CheckboxGroup.superclass.constructor.call(this, config);
};
Ext.extend(MyComp.combo.CheckboxGroup, Ext.form.CheckboxGroup, {
    onAfterRender: function () {
        if (this.url) {
            this.loadData();
        } else {
            this.setup();
        }
    },
    loadData: function () {
        MODx.Ajax.request({
            url: this.url,
            params: this.baseParams,
            listeners: {
                success: {
                    fn: function (r) {
                        this.setup(r.results);
                    },
                    scope: this
                }
            }
        });
    },
    setup: function (data) {
        if (data) {
            Ext.each(data || [], function (item) {
                this.addItem({
                    boxLabel: item[this.displayField],
                    name: this.hiddenName + '[]',
                    inputValue: item[this.valueField],
                    checked: this.checkValue(item[this.valueField])
                });
            }, this);
        } else {
            Ext.each(this.items.items || [], function (item) {
                if (!item.hidden) {
                    item.setValue(this.checkValue(item.inputValue));
                }
            }, this);
            this.addItem({
                boxLabel: 'hidden',
                name: this.hiddenName + '[]',
                inputValue: '',
                itemId: '',
                hidden: true,
                checked: true
            });
        }
    },
    addItem: function (data) {
        var checkbox = new Ext.form.Checkbox(data),
            col = this.panel.items.get(this.items.getCount() % this.panel.items.getCount());
        this.items.add(checkbox);
        col.add(checkbox);
    },
    checkValue: function (val) {
        var checked = false;
        Ext.each(this.values || [], function (item) {
            if (item.value == val) {
                checked = true;
                return false;
            }
        });
        return checked;
    },
    validateValue: function (b) {
        var valid = false;
        if (this.allowBlank) return true;
        Ext.each(this.items.items || [], function (item) {
            if (!item.hidden && item.getValue()) {
                valid = true;
                return false;
            }
        }, this);
        if (!valid) this.markInvalid(this.blankText);
        return valid;
    }

});
Ext.reg('myComp-pricegroup', MyComp.combo.CheckboxGroup);

В файле окна, где нужно вывести группу чекбоксов, добавляю такой вызов:

{
	xtype: 'mycomp-pr',
	fieldLabel: _('mycomp_pr_name'),
	description: '<b>[[*name]]</b><br />'+_('mycomp_pr_name_help'),
	columns: 1,
	hiddenName: 'name',
	displayField: 'name',
	valueField: 'id',
	url: MyComp.config.connector_url,
	baseParams:{
		action: 'mgr/item/pr/getpr'
	},
	allowBlank: true,
}

В результате я вижу только заголовок группы чекбоксов. В тоже время судя по консоли, данные с процессора принимаются и приходят, но не отображаются. Может нужно шаблон отображения вывести или еще что? Я в замешательстве…

Андрей

28 марта 2018, 12:12

Не надеюсь конечно на помощь уже, сообществу важнее обсуждать новый логотип, это же сильно влияет на удобство работу с MODX, но все же, может все-таки кто-то снизойдет до обычных пользователей:
Подскажите, почему у меня в этом коде данные есть:

loadData: function () {
        MODx.Ajax.request({
            url: this.url,
            params: this.baseParams,
            listeners: {
                success: {
                    fn: function (r) {
                        console.log(r); // Здесь получаю правильные данные
                        this.setup(r.results);
                    },
                    scope: this
                }
            }
        });

как мне их передать в окно чтобы создать чекбоксы…

Андрей

29 марта 2018, 12:29

Сейчас, с помощью пользователя Prihod(за что ему огромное спасибо) я смог вывести сами чекбоксы. Но у меня вот какая проблема осталась:
Если я захожу в первый раз в редактирование, то все отображается нормально: prnt.sc/ixidgm, если же я закрою окно, и полазию по вкладками или просто заново его открою — то там одни заголовки: prnt.sc/ixidm3
С чем это может быть связано.
Также пока не очень получатся отметить те чекбоксы, которые ранее были отмечены (на скрине я принудительно все отметил)
Вот мой код:

msFabrics.combo.CheckboxGroup = function (config) {
    
    config = config || {};
    Ext.applyIf(config, {
        items: [{
            boxLabel: 'hidden',
            name: config.hiddenName + '[]',
            inputValue: '',
            itemId: '',
            hidden: true,
            checked: true
        }],
        msgTarget: 'under',
        listeners: {
            afterrender: {fn: this.onAfterRender, scope: this}
        }
        
    });
    msFabrics.combo.CheckboxGroup.superclass.constructor.call(this, config);
};
Ext.extend(msFabrics.combo.CheckboxGroup, Ext.form.CheckboxGroup, {
    onAfterRender: function () {
        if (this.url) {
            this.loadData();
        } else {
            this.setup();
        }
    },
    loadData: function () {
        MODx.Ajax.request({
            url: this.url,
            params: this.baseParams,
            listeners: {
                success: {
                    fn: function (r) {;
                        this.setup(r.results);
                    },
                    scope: this
                }
            }
        });
    },
    setup: function (data) {
        console.log(data);
        if (data) {
            Ext.each(data || [], function (item) {
                
                this.addItem({
                    boxLabel: item[this.displayField],
                    name: this.hiddenName + '[]',
                    inputValue: item[this.valueField],
                    checked: this.checkValue(item[this.valueField])
                });
            }, this);
            
        } else {
            Ext.each(this.items.items || [], function (item) {
                if (!item.hidden) {
                    item.setValue(this.checkValue(item.inputValue));
                }
            }, this);
            this.addItem({
                boxLabel: 'hidden',
                name: this.hiddenName + '[]',
                inputValue: '',
                itemId: '',
                hidden: true,
                checked: true
            });
        }
    },
    addItem: function (data) {
        var group = Ext.getCmp('msfabrics-pricegroup');
        var checkbox = new Ext.form.Checkbox(data),
            col = this.panel.items.get(this.items.getCount() % this.panel.items.getCount());
        this.items.add(checkbox);
        col.add(checkbox);
        group.panel.doLayout();
    },
    
    checkValue: function (val) {
        
        var checked = false;
        Ext.each(val || [], function (item) {
            //console.log(item);
            if (item == val) {
                checked = true;
                return false;
            }
        });
        
        return checked;
    },
    
    validateValue: function (b) {
        var valid = false;
        if (this.allowBlank) return true;
        Ext.each(this.items.items || [], function (item) {
            if (!item.hidden && item.getValue()) {
                valid = true;
                return false;
            }
        }, this);
        if (!valid) this.markInvalid(this.blankText);
        console.log(valid);
        return valid;
    },

});
Ext.reg('msfabrics-pricegroup', msFabrics.combo.CheckboxGroup);

и в окне вызова:

{
            xtype: 'msfabrics-pricegroup',
            fieldLabel: _('msfabrics_pricegroup_name'),
            description: '<b>[[*name]]</b><br />'+_('msfabrics_pricegroup_name_help'),
            columns: 2,
            name: 'pricegroup_id',
            hiddenName: 'pricegroup_id',
            displayField: 'name',
            valueField: 'id',
//	    values: config.record.pricegroup_id // Здесь у меня не получается получить отмеченные чекбоксы
            url: msFabrics.config.connector_url,
            baseParams:{
                action: 'mgr/item/pricegroup/getpricegroup'
            }

Андрей

29 марта 2018, 12:43

остался один момент: Если я захожу в первый раз в редактирование, то все отображается нормально: prnt.sc/ixidgm, если же я закрою окно, и полазию по вкладками или просто заново его открою — то там одни заголовки: prnt.sc/ixidm3
Как исправить, кто подскажет?

Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.