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