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