开发者社区> 吞吞吐吐的> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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);
        }


本文转自温景良博客园博客,原文链接:http://www.cnblogs.com/wenjl520/archive/2008/11/03/1325697.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
文章
问答
文章排行榜
最热
最新
相关电子书
更多
<script>...[你的美好].1534419270.pdf
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载