Заполнение ExtJS combobox с JSON

Question

Я использую ExtJS (3) и просто пытаюсь заполнить combobox/drop down, используя записи из базы данных, которые запрашиваются с помощью JSON.

Вот мой JSON вызов:

var projectDropDown = new Ext.data.Store({ 
    autoLoad: true, 
    url: 'dropdown.json', 
    storeId: 'projectDropDown', 
    idProperty: 'ProjectID', 
    fields: [ 'ProjectID', 'ProjectName' ] 
}); 

И тогда мой выпадающий код:

{ 
    xtype: 'combo', 
    id: 'ProjectName', 
    fieldLabel: 'Project Name', 
    valueField: 'ProjectID', 
    displayField: 'ProjectName', 
    store: projectDropDown, 
    typeAhead: true, 
    mode: 'local', 
    triggerAction: 'all', 
    emptyText:'Select a Project...', 
    selectOnFocus:true 
} 

JSON возвращается мои данные, как это:

[ 
    { 
     "ProjectID":"1", 
     "ProjectName":"Mike's Test Project" 
    }, 
    { 
     "ProjectID":"2", 
     "ProjectName":"My Second Test Project" 
    }, 
    { 
     "ProjectID":"3", 
     "ProjectName":"My Third Project" 
    }, 
    { 
     "ProjectID":"6", 
     "ProjectName":"More testing from me" 
    } 
] 

Я думаю, что я близко, я просто не вижу, чего мне не хватает, чтобы установить соединение.

Спасибо за любую помощь.

Answer 1

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

Мое предположение заключается в том, что вам нужно приложить ваш JSON, который возвращается в какой-то корневой объект. Попробуйте дать ваш магазин JSONReader с root элемента, указанного следующим образом:

var projectDropDown = new Ext.data.Store({ 
    autoLoad: true, 
    url: 'dropdown.json', 
    storeId: 'projectDropDown', 
    reader: new Ext.data.JsonReader(
    { 
     root: 'projects' 
    }), 
    idProperty: 'ProjectID', 
    fields: [ 'ProjectID', 'ProjectName' ] 
}); 

Затем измените JSON вернулся посмотреть, как это вместо того, чтобы

{ 
    "projects" : [ 
     {"ProjectID":"1","ProjectName":"Mike's Test Project"}, 
     {"ProjectID":"2","ProjectName":"My Second Test Project"}, 
     .... 
    ] 
}