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

3 910

Поблагодарить автора Отправить деньги

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

Павел Гвоздь

23 декабря 2015, 23:52

Нашёл различные расширения для CheckboxGroup, которые вроде как должны уметь подгружать данные с сервера (тут, тут, тут, тут), но не удалось ни один из них заюзать, где-то непонятно ничего, где-то ошибки сплошные вываливает. Может можно на том примере, что я привёл выше что-то сделать? Всю доку уже перечитал раз 5 по Ext.form.CheckboxGroup, и просто Ext.form.Checkbox, и Ext.form.MixedCollection. Но ничего для решения этой задачи не нашёл.

Сергей Шлоков

24 декабря 2015, 07:20

Когда в контейнер добавляешь элемент, его нужно перерисовывать

container.doLayout();

Павел Гвоздь

24 декабря 2015, 08:11

А я там чёт не могу найти у себя Ext.Container. Вообще у меня это всё дело в MODx.Window происходит.
Пробовал и так:

Ext.getCmp('mycomponent-window-create').doLayout()

и так:

Ext.getCmp('mycomponent-tab-1').doLayout()

и так:

checkbox.doLayout()

Всё одно — не перерисовывает ничего.

Сергей Шлоков

24 декабря 2015, 09:57

Как-то мудрёно ты добавляешь чекбокс. Попробуй так

checkbox.items.push({boxLabel: row.data.pagetitle, name: 'products['+row.data.id+']', value: row.data.id, checked: true});
checkbox.doLayout();

Павел Гвоздь

24 декабря 2015, 10:18

Нет, так он ошибку вываливает. У меня 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

Странно, у тебя написано

id:'mycomponent-checkbox-product-group',
xtype: 'checkboxgroup',...

Павел Гвоздь

24 декабря 2015, 10:45

Извини, не совсем понимаю, что ты имел ввиду?

Павел Гвоздь

24 декабря 2015, 18:12

Удалось реализовать! Как оказалось, у CheckboxGroup, есть CheckboxGroup.panel.doLayout();, вот когда его запускаем — он нам перерисовывает. Спасибо за помощь, Сергей!

Андрей

26 марта 2018, 14:42

Павел, подскажите, как сделать — пытаюсь вывести в окне компонента в виде 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'}
            ]

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