EXTJS学习系列提高篇:第二十七篇作者殷良胜,ext2.2打造Ext.form.ComboBox系列--动态绑定

本篇介绍了将数据动态绑定到Ext.form.ComboBox,采取后台读数据库的方式.支持手写和联想功能,还提供显示提示消息的效果和改变ComboBox的宽度和高度.

效果图如下:

前台代码显示如下:

 <form id="form1" runat="server">
    <div><div id="hello"></div>
    <script type="text/javascript">   
    //动态绑定数据
    function ready()
    {      
        Ext.QuickTips.init();
       
        var store = new Ext.data.Store
        ({
            proxy: new Ext.data.HttpProxy({url:"comboJson.aspx?Flag=1"}), // 数据源
            reader: new Ext.data.JsonReader({totalProperty:"totalPorperty",root:"result",fields:[{name: 'ID'},{name: 'TypeCName'}]})// 如何解析
        });
        store.load();
        var comboBox = new Ext.form.ComboBox
        ({    
            tpl: '<tpl for="."><div ext:qtip="提示：ID={ID}；TypeCName={TypeCName}" class="x-combo-list-item">{TypeCName}</div></tpl>',
            id:"ComboBox_ID",
            editable:true,//默认为true，false为禁止手写和联想功能
            store:store,
            emptyText:'请选择',
            mode: 'local',//指定数据加载方式，如果直接从客户端加载则为local，如果从服务器断加载 则为remote.默认值为：remote
            typeAhead: true,
            triggerAction: 'all',
            valueField:'ID', 
            displayField:'TypeCName',
            selectOnFocus:true,
            renderTo:'hello',
            width:160,
            resizable:true
        });        
    }
    Ext.onReady(ready);
    </script>
    </div>
    </form>

后台代码显示如下:

 private void Bind_AllData()
        {
            DataSet ds = SampleBusiness.GetMoreRowByTableName("TypeTable");
            string json = "";
            if (ds != null && ds.Tables[0].Rows.Count > 0)
            {
                json = CommonUtil.GetJsonString(ds);
                int count = ds.Tables[0].Rows.Count;
                json = "{totalPorperty:" + count + ",result:" + json + "}";
            }
            else
            {
                json = "错误";
            }
            Response.Write(json);
        }