ExtJS и динамически обновляемый CheckboxGroup
Здравствуйте!
Надо сделать динамически обновляемый Ext.form.CheckboxGroup, а он к сожалению не принимает параметр store… Я пытаюсь сделать так:
1) Первым делом объявил свой кастомный CheckboxGroup:
2) Слушаю в кастомном combobox-е событие select:
Но вот незадача! Если следом вывести прописать console.log(checkbox.items), то свежедобавленный пункт мы увидим, а вот в форме (рядом с уже имеющимися чекбоксами) не появляется. Как можно добавить его и для зрительного восприятия?)
Надо сделать динамически обновляемый 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), то свежедобавленный пункт мы увидим, а вот в форме (рядом с уже имеющимися чекбоксами) не появляется. Как можно добавить его и для зрительного восприятия?)
Поблагодарить автора
Отправить деньги
Комментарии: 9
Нашёл различные расширения для CheckboxGroup, которые вроде как должны уметь подгружать данные с сервера (тут, тут, тут, тут), но не удалось ни один из них заюзать, где-то непонятно ничего, где-то ошибки сплошные вываливает. Может можно на том примере, что я привёл выше что-то сделать? Всю доку уже перечитал раз 5 по Ext.form.CheckboxGroup, и просто Ext.form.Checkbox, и Ext.form.MixedCollection. Но ничего для решения этой задачи не нашёл.
Когда в контейнер добавляешь элемент, его нужно перерисовывать
container.doLayout();
А я там чёт не могу найти у себя Ext.Container. Вообще у меня это всё дело в MODx.Window происходит.
Пробовал и так:
Всё одно — не перерисовывает ничего.
Пробовал и так:
Ext.getCmp('mycomponent-window-create').doLayout()
и так:Ext.getCmp('mycomponent-tab-1').doLayout()
и так:checkbox.doLayout()
Всё одно — не перерисовывает ничего.
Как-то мудрёно ты добавляешь чекбокс. Попробуй так
checkbox.items.push({boxLabel: row.data.pagetitle, name: 'products['+row.data.id+']', value: row.data.id, checked: true});
checkbox.doLayout();
Нет, так он ошибку вываливает. У меня checkbox.items — это MixedCollection. И туда просто пушнув что-нибудь — ошибка:
Да и после, при выполнении checkbox.doLayout(); также ничего не происходит.
А вот когда я делаю так, как у меня в посте выше checkbox.items.addAll([new Ext.form.Checkbox({...})]);, то всё норм с типами… у всех «S»… Вот только также ничего не происходит с отображением чекбоксов. :(
Uncaught TypeError: checkbox.items.push is not a functionНо можно пушнуть переписав вот так checkbox.items.items.push({...}), но и так получается вот такой бред:
Да и после, при выполнении checkbox.doLayout(); также ничего не происходит.
А вот когда я делаю так, как у меня в посте выше checkbox.items.addAll([new Ext.form.Checkbox({...})]);, то всё норм с типами… у всех «S»… Вот только также ничего не происходит с отображением чекбоксов. :(
Странно, у тебя написано
id:'mycomponent-checkbox-product-group',
xtype: 'checkboxgroup',...
Извини, не совсем понимаю, что ты имел ввиду?
Удалось реализовать! Как оказалось, у CheckboxGroup, есть CheckboxGroup.panel.doLayout();, вот когда его запускаем — он нам перерисовывает. Спасибо за помощь, Сергей!
Павел, подскажите, как сделать — пытаюсь вывести в окне компонента в виде 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'}
]
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.