динамически загружать данные JSON в поле со списком, используя Extjs3 - PullRequest
Новая
       25

динамически загружать данные JSON в поле со списком, используя Extjs3

0 голосов
/ 12 февраля 2019

Помощь с любой частью этого приветствуется.Я совершенно новичок в использовании extjs и версия старая (3.3).Когда пользователь выбирает поле со списком, данные загружаются в поле со списком.Мне нужно разрешить пользователю выбирать / вставлять пустой параметр (т. Е. Первый параметр должен быть id:0 поле и может быть пустым).Наконец, я должен дать модели дополнительное поле: id.

Я вижу данные, возвращаемые на вкладке сети, поэтому у меня правильный URL-адрес (URL-адрес был настроен для возврата id и list name), но свойство store пусто,поэтому нет данных в поле со списком.

header: 'Bucket List',
sortable: true,
dataIndex: 'bucket_list',
width: 10,
align: 'center',
editor: BucketList = new Ext.form.ComboBox({
        valueField: 'name',
        displayField: 'name',
        triggerAction: 'all',
        typeAhead: true,
        preventMark: true,
        editable: false,
        store: new Ext.data.Store({
               proxy: new Ext.data.HttpProxy({
                      url: '/todos/sysadmin/bucket-lists',
                      method: 'GET'
               }),
               reader: new Ext.data.JsonReader({
                       root: 'bucket_lists',
                       fields: [
                           'id',
                           'name'
                        ]
               }),
               listeners: {
                       beforeload: function (data_objStore, data_objOpt) {
                             data_objOpt.params.userModel = userModelCbx.getValue();                                          
                             data_objOpt.params.user_id = 001;
                       }
                 }
       }),
       listeners: {
           blur: function () { }
       }
}),

Ниже код показывает ответ, но при индексе 0 id равен 1. Мне нужен индекс 0, чтобы быть id: 0 или нулевым значением (0: {id: 0, name: ''})

ОТВЕТ: 

0: {
id: 1, 
name: "bucketListItem_1"
}
1: {
id: 2, 
name: "bucketListItem_2"
}
2: {
id: 3, 
name: "bucketListItem_3"
}
3: {
id: 4, 
name: "bucketListItem_4"
}

Я прочитал много документов и ответов здесь, на SO.Я пытался использовать некоторые методы магазина, такие как add(), insert(), load(), но, вероятно, я использую их в неправильных местах или что-то в этом роде.Я спрашиваю здесь, потому что я застрял, и я действительно надеюсь, что кто-то поможет мне.Благодарю.

ОБНОВЛЕНИЕ : после beforeload, добавьте это к store слушателям, чтобы вставить пустую запись.Убедитесь, что ваш читатель обращается к нужным полям 

beforeload: function( sObj, optObjs ){
     // code here...
},    
load: function(store, records) {                                           
        store.insert(0, [new Ext.data.Record({
              id: null,
              name: 'None'
              })
        ]);
    }

Ответ : 

0: {
id: null, 
name: "None"
}
1: {
id: 1, 
name: "bucketListItem_1"
}
2: {
id: 2, 
name: "bucketListItem_2"
}
...

1 Ответ

0 голосов
/ 12 февраля 2019

Вы можете попробовать следующий рабочий пример.Вам нужно вставить запись в load прослушиватель магазина, используя new Ext.data.Record.Также отметьте опцию tpl config - это необходимо для правильного отображения пустой записи.Пример протестирован с ExtJS 3.4, но я думаю, что он должен работать и с вашей версией. 

Ext.onReady(function() {
    var combo = new Ext.form.ComboBox({
        tpl : '<tpl for="."><div class="x-combo-list-item">{name}&nbsp;</div></tpl>',
        valueField: 'name',
        displayField: 'name',
        triggerAction: 'all',
        typeAhead: true,
        preventMark: true,
        editable: false,
        store: new Ext.data.Store({
            proxy: new Ext.data.HttpProxy({
                url: '/todos/sysadmin/bucket-lists',
                method: 'GET'
            }),
            reader: new Ext.data.JsonReader({
                root: 'bucket_lists',
                fields: [
                    'id',
                    'name'
                ]
            }),
            listeners: {
                load: function (s) {
                    record = new Ext.data.Record({
                        id: 0,
                        name: ''
                    });
                    s.insert(0, record);
                }
            }
        })
    });

    var grid = new Ext.grid.EditorGridPanel({
        renderTo: Ext.getBody(),
        store: new Ext.data.Store({
            autoLoad: true,
            proxy: new Ext.data.HttpProxy({
                url: 'combo-extjs3-editor-json.html',
                method: 'GET'
            }),
            reader: new Ext.data.JsonReader({
                root: 'bucket_lists',
                fields: [
                    'id',
                    'name'
                ]
            })
        }),
        width: 600,
        height: 300,
        columns: [
            {
            header: 'Name',
            dataIndex: 'name',
            width: 130,
            editor: combo
            }
        ]
    }); 
});
...