Extjs combox的详解

Extjs combox的详解

写了哈extjs当中的combox,第一次写,照着网上的例子抄.在上次的例子中,是实现了,可是有一个重大的错误.也就是自己根本没有理解combox从远程服务器获取数据，和本地获取数据有什么不同...所以上次的例子中,运行起来好久得不到数据...

本地获取数据:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

Ext.onReady(function () {               var store = new Ext.data.Store({                   proxy: new Ext.data.HttpProxy({ url: "./Admin/Data/ComBoxData.ashx" }),                   reader: new Ext.data.JsonReader({ totalProperty: "totalProperty", root: "result", fields: [{ name: 'Id' }, { name: 'Text'}] })               });                                   store.load();               var cb = new Ext.form.ComboBox({                   id: "cbText",                   store: store,                   loadingText: 'loading...',                   emptyText: "--请选择--",                   triggerAction: "all",//请设置为"all",否则默认为"query"的情况下，你选择某个值后，再此下拉时，只出现匹配选项，如果设为"all"的话，每次下拉均显示全部选项                   mode: "local",                   valueField: "Id",                   displayField: "Text",                   selectOnFocus: true,                   resizable: true,//可以改变大小                   typeAhead: true, //延时查询                   typeAheadDelay:3000,                   editable: true,//可以编辑                   renderTo: document.body               });           });

在上述代码中,mode:"local",这个过程就是..先从服务器端获取json数据保存到store对象中,然后再加载到comboBox当中...

第二种远程获取数据:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

Ext.onReady(function () {       var store = new Ext.data.Store({           proxy: new Ext.data.HttpProxy({ url: "./Admin/Data/ComBoxData.ashx" }),           reader: new Ext.data.JsonReader({ totalProperty: "totalProperty", root: "result", fields: [{ name: 'Id' }, { name: 'Text'}] })                  });                  Ext.data.Record.create([       { name: 'Id', mapping: 'Id' },       { name: 'Text', mapping: 'Text' }       ]);                  var cb = new Ext.form.ComboBox({           id: "cbText",           store: store,           loadingText: 'loading...',           emptyText: "--请选择--",           triggerAction: "all", //请设置为"all",否则默认为"query"的情况下，你选择某个值后，再此下拉时，只出现匹配选项，如果设为"all"的话，每次下拉均显示全部选项           mode: "remote",           valueField: "Id",           displayField: "Text",           selectOnFocus: true,           resizable: true, //可以改变大小           //typeAhead: true, //延时查询           //typeAheadDelay:3000,           editable: true, //可以编辑           renderTo: document.body       });   });

这时候，我们要一定要理解ext.data中的record对象和store对象,API中翻译的描述:Store类封装了一个客户端的Record对象的缓存.而load事件是当一笔新的Record加载完毕后触发。Record类不但封装了Record的相关定义信息，还封装了Ext.data.Store里面所使用的Recrod对象的值信息， 并且方便任何透过Ext.data.Store来访问Records缓存之信息的代码。（可选的） 如果使用的是Ext.data.Reader，这是一个Reader能够获取数据对象的数组值创建到Record对象下面的对应的映射项； 如果使用的是Ext.data.JsonReader，那么这是一个javascript表达式的字符串， 能够获取数据的引用到Record对象的下面；

个人理解..