日期:2014-05-16  浏览次数:20384 次

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文件: