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 }

 

posted @ 2012-08-20 14:07  Ro_s__  阅读(659)  评论(0编辑  收藏  举报