Поле со списком extjs не привязано к хранилищу массива - PullRequest
Новая
       2

Поле со списком extjs не привязано к хранилищу массива

0 голосов
/ 12 января 2012

Используя пример в "ext-designer-for-ext-js-4-users-guide.pdf", я собрал следующее. Проблема в том, что магазин не является обязательным. т.е. выбор пуст.

MyComboBox.js 

Ext.define('MyApp.view.MyComboBox', {
    extend: 'MyApp.view.ui.MyComboBox',

    initComponent: function() {
        var me = this;
        me.callParent(arguments);
    }
});

Ext.define('MyApp.view.ui.MyComboBox', {
    extend: 'Ext.form.field.ComboBox',

    fieldLabel: 'comboList',
    displayField: 'comboList',
    queryMode: 'local',
    store: 'MyArrayStore',
    triggerAction: 'all',
    valueField: 'comboList',

    initComponent: function() {
        var me = this;

        me.callParent(arguments);
    }
});

магазин / MyArrayStore.js 

  Ext.define('MyApp.store.MyArrayStore', {
    extend: 'Ext.data.Store',

    constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            autoLoad: true,
            storeId: 'MyArrayStore',
            data: [
                [
                    'Search Engine'
                ],
                [
                    'Online Ad'
                ],
                [
                    'Facebook'
                ]
            ],
            proxy: {
                type: 'ajax',
                reader: {
                    type: 'array'
                }
            },
            fields: [
                {
                    name: 'comboList'
                }
            ]
        }, cfg)]);
    }
});

** Обновление **

это сводило меня с ума. Это [turns out][1] мой массив должен быть в формате JSON. Когда я обновил его до

[{"comboList": "Hello"}, {"comboList": "Hi"}, {"comboList": "GoodMorning"}]

это сработало.

1 Ответ

1 голос
/ 13 января 2012

Я начал пытаться отделить вашу реализацию, но она выглядит несколько запутанной, начиная с хранилища, в котором есть локальные данные и прокси, но без URL-адреса прокси.

Казалось, проще просто дать вам упрощенную реализацию комбинированного списка (используя локальные данные, потому что кажется, что вы пытаетесь это сделать): 

// the datastore
var myStore = Ext.create('Ext.data.Store', {
    fields: ['value', 'name'],
    data: [
        {value: 1, name: 'Search Engine'},
        {value: 2, name: 'Online Ad'},
        {value: 3, name: 'Facebook'}
    ]
});    

// a window to hold the combobox inside of a form 
myWindow = Ext.create('Ext.Window', {
    title: 'A Simple Window',
    width: 300,
    constrain: true,
    modal: true,
    layout: 'fit',
    items: [{
        // the form to hold the combobox
        xtype: 'form',
        border: false,
        fieldDefaults: {
            labelWidth: 75
        },
        bodyPadding: '15 10 10 10',
        items: [{
            // the combobox
            xtype: 'combo',
            id: 'myCombo',
            fieldLabel: 'Title',
            valueField: 'value',
            displayField: 'name',
            store: myStore,
            queryMode: 'local',
            typeAhead: true,
            forceSelection: true,
            allowBlank: false,
            anchor: '100%'
        },{
            // shows the selected value when pressed
            xtype: 'button',
            margin: '10 0 0 100',
            text: 'OK',
            handler: function() {
                alert('Name: ' + Ext.getCmp('myCombo').getRawValue() + 
                      '\nValue: ' + Ext.getCmp('myCombo').value);
            }
        }]
    }]
});
// show the window
myWindow.show();

Это создает комбинированный список внутри небольшого окна сКнопка ОККогда вы нажимаете OK, он предупреждает видимый текст в поле со списком Ext.getCmp('myCombo').getRawValue() и значение элемента в поле со списком Ext.getCmp('myCombo').value.

Если вы уроните это в своем проекте, вы сможете получить представление о том, как онореализует, он должен просто бежать.

Если вы действительно хотите удаленное хранилище данных (например, из веб-службы, которая возвращает json), вам просто нужно изменить конфигурацию хранилища данных следующим образом: 

var myRemoteStore = Ext.create('Ext.data.Store', {
    fields: ['value', 'name'],
    proxy: {
        type: 'ajax', 
        url: 'myWebservice.php', // whatever your webservice path is
        reader: 'json',
    },
    autoLoad:true  
});
...