使用 JSON 文件填充组合框，ExtJs 4.x.x答案

【问题标题】：Populate Combo box with JSON file, ExtJs 4.x.x使用 JSON 文件填充组合框，ExtJs 4.x.x
【发布时间】：2017-10-08 13:18:53
【问题描述】：

 Ext.define('Form', {
    extend: 'Ext.data.Model',
    fields: [
        {name:'type', type:'String'}
    ]
});

var store = Ext.create('Ext.data.ArrayStore', {
    model: 'Form',
    autoLoad: true,
    proxy: {

        type: 'ajax',
        url: '/test.json',
        reader: {
            type : 'json',
            root: 'types'
        }
    }
});

Ext.define('DForms', {
    extend: 'Ext.panel.Panel',
    bodyPadding: 12,
    layout : 'auto',
    autoScroll : true,

        items: [{
            xtype:'selectcombo',
            queryMode:'local',
            emptyText: 'Select Condition',
            store:store,
            displayField: 'type',
            valueField: 'type',
            width : 200,
            typeAhead : true
        }],
});

加载时，selectcombo 为空，没有加载任何内容，我搜索了许多站点，但找不到任何帮助。任何建议都会很棒

【问题讨论】：

给出json文件内容，有助于发现问题

标签： json extjs combobox populate

【解决方案1】：

您查找的xtype 是combo，store 类型是JsonStore，因为ArrayStore 不会像您预期的那样解释来自types 根的json。不过这里我无法模拟ajax 请求。

Ext.onReady(function() {

  Ext.define('Form', {
    extend: 'Ext.data.Model',
    fields: [{
      name: 'type',
      type: 'String'
    }]
  });

  var store = Ext.create('Ext.data.Store', {
    model: 'Form',
    data: [{
      type: 'Aaaaaaa'
    }, {
      type: 'Bbbbbb'
    }, {
      type: 'Ccccccccccc'
    }, {
      type: 'Ddddddd'
    }]

  });

  Ext.define('DForms', {
    extend: 'Ext.panel.Panel',
    bodyPadding: 12,
    layout: 'auto',
    autoScroll: true,
    items: [{
      xtype: 'combo',
      queryMode: 'local',
      emptyText: 'Select Condition',
      store: store,
      displayField: 'type',
      valueField: 'type',
      width: 200,
      typeAhead: true
    }],
  });

  Ext.create('DForms', {
    renderTo: Ext.getBody()
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/ext-all-debug.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/resources/css/ext-all.css" />

【讨论】：

它不让我

【解决方案2】：

我认为字段中的类型是区分大小写的。所以试试

fields :[{name : 'type', type : 'string'}]

如果仍然无法正常工作，正如 Tejas1991 指出的，请检查 json 的内容。

【讨论】：

是的，结合你的和 bluehipy，它起作用了 :)