MODx.Window и ItemSelector [решено]
UPD
я извиняюсь, перед теми, кому вдруг было интересно (ну, мало ли), что задержался, замоталси, но проблема была в том, что в ItemSelector предполагается, что reset происходит полсе события рендер и там используются this.toMultiselect, this.hiddenField, которые задаются в онРендер. А я зациклился на модхсовой части. А там в общем ресет вызывается до рендеренга…
/-----------------------------------------------------/
Доброго времени. В примерах к extjs есть кастомный компонент ItemSelector.
Выглядит вот так
Вроде бы он наследует от Ext.form.Field и может быть значит указан в форме, если подключить необходимые скрипты ( ItemSelector.js и MultiSelect.js ). И вот какая история, не работает с окошками модх. А в таком виде виджит прекрасно работает
Если воткнуть куда-нибудь сюда в панель к home.panel.js — все ок.
Но если мы пытаемся добавить его к окошку для редактирования грида, то все ломается. Я здесь для примера вставил сперва multiselect, он по-меньше потом itemselector. Да конечно, надо как-то разруливать историю с разными store, но проблема в том, что компонент не хочет просто создватаься, у нег не срабатывают важные события и не вызываются важные функции onRender, afterRender. И нету this.el, который используется там кое-где, иначе бы я просто вынес onRender в функцию initComponent.
Так в принципе показывается, хотя и не работает, но думаю, костыли навтыкаю — полетит. Но почему же не работает? Стандартный алгоритм в примере кода такой
1 создаем var msForm = new Ext.form.FormPanel
2 вставляем в его item xtype: 'multiselect' или xtype: 'itemselector'
3 профит.
А в модх мы передаем те же item в параметре fields, оно попадает в функцию MODx.Window _loadForm, в которой наши fields попадают в item и это все скармливается в виде конфига createForm
Получившаяся панель добавляется в this.fp и вызывается renderForm
1 создал конфиг с items из fields
2 отправил это все в функцию, где конфиг расширился и создал с помощью его Ext.FormPanel
в есть строчка ext-all-debug.js
3 добавил в окно с помощью .add(this.fp);.
Т.е. практически то же самое. Ну, форма не рендерется сразу, а добавляется через add, но я же делаю то же самое практически, почему когда в updateItem создаешь new Ext.form.FormPanel и добавляешь его же через w.add(fp); это работает, а когда отправляешь в xtype: 'itemselector', оно улетает в createForm в виде конфига — события типа onRender не происходят, this.el нету, вызываются кучи ошибок типа того-то, что устанавливалась в onRender андефайнид, сего-то андефайнид и console.log в onRender не включается? И собственно, главный вопрос, это что изменить, чтобы это работало все-таки как обычные модхсовские фэйлиды? Или это слижком сложные компоненты? Ну, я разбирусь потом со стореджами, как-нибудь это разрулю, но они же просто отказываются запускаться в окошках?
я извиняюсь, перед теми, кому вдруг было интересно (ну, мало ли), что задержался, замоталси, но проблема была в том, что в ItemSelector предполагается, что reset происходит полсе события рендер и там используются this.toMultiselect, this.hiddenField, которые задаются в онРендер. А я зациклился на модхсовой части. А там в общем ресет вызывается до рендеренга…
/-----------------------------------------------------/
Доброго времени. В примерах к extjs есть кастомный компонент ItemSelector.
Выглядит вот так
Вроде бы он наследует от Ext.form.Field и может быть значит указан в форме, если подключить необходимые скрипты ( ItemSelector.js и MultiSelect.js ). И вот какая история, не работает с окошками модх. А в таком виде виджит прекрасно работает
Ext.onReady(function() {
var fp = new Ext.form.FormPanel({items: [
{
xtype: 'itemselector',
name: 'itemselector',
fieldLabel: 'ItemSelector',
imagePath: '../ux/images/',
multiselects: [{
width: 250,
height: 200,
store: new Ext.data.ArrayStore({
data: [
[123,'One Hundred Twenty Three'],['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five'],
],
fields: ['value','text'],
sortInfo: {
field: 'value',
direction: 'ASC'
}
}),
displayField: 'text',
valueField: 'value'
},{
width: 250,
height: 200,
store: [['10','Ten']],
tbar:[{
text: 'clear',
handler:function(){
isForm.getForm().findField('itemselector').reset();
}
}]
}]
}
]});
var w = new Ext.Window({
width:700,
hight:700,
layout: 'form',
title: 'test',
items: fp
});
w.add(fp);
w.show();
});
Теперь пробуем вставить это в стандартный компонент модх.Если воткнуть куда-нибудь сюда в панель к home.panel.js — все ок.
Но если мы пытаемся добавить его к окошку для редактирования грида, то все ломается. Я здесь для примера вставил сперва multiselect, он по-меньше потом itemselector. Да конечно, надо как-то разруливать историю с разными store, но проблема в том, что компонент не хочет просто создватаься, у нег не срабатывают важные события и не вызываются важные функции onRender, afterRender. И нету this.el, который используется там кое-где, иначе бы я просто вынес onRender в функцию initComponent.
Ext.extend(modExtra.window.CreateItem, MODx.Window, {
getFields: function (config) {
return [{
xtype: 'textfield',
fieldLabel: _('modextra_item_name'),
name: 'name',
id: config.id + '-name',
anchor: '99%',
allowBlank: false,
},
{
xtype: 'multiselect',
fieldLabel: 'Multiselect<br />(Required)',
name: 'multiselect',
width: 250,
height: 200,
allowBlank:false,
store: [[123,'One Hundred Twenty Three'],
['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five'],
['6', 'Six'], ['7', 'Seven'], ['8', 'Eight'], ['9', 'Nine']],
tbar:[{
text: 'clear',
handler: function(){
msForm.getForm().findField('multiselect').reset();
}
}],
ddReorder: true
},
{
xtype: 'itemselector',
name: 'itemselector',
fieldLabel: 'ItemSelector',
imagePath: '../ux/images/',
multiselects: [{
width: 250,
height: 200,
store: new Ext.data.ArrayStore({
data: [
[123,'One Hundred Twenty Three'],['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five'],
],
fields: ['value','text'],
sortInfo: {
field: 'value',
direction: 'ASC'
}
}),
displayField: 'text',
valueField: 'value'
},{
width: 250,
height: 200,
store: [['10','Ten']],
tbar:[{
text: 'clear',
handler:function(){
isForm.getForm().findField('itemselector').reset();
}
}]
}]
}
]}
];
},
В принципе, виджит показывается, если создать его непосредственно перед вызовом окна (это функция modExtra updateItem) w.reset();
w.setValues(r.object);
var config = this.config;
var fp = new Ext.form.FormPanel({items: [
{
xtype: 'itemselector',
fieldLabel: 'Выбираем город',
imagePath:'/assets/js/extjs-3.4.1.1/examples/ux/images/',
multiselects: [{
width: 250,
height: 200,
store: [
[123,'One Hundred Twenty Three'],['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five']
],
displayField: 'text',
valueField: 'value'
},{
width: 250,
height: 200,
store: [['10','Ten']],
name: 'city1',
id: config.id + '-city1',
tbar:[{
text: 'clear',
handler:function(){
isForm.getForm().findField('itemselector').reset();
}
}]
}]
}
]});
w.add(fp);
w.show();
w.show(e.target);
Так в принципе показывается, хотя и не работает, но думаю, костыли навтыкаю — полетит. Но почему же не работает? Стандартный алгоритм в примере кода такой
1 создаем var msForm = new Ext.form.FormPanel
2 вставляем в его item xtype: 'multiselect' или xtype: 'itemselector'
3 профит.
А в модх мы передаем те же item в параметре fields, оно попадает в функцию MODx.Window _loadForm, в которой наши fields попадают в item и это все скармливается в виде конфига createForm
this.fp = this.createForm({
url: this.config.url
,baseParams: this.config.baseParams || { action: this.config.action || '' }
,items: this.config.fields || []
});
А собственно, в функции происходит расширение конфига и создание собственно нашей Ext.FormPanelПолучившаяся панель добавляется в this.fp и вызывается renderForm
,renderForm: function() {
this.add(this.fp);
}
т.е. другими словами цепочка1 создал конфиг с items из fields
2 отправил это все в функцию, где конфиг расширился и создал с помощью его Ext.FormPanel
в есть строчка ext-all-debug.js
Ext.reg('form', Ext.FormPanel);
Ext.form.FormPanel = Ext.FormPanel;
Ext.form.FieldSet = Ext.extend(Ext.Panel, {
, так что все один в один.3 добавил в окно с помощью .add(this.fp);.
Т.е. практически то же самое. Ну, форма не рендерется сразу, а добавляется через add, но я же делаю то же самое практически, почему когда в updateItem создаешь new Ext.form.FormPanel и добавляешь его же через w.add(fp); это работает, а когда отправляешь в xtype: 'itemselector', оно улетает в createForm в виде конфига — события типа onRender не происходят, this.el нету, вызываются кучи ошибок типа того-то, что устанавливалась в onRender андефайнид, сего-то андефайнид и console.log в onRender не включается? И собственно, главный вопрос, это что изменить, чтобы это работало все-таки как обычные модхсовские фэйлиды? Или это слижком сложные компоненты? Ну, я разбирусь потом со стореджами, как-нибудь это разрулю, но они же просто отказываются запускаться в окошках?