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>

本文轉自溫景良部落格園部落格，原文連結：http://www.cnblogs.com/wenjl520/archive/2008/11/03/1325694.html，如需轉載請自行聯系原作者