|
|
|
|
Ext的Combox网上众说分云，真正好用的代码，比较难找，自己开发了一个。
Ext 2.1 version。 Ext Combox 读Json，设置默认值，存取
我自己喜欢用widget的设计模式，因此文件组织通过以下的目录。
文件目录
combox
|--combox.html
|--combox.js
|--combox.json
combox.html文件：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Paging Grid Example</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="states.js"></script>
<script type="text/javascript" src="combox.js"></script>
<link rel="stylesheet" type="text/css" href="combos.css" />
<link rel="stylesheet" type="text/css" href="../shared/examples.css" />
</head>
<body>
<div>
<input type="text" id="local-states" size="20"/>
</div>
</body>
</html>
combox.json文件
[
{"abbr":"AL","state":"Alabama"},
{"abbr":"WY","state":"Wyoming"},
{"abbr":"YY","state":"YYTest","selected":"y"}
]
combox.js文件
Ext.onReady(function(){
//读JSON
var store = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: "combox.json"
}),
reader: new Ext.data.JsonReader({
fields: [
"abbr","state","selected"
]
})
});
store.load();
//设置默认值
store.on("load",function(ds,records,o){
for(i=0;i<records.length;i++){
if(records[i].data.selected=="y"){
combo.setValue(records[i].data.abbr);
}
}
});
var combo = new Ext.form.ComboBox({
name:"combox",
fieldLabel: "地区",
hiddenName:"area",
store: store,
displayField:"state",
valueField:"abbr",
typeAhead: true,
mode: "local",
triggerAction: "all",
emptyText:"Select a state...",
selectOnFocus:true,
applyTo: "local-states",
valueNotFoundText:1,
editable:false,
//得到选中的返回值
listeners:{
select: function(combo, record, index) {
alert(combo.getValue());
}
}
});
});
|
|
|
