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

时间:2017-05-10 03:37:16

标签: json extjs combobox populate

 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为空,没有任何内容被加载,我搜索了很多网站,找不到任何帮助。任何建议都会很棒

2 个答案:

答案 0 :(得分:0)

您查找的xtypecombostore类型为JsonStore,因为ArrayStore不会解释json正如您所料,types root。我不能在这里模拟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" />

答案 1 :(得分:0)

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

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

如果仍然不能正常工作,Tejas1991指出检查你的json的内容。