Ext.data.JsonStore 数据集使用

最新推荐文章于 2021-08-06 00:45:03 发布

weixin_30699235

最新推荐文章于 2021-08-06 00:45:03 发布

阅读量143

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wangdetian168/archive/2011/04/02/Ext-data-JsonStore.html

本文介绍了一个使用ExtJS框架中的JsonStore组件的具体示例。该示例展示了如何配置JsonStore来解析JSON数据，并通过ComboBox展示数据。具体包括了数据结构定义、自动加载设置及字段映射等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

///
var store12=new Ext.data.JsonStore({

    //results 表示结果数
    //rows 表示从后台传过来的JSON数据
    data:{ "results": 2, "rows":[
        {"id":1, "city": "suzhou", "areacode": "0512", "perincome": "2500" },
        {"id":2, "city": "nanjing", "areacode": "025", "perincome": "2200" }]},

       //自动加载(不能用store.load())
    autoLoad:true,
    totalProperty:"results",

root:"rows",

fields:[{name:'city',mapping:'city'},

{name:'areacode',type:'int'},

{name:'perincome',mapping:'perincome',type:'int'},

{name:'id',mapping:'id',type:'int'}

]

});

var bottomSearch12 = new Ext.form.ComboBox({
      fieldLabel: 'Country Code',
      name: 'country_code',
      forceSelection: true,
      listWidth: 200,
      store: store12,
      valueField: 'areacode',
      displayField: 'city',
      typeAhead: true,
      mode: 'local',
      triggerAction: 'all',
      selectOnFocus: true, //用户不能自己输入,只能选择列表中有的记录
      allowBlank: false,
      listeners: {
          select: function() {
              alert(this.value);
          }
      }

})