ExtJS学习之ComboBox

ExtJS学习之ComboBox

 

1.简单应用

<script lanage="javascript">

    function ready()
    {
   //使用的是静态数据
        var names =
        [
                ['1', '张三'],
                ['2', '李四'],
                ['3', '王五'],
                ['4', '赵六'],
                ['5', '钱七'],
                ['6', '孙八'],
                ['7', '何九']
        ];
        Ext.QuickTips.init();//提示作用
        
        var store = new Ext.data.SimpleStore
        ({
            fields:["id","name"],
            data:names
        });        
        var comboBox = new Ext.form.ComboBox
        ({    
            id:"ComboBox_ID",
            editable:true,//默认为true，false为禁止手写和联想功能
            store:store,
            emptyText:'请选择用户名',
            mode: 'local',//指定数据加载方式，如果直接从客户端加载则为local，如果从服务器断加载 则为remote.默认值为：remote
            typeAhead: true,
            triggerAction: 'all',
            valueField:'id', 
            displayField:'name',
            selectOnFocus:true,
            renderTo:'divName',
            width:200,
            frame:true,
            resizable:true
         
        });
       
        comboBox.on("select",function(cbo){
             Ext.Msg.alert("提示","您选择的用户ID是:"+cbo.value);
        },this);
       
    }
    Ext.onReady(ready);

</script>

HTML 代码

 <form id="form1" runat="server">
   <div id="divName"></div>

</form>

 

2.异步调用

 var store2=new Ext.data.Store({
             "ComboBoxData.aspx",
             reader: new Ext.data.JsonReader({
             totalProperty:"total",
             root:"data",
             fields:['Id','UserName']
             })

          });
        store2.load({params:{start:0,limit:4}});
     
       var comboBox2 = new Ext.form.ComboBox
        ({    
            id:"cbo2",
            editable:true,//默认为true，false为禁止手写和联想功能
            store:store2,
            emptyText:'请选择',
            mode: 'remote',//指定数据加载方式，如果直接从客户端加载则为local，如果从服务器断加载 则为remote.默认值为：remote
            typeAhead: true,
            triggerAction: 'all',
            valueField:'Id', 
            displayField:'UserName',
            selectOnFocus:true,
            renderTo:'divName1',
            width:240,
            border:true,
            frame:true,
            resizable:true,
            pageSize:4//当元素加载的时候，如果返回的数据为多页，则会在下拉列表框下面显示一个分页工具栏，该属性指定每页的大小
            //在点击分页导航按钮时，将会作为start及limit参数传递给服务端，默认值为0，只有在mode='remote'的时候才能够使用          
        });
       
        comboBox2.on("select",function(cbo){
        
           Ext.Msg.alert("提示","您选择的ID是:"+cbo.value);
        })  

//我没有实现真正的数据分页 只是进行了数据模拟

ComboBoxData.aspx:

 

//UserInfo  属性 Id 和 UserName

    protected void Page_Load(object sender, EventArgs e)
    {
        List<UserInfo> userList = new List<UserInfo>();
        string start = Request.QueryString["start"];
        if (start == "0" ||string.IsNullOrEmpty(start))
        {
            userList.Add(new UserInfo(1,"aaa"));
            userList.Add(new UserInfo(2,"bbb"));
            userList.Add(new UserInfo(3, "ccc"));
            userList.Add(new UserInfo(4, "ddd"));
        }
        else {
            userList.Add(new UserInfo(5, "eee"));
            userList.Add(new UserInfo(6, "fff"));
            userList.Add(new UserInfo(7, "ggg"));
            userList.Add(new UserInfo(8, "hhh"));
        }
        string json = JavaScriptConvert.SerializeObject(userList);
        Response.Write("{total:8,data:" + json + "}");
    }