MODx.Window и ItemSelector [решено]

UPD
я извиняюсь, перед теми, кому вдруг было интересно (ну, мало ли), что задержался, замоталси, но проблема была в том, что в 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 не включается? И собственно, главный вопрос, это что изменить, чтобы это работало все-таки как обычные модхсовские фэйлиды? Или это слижком сложные компоненты? Ну, я разбирусь потом со стореджами, как-нибудь это разрулю, но они же просто отказываются запускаться в окошках?
Антон Соловьёв
26 июня 2016, 12:56
modx.pro
1 639
0

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

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