extjs学习笔记3—combobox

combobox在整个页面中也是非常重要的一个控件，接下来就好好说一下这个控件是怎么来运用的：

1、运用json来取得数据

Ext.onReady(function () {
            var combo = new Ext.form.ComboBox({
                store:<%=ServerData %>,     //json
                applyTo:"combo"                    //combobox的ID
                });
        });

　　并且在后台的cs代码中添加public string  ServerData=”['湖北','江西','安徽']“;（是放在类中，而不是放在方法里）

2、运用数据源store格式

//提供数据：
var data=[[' 湖北','hubei'],['江西','jiangxi'],['安徽','anhui']];
//导入到store中，store的类型包括GroupingStore，JsonStore，SimpleStore：
var store = new Ext.data.SimpleStore({
fields: ['chinese', 'english'],
data : data
});
//把store托付给comboBox的store
var combo = new Ext.form.ComboBox({
store: store,
displayField:’english’,//store字段中你要显示的字段，多字段必选参数，默认当mode为remote时displayField为undefine，当 select列表时displayField为”text”
mode: ’local’,//因为data已经取数据到本地了，所以’local’,默认为”remote”，枚举完
emptyText:’请选择一个省 份…’,
applyTo: ’combo’
});

　　3、把combobox样式运用到select下拉框

//js代码
var ExtSelect=new Ext.form.ComboBox({
transform:”select”,//html中的id
width:80//宽度
});
//html代码
<select id=”select”>
<option value=”1″>***</option>
<option value=”2″>博客园</option>
<option value=”3″>百度</option>
<option value=”4″>新浪</option>
</select>

　　4、combobox的一些事件

　　　　写在listeners下：

View Code

1 listeners : {
2 select : function(f, r, i) {
3 if (i == 0) {
4 ...
5 } else {
6 ...
7 }

 

转载于:https://www.cnblogs.com/guardianf/archive/2012/08/20/2647478.html