寫了哈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對象的下面；緩存
我的理解..服務器