Ext Combobox的应用

<script>
Ext.onReady(function(){
    var store=new Ext.data.Store({
           proxy: new Ext.data.HttpProxy({url:'<%=rootPath%>/getIP.action'}),        
           reader: new Ext.data.JsonReader( {      
               root:'machineMaps',          
               fields: ['machinemapid','ip']
              })
    });
   var form = new Ext.form.FormPanel({
            id:'myform',
            labelAlign:'top',
            bodyStyle:'padding:5px',
            width: 500,
            items: [{
                     xtype:'combo',
                    hiddenName:"ltorSex",
                    id:"ip",
                    fieldLabel:'<span style="color:red">IP</span>',
                    store:store,
                    valueField:"machinemapid",
                    displayField:"ip",
                    mode:'local',
                    typeAhead: true,
                    /*
                    loadingText : 'wait...',
                    minChars:0,

                    mode:'remote',
                    editable:true,   
                    queryDelay : 1500,
                    allowBlank:false
                    */
                    emptyText:"IP",
            }]
    });

    var myPanel = new Ext.Panel({
        renderTo: 'editor',
        height: '100%',
        bodyStyle:'background-color:#FFFFFF',
        items: [{ items:[form]}]
    });
    store.load();
});
</script>
<div id="editor"></div>

 

说明

红色文字说明 当store加载后，数据会存在当前网页中，因此mode可以设置为local,如何需要动态加载combobox的内容，蓝色文字设定的含义为 minChars:0不用输入字符，就自动加载远端的数据

 

如何获取当前选中的key 及text

 

Ext.getCmp("ip").on('select',function(){

             /* 显示选中的text*/

            alert(Ext.getCmp("ip").getRawValue() );

            /* 显示选中的Key*/
             alert(Ext.getCmp("ip").getValue());
                });