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

Добры день.
Подскажите, как правильно сделать checkboxgroup с данными их своей таблицы? Пока я научился делать свои xtype, оформленный в виде select, а такой вид не знаю, как сделать. Прошу помощи у специалистов))
Андрей
26 марта 2018, 12:21
modx.pro
802
0

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

Андрей
27 марта 2018, 11:39
0
Добрый день. Прошу помощи у сообщества, как решить мою проблему. Я делаю так:
В файле 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
    0
    Не надеюсь конечно на помощь уже, сообществу важнее обсуждать новый логотип, это же сильно влияет на удобство работу с 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
      0
      Сейчас, с помощью пользователя 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
        0
        остался один момент: Если я захожу в первый раз в редактирование, то все отображается нормально: prnt.sc/ixidgm, если же я закрою окно, и полазию по вкладками или просто заново его открою — то там одни заголовки: prnt.sc/ixidm3
        Как исправить, кто подскажет?
          Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
          4