ExtJS и динамически обновляемый CheckboxGroup

Здравствуйте!

Надо сделать динамически обновляемый Ext.form.CheckboxGroup, а он к сожалению не принимает параметр store… Я пытаюсь сделать так:

1) Первым делом объявил свой кастомный CheckboxGroup:
myComponent.checkbox.ProductGroup = function(config)
{
	config = config || {};
	Ext.applyIf(config,{
		id:'mycomponent-checkbox-product-group',
		xtype: 'checkboxgroup',
		fieldLabel: 'Single Column',
		itemCls: 'x-check-group-alt',
		// Put all controls in a single column with width 100%
		columns: 1,
		items: [
			{boxLabel: 'Товар 8', name: 'products[8]', value: 8, checked: true},
			{boxLabel: 'Товар 9', name: 'products[9]', value: 9, checked: true},
		]
	});
	myComponent.checkbox.ProductGroup.superclass.constructor.call(this,config);
};
Ext.extend(myComponent.checkbox.ProductGroup, Ext.form.CheckboxGroup);
Ext.reg('mycomponent-checkbox-product-group', myComponent.checkbox.ProductGroup);

2) Слушаю в кастомном combobox-е событие select:
select: function(combo, row)
{
	var checkbox = Ext.getCmp('mycomponent-checkbox-product-group-'+ config.id);

	var find = false;
	checkbox.items.each(function(item,index,countall)
	{
		if( item.value == row.id )
		{
			item.setValue(true);
			find = true;
		}
	},
	this);

	if(!find)
	{
		checkbox.items.addAll(
			[new Ext.form.Checkbox({boxLabel: row.data.pagetitle, name: 'products['+row.data.id+']', value: row.data.id, checked: true})]
		);
	}
},

Но вот незадача! Если следом вывести прописать console.log(checkbox.items), то свежедобавленный пункт мы увидим, а вот в форме (рядом с уже имеющимися чекбоксами) не появляется. Как можно добавить его и для зрительного восприятия?)
Павел Гвоздь
23 декабря 2015, 20:47
modx.pro
3 381
0
Поблагодарить автора Отправить деньги

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

Павел Гвоздь
23 декабря 2015, 23:52
0
Нашёл различные расширения для CheckboxGroup, которые вроде как должны уметь подгружать данные с сервера (тут, тут, тут, тут), но не удалось ни один из них заюзать, где-то непонятно ничего, где-то ошибки сплошные вываливает. Может можно на том примере, что я привёл выше что-то сделать? Всю доку уже перечитал раз 5 по Ext.form.CheckboxGroup, и просто Ext.form.Checkbox, и Ext.form.MixedCollection. Но ничего для решения этой задачи не нашёл.
    Сергей Шлоков
    24 декабря 2015, 07:20
    0
    Когда в контейнер добавляешь элемент, его нужно перерисовывать
    container.doLayout();
      Павел Гвоздь
      24 декабря 2015, 08:11
      0
      А я там чёт не могу найти у себя Ext.Container. Вообще у меня это всё дело в MODx.Window происходит.
      Пробовал и так:
      Ext.getCmp('mycomponent-window-create').doLayout()
      и так:
      Ext.getCmp('mycomponent-tab-1').doLayout()
      и так:
      checkbox.doLayout()

      Всё одно — не перерисовывает ничего.
        Сергей Шлоков
        24 декабря 2015, 09:57
        0
        Как-то мудрёно ты добавляешь чекбокс. Попробуй так
        checkbox.items.push({boxLabel: row.data.pagetitle, name: 'products['+row.data.id+']', value: row.data.id, checked: true});
        checkbox.doLayout();
          Павел Гвоздь
          24 декабря 2015, 10:18
          0
          Нет, так он ошибку вываливает. У меня checkbox.items — это MixedCollection. И туда просто пушнув что-нибудь — ошибка:
          Uncaught TypeError: checkbox.items.push is not a function
          Но можно пушнуть переписав вот так checkbox.items.items.push({...}), но и так получается вот такой бред:


          Да и после, при выполнении checkbox.doLayout(); также ничего не происходит.

          А вот когда я делаю так, как у меня в посте выше checkbox.items.addAll([new Ext.form.Checkbox({...})]);, то всё норм с типами… у всех «S»… Вот только также ничего не происходит с отображением чекбоксов. :(
            Сергей Шлоков
            24 декабря 2015, 10:30
            0
            Странно, у тебя написано
            id:'mycomponent-checkbox-product-group',
            xtype: 'checkboxgroup',...
              Павел Гвоздь
              24 декабря 2015, 10:45
              0
              Извини, не совсем понимаю, что ты имел ввиду?
      Павел Гвоздь
      24 декабря 2015, 18:12
      +1
      Удалось реализовать! Как оказалось, у CheckboxGroup, есть CheckboxGroup.panel.doLayout();, вот когда его запускаем — он нам перерисовывает. Спасибо за помощь, Сергей!
        Андрей
        26 марта 2018, 14:42
        0
        Павел, подскажите, как сделать — пытаюсь вывести в окне компонента в виде CheckboxGroup даннеы из таблицы, но никак не осилю, в ручную могу прописать, а как туда подвязать получение данных?
        В доке вот что нашел:
        id:'myGroup',
                    xtype: 'checkboxgroup',
                    fieldLabel: 'Single Column',
                    itemCls: 'x-check-group-alt',
                    // Put all controls in a single column with width 100%
                    columns: 1,
                    items: [
                        {boxLabel: 'Item 1', name: 'cb-col-1'},
                        {boxLabel: 'Item 2', name: 'cb-col-2', checked: true},
                        {boxLabel: 'Item 3', name: 'cb-col-3'}
                    ]
        Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
        9