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对象的下面；
个人理解..