ExtJS:Combox组件使用

1. Ext.form.ComboBox 属性

    定义一个ComboBox：

    var myCombox =  new  Ext.form.ComboBox({

          id: 'comboxId' , // 可以自动生成

          name: 'year' ,   //name只是改下拉的名称

          hiddenName: 'hyear' , //提交到后台的input的name

          width : 80,

          store : comboxStore, //填充数据

          emptyText :  '请选择' ,

          mode :  'local' , //数据模式，local代表本地数据,remote代表远程数据

          readOnly :  true , //是否只读

          value : ( new  Date()).YEAR, //默认值,要设置为提交给后台的值，不要设置为显示文本  

          triggerAction :  'all' , // 显示所有下列数据，一定要设置属性triggerAction为all

          allowBlank :  false , //不允许为空

          valueField :  'value' , //值

          displayField :  'text' , //显示文本

          editable:  false , //是否允许输入

          forceSelection:  true , //必须选择一个选项

          blankText: '请选择' //该项如果没有选择，则提示错误信息

    });

2. DataStore为XML的Combox

    var comboxMapping = Ext.data.Record.create([ 
          { name : 'itemNo ',  mapping : 'itemNo ' },  
          { name : 'name ', mapping : 'name ' }
    ]);

    var comboxReader = new Ext.data.XmlReader({ 
          totalRecords : "total ",  
          record : "DataItem ",  
          id : "itemNo " 
    }, comboxMapping ); 
   
    var comboxStore = new Ext.data.Store({
          url: contextPath+'/dataItemManagerAction.do?method=query&itemNo=OrgTrade',
          method: 'GET',
          reader: comboxReader
    });

 

    Toobar中定义一个Combox:   

    ...

    {
           id:'attendOrgTrade',
           xtype : 'combo',
           readOnly : true,
           triggerAction: 'all ',
           allowBlank: true,
           width: 120,
           name:'QOrgTrade',
           valueField: 'itemNo ',
           displayField: 'name ',
           emptyText: '请选择行业',
           store: comboxStore ,
           mode: 'remote '
    }

    ...

    后台返回XML文件：

    <date>
          <total >7</total >
          <DataItem >
              <id>OrgTrade_1</id>
              <itemNo >OrgTrade_1</itemNo >
              <name >种植业</name >
              <typeName/>
           </DataItem >
           <DataItem>
               <id>OrgTrade_2</id>
               <itemNo>OrgTrade_2</itemNo>
               <name>绿色食品</name>
               <typeName/>
           </DataItem>
    </date>

3. DataStore为JSON的Combox

    var comboxStore = new Ext.data.Store({
          method: 'GET',
          url: 'operation.do?option=getJSON',
          reader: new Ext.data.JsonReader({
               totalProperty: 'results',
               root: 'rows'
          }, ['value', 'text'])
   });