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'])
?? });
