Ext.view.MultiSelector

[kolka]

Всем привет.

Пользовался ли кто этим компонентом - Ext.view.MultiSelector

Опять же разбираясь на примере из kitchensink породил своё.. но есть ошибки с которыми по незнанию опять же не могу справиться..

Мой пример
Проблема:
При выборе справа (нажать на плюсик) выпадаем нужный список.. но как только выбираешь элемент - ошибка в консоли и интерфейс "теряется"..

Кто поможет ?

[novikov]

проблема связана с настройкой layout.

layout: {
            type: 'hbox',
            align: 'stretch'
        },

В таком виде проблема не проявляется:

Ext.define("Ext.locale.ru.view.MultiSelectorSearch", {
    override: 'Ext.view.MultiSelectorSearch',
    searchText: 'Поиск...'
});

Ext.define("Ext.locale.ru.view.MultiSelector", {
    override: 'Ext.view.MultiSelector',
    emptyText: 'Нет элементов',
    removeRowTip: 'Удалить эту позицию',
    addToolText: 'Поиск элементов для добавления'
});

Ext.define('FiresAPP.model.Group', {
    extend: 'Ext.data.Model',
    idProperty: 'id',
    fields: [{
        name: 'id',
        type: 'int'
    }, {
        name: 'name',
        type: 'string'
    }, {
        name: 'descr',
        type: 'string'
    }],
    schema: {
        namespace: 'FiresAPP.model',
        proxy: {
            type: 'ajax',
            pageParam: false,
            startParam: false,
            limitParam: false,
            noCache: false,
            url: 'data.js',
            reader: {
                type: 'json',
                rootProperty: 'data'
            }
        }
    }
});


Ext.define('FiresAPP.view.GroupForm', {
    extend: 'Ext.window.Window',

    alias: 'widget.group-form',

    requires: [
        'FiresAPP.model.Group', 
        'Ext.view.MultiSelector'
    ],

    layout: {
        type: 'fit'
    },

    title: 'Добавить группу',
    closable: false,
    modal: true,
    resizable: false,
    autoShow: true,

    items: [{
        xtype: 'form',
        items: [{
            xtype: 'fieldset',
            title: 'Доступ к меню',
            layout: 'anchor',
            defaults: {
                anchor: '100%'
            },

            items: [{
                xtype: 'multiselector',
                title: 'Элементы меню',

                fieldName: 'name',

                viewConfig: {
                    deferEmptyText: false,
                    emptyText: 'Нет пунктов меню'
                },

                search: {
                    field: 'name',
                    store: {
                        model: 'FiresAPP.model.Group',
                        sorters: 'name'
                    }
                }
            }]
        }]
    }]
});



Ext.application({
    name: 'FiresAPP',
    launch: function() {
        Ext.widget('group-form');
    }
});

[kolka]

Вот это да..
novikov,
Большое спасибо за помощь.

[kolka]

novikov,
Можете подсказать, а каким образом значения выбранные в multiselector можно передать на сервер для сохранения ?

Свой пример обновил.. работает..

[novikov]

могу только предположить... Можно попробовать использовать getStore(). Затем выполнить синхронизацию хранилища, позаботившись предварительно о соответствующих настройках прокси. Либо обойти все записи и собрать их ID при помощи each() и отправить их на сервер через Ext.Ajax.request().

пример

Ext.define("Ext.locale.ru.view.MultiSelectorSearch", {
    override: 'Ext.view.MultiSelectorSearch',
    searchText: 'Поиск...'
});

Ext.define("Ext.locale.ru.view.MultiSelector", {
    override: 'Ext.view.MultiSelector',
    emptyText: 'Нет элементов',
    removeRowTip: 'Удалить эту позицию',
    addToolText: 'Поиск элементов для добавления'
});

Ext.define('FiresAPP.model.Group', {
    extend: 'Ext.data.Model',
    idProperty: 'id',
    fields: [{
        name: 'id',
        type: 'int'
    }, {
        name: 'name',
        type: 'string'
    }, {
        name: 'descr',
        type: 'string'
    }],
    schema: {
        namespace: 'FiresAPP.model',
        proxy: {
            type: 'ajax',
            pageParam: false,
            startParam: false,
            limitParam: false,
            noCache: false,
            url: 'data.js',
            reader: {
                type: 'json',
                rootProperty: 'data'
            }
        }
    }
});


Ext.define('FiresAPP.view.GroupForm', {
    extend: 'Ext.window.Window',
    alias: 'widget.group-form',

    requires: ['FiresAPP.model.Group', 'Ext.view.MultiSelector'],

    layout: {
        type: 'fit'
    },

    title: 'Добавить группу',
    closable: false,
    modal: true,
    resizable: false,
    autoShow: true,

    items: [{
        xtype: 'form',
        reference: 'groupform',
        bodyPadding: 5,
        layout: 'column',
        width: 500,
        items: [{
            xtype: 'fieldset',
            columnWidth: 0.6,
            style: {
                margin: '5px'
            },
            title: 'Информация группы',
            layout: 'anchor',
            defaults: {
                anchor: '100%',
                xtype: 'textfield',
                msgTarget: 'side',
                labelWidth: 115
            },
            items: [{
                xtype: 'hiddenfield',
                name: 'id',
                fieldLabel: 'Label',
                reference: 'id'
            }, {
                fieldLabel: 'Название группы',
                name: 'name',
                reference: 'name'
            }, {
                fieldLabel: 'Описание группы',
                xtype: 'textareafield',
                grow: true,
                name: 'descr',
                reference: 'descr'
            }]
        }, {
            xtype: 'fieldset',
            columnWidth: 0.4,
            style: {
                margin: '5px'
            },
            minHeight: 100,
            title: 'Доступ к меню',
            layout: 'anchor',
            defaults: {
                anchor: '100%'
            },

            items: [{
                xtype: 'multiselector',
                title: 'Элементы меню',
                fieldName: 'name',
                store: {
                    model: 'FiresAPP.model.Group'
                },
                viewConfig: {
                    deferEmptyText: false,
                    emptyText: 'Нет пунктов меню'
                },
                search: {
                    field: 'name',
                    store: {
                        model: 'FiresAPP.model.Group',
                        sorters: 'name'
                    }
                }
            }]
        }]
    }],
    dockedItems: [{
        xtype: 'toolbar',
        dock: 'bottom',
        ui: 'footer',
        layout: {
            pack: 'end',
            type: 'hbox'
        },
        items: [{
            xtype: 'button',
            text: 'Сохранить',
            handler: function(button) { // <-- ЗДЕСЬ!!!
                var form = button.up('group-form');
                var multiselector = form.down('multiselector');
                var store = multiselector.getStore();
                var ids = [];
                store.each(function(record) {
                    ids.push(record.get('id'));
                }, this);
                Ext.Ajax.request({
                    url: 'myServerScript.php',
                    scope: this,
                    jsonData: {
                        ids: ids
                    },
                    success: function(response) {
                        
                    }
                });
            }
        }, {
            xtype: 'button',
            text: 'Отмена'
        }]
    }]
});



Ext.application({
    name: 'FiresAPP',
    launch: function() {
        Ext.widget('group-form');
    }
});

[kolka]

novikov,
Спасибо за идею. Буду делать.