当前位置: 代码迷 >> JavaScript >> ExtJS:Combox组件运用
  详细解决方案

ExtJS:Combox组件运用

热度:313   发布时间:2012-11-06 14:07:00.0
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'])
?? });

  相关解决方案