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 }