写了哈extjs当中的combox,第一次写,照着网上的例子抄.在上次的例子中,是实现了,但是有一个重大的错误.也就是本身根本没有理解combox从远程服务器获取数据，和本地获取数据有什么不一样...因此上次的例子中,运行起来很久得不到数据...javascript
本地获取数据:java
|
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当中...json
第二种远程获取数据:数组
|
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对象的下面；缓存
我的理解..服务器