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

本篇介绍如何在客户端绑定数据到Ext.form.ComboBox,并支持手写和联想功能,还提供了显示提示消息的功能.

效果图如下:

代码较为简单,不涉及到后台处理:

<form id="form1" runat="server">
    <div><div id="hello"></div>
    <script type="text/javascript">   
    //静态绑定数据
    function ready()
    {
        Ext.namespace('Ext.exampledata');
        Ext.exampledata.states =
        [
                ['1', '中国', 'The Sunshine State'],
                ['2', '美国', 'The Peach State'],
                ['3', '俄罗斯', 'The Aloha State'],
                ['4', '德国', 'Famous Potatoes'],
                ['5', '英国', 'The Prairie State'],
                ['6', '法国', 'The Hospitality State'],
                ['7', '加拿大', 'The Corn State'],
                ['8', '澳大利亚', 'The Sunflower State'],
                ['9', '老挝', 'The Bluegrass State'],
                ['10', '泰国', 'The Bayou State'],
                ['11', '印度', 'The Pine Tree State'],
                ['12', '日本', 'Chesapeake State']
        ];
        Ext.QuickTips.init();
       
        var store = new Ext.data.SimpleStore
        ({
            fields:["name","value","state"],
            data:Ext.exampledata.states
        });         
        var comboBox = new Ext.form.ComboBox
        ({    
            tpl: '<tpl for="."><div ext:qtip="提示：{name}__{value}__{state}__" class="x-combo-list-item">****{value}*****</div></tpl>',
            id:"ComboBox_ID",
            editable:true,//默认为true，false为禁止手写和联想功能
            store:store,
            emptyText:'请选择',
            mode: 'local',//指定数据加载方式，如果直接从客户端加载则为local，如果从服务器断加载 则为remote.默认值为：remote
            typeAhead: true,
            triggerAction: 'all',
            valueField:'name', 
            displayField:'value',
            selectOnFocus:true,
            renderTo:'hello',
            width:200,
            frame:true,
            resizable:true
        });
       
    }
    Ext.onReady(ready);
    </script>
    </div>
    </form>