ExtJs之combobox – 筚路蓝缕

1.服务器数据作为ComboBox的数据源实例
首先从服务器获取json数据：
//cs后台代码，简单起见，示例而已，要主要字符串格式(新手注意，下面的代码放在类里面，不是放在方法里)
public string? ServerData=”[‘湖北’,’江西’,’安徽’]”;
//前台js介绍代码
Ext.onReady(function(){
?????? var combo=new Ext.form.ComboBox({
??????????? store:<%=ServerData%>,//获取ServerData的string值，不要用””引起来,否则就不是object数据，而是字符串，这是一个很巧妙的关键点：把服务器的字符串转化为js的object数据，??????????? emptyText:’请选择一个省份….’,
??????????? applyTo: ‘combo’
??????? });
??? });
//前台html代码
<input type=”text” id=”combo” size=”20″/>

我们就通过<%=ServerData%>这样的方式获取到了服务器最简单的属性数据。

2.ComboBox的数据源store格式详解
在前面的例子里面，我们一直给ComboBox的数据源store赋值一维数组，其实store支持多维和Store.data.Store类型。
//下面就几种数据以代码举例说明
1.一维数组：[“江西”,”湖北”]，值同时赋给ComboBox的value和text
2.二维和多维数组：[[“one”,”bbar”,”111″],[“two”,”tbar”,”222″]],第一维和第二维分别赋值给value和text，其他维忽略
3.store类型：包括GroupingStore, JsonStore, SimpleStore.
??? //我们分三步走：
???? //第一步：提供数据：
???????? var data=[[‘湖北’,’hubei’],[‘江西’,’jiangxi’],[‘安徽’,’anhui’]];
??? //第二步：导入到store中：
???????? var store = new Ext.data.SimpleStore({
???????????? fields: [‘chinese’, ‘english’],
???????????? data : data
??????? });
???? //第三步 :把store托付给comboBox的store
??? var combo = new Ext.form.ComboBox({
??????? store: store,
??????? displayField:’english’,//store字段中你要显示的字段，多字段必选参数，默认当mode为remote时displayField为undefine，当select列表时displayField为”text”
??????? mode: ‘local’,//因为data已经取数据到本地了，所以’local’,默认为”remote”，枚举完
??????? emptyText:’请选择一个省份…’,
??????? applyTo: ‘combo’
??? });
3.ComboBox的value获取
添加listeners事件：
//ComboBox的事件很多(api)，我们无法一一讲解，但是我们可以举一反三，select事件就是其中典型的一个??????
????????????? listeners:{
??????????????? “select”:function(){
??????????????????????????? alert(Ext.get(“combo”).dom.value);?? //获取id为combo的值
???????????????????????? }
??????????? }
//这里我们提供了一种不是很好的方法，在此不做过多停留

4.把Extjs的ComboBox样式应用到select的下拉框中去
transform:id//用于转换样式的，TimeField作为ComboBox的子类也有此属性
核心代码：
//js代码
var ExtSelect=new Ext.form.ComboBox({
???????????? transform:”select”,//html中的id
???????????? width:80//宽度
???????? });
//html代码
<select id=”select”>
??????? <option value=”1″>***</option>
??????? <option value=”2″>博客园</option>
??????? <option value=”3″>百度</option>
??????? <option value=”4″>新浪</option>
??? </select>
?//是不是超级简单？??? 从中不是也可以看出extjs的不同之处的，不过不明显！
5.ComboBox的其他重要参数
1.valueField:”valuefield”//value值字段
2.displayField：”field” //显示文本字段
3.editable：false//false则不可编辑，默认为true
4.triggerAction:”all”//请设置为”all”,否则默认为”query”的情况下，你选择某个值后，再此下拉时，只出现匹配选项，如果设为”all”的话，每次下拉均显示全部选项
5.hiddenName:string //真正提交时此combo的name，请一定要注意
6.typeAhead:true,//延时查询，与下面的参数配合
7.typeAheadDelay:3000,//默认250
6.ComboBox使用时注意
combo这个控件是需要绑定一个Store数据源才能使用的,
因此，在数据绑定中combo需要指定两个比较关键的属性displayField和valueField
displayField指定一个Store的某一个列名，也就是Store的fields指定的内容
而valueField，则是实际combo返回的值，displayField是指示显示的
如果valueField不指定也行，不过返回值就成了displayField
?
7.combobox动态加载问题
view plaincopy to clipboardprint?
?var moduleStore = new Ext.data.Store({?????
??????? proxy: new Ext.data.HttpProxy({?????????
??????????? url: ‘getShenOrder.action’ //这里是参数可以顺便写,这个数据源是在第一个下拉框select的时候load的??????
??????? }),?????????
??????? reader: new Ext.data.JsonReader({??
??????? totalProperty: “results”,??
??????? root: ‘list’,??
??????? fields:[‘code’,’name’]??
??????? })/*,?
??????? listeners: {???
??????????? load: function() {??
??????????????? var combo = Ext.getCmp(‘ruleid’);?
??????????????? combo.setValue(combo.getValue());???
??????????? }???
??????? }*/?
?????? });????
?
?var comb? = new Ext.form.ComboBox({??
??? fieldLabel: ‘审核级别’,??
??? labelSeparator : ‘：’,??
??? id:”ruleid”,??
??? name:”ruleid”,??
??? baseCls:”x-plain”,??
??? store:moduleStore,??
??? valueField:’code’,??
??? displayField:’name’,??
??? typeAhead: true,??
??? mode: ‘local’,??
??? triggerAction: ‘all’,??
??? selectOnFocus:true,??
??? editable:false,??
??? readOnly: true,??
??? listWidth: 105,??????????????? //设置数据显示框的长度??
??? width:90,????????????????????? //设置下拉框的长度??
??? hideTrigger:false?
//? listeners: {? //为Combo添加select事件??
//??????? select: function(combo, record, index) {?? // 该事件会返回选中的项对应在 store中的 record值. index参数是排列号.??
//??????? }??
//??????? }??
})??
?
moduleStore.load({params:{typeCode:targetcode}});?????????????????????????????????????????????????
moduleStore.on(‘load’,function(store,record,opts){?? //为Store设置load事件?????????????????????????????????? var combo = Ext.getCmp(“ruleid”);????
??? if(p2==0){??
??? var? firstValue? = record[0].data.code;//这种方法也可以获得第一项的值????
??? combo.setValue(firstValue);//选中????
???????? }else{??
???? combo.setValue(p2);?? //根据审核顺序设置combo选中值??
??? }??
});????
???????????????????????????????????????????????????
//? Ext.getCmp(‘ruleid’).setValue(p2.toString()); 设置当前选中值Value??
//????? 应该在load时setValue(data)或者第一次combobox显示的是data的值??
//? Ext.getCmp(‘ruleid’).setRawValue(‘一级审核’);? 设置显示的Text?
?var moduleStore = new Ext.data.Store({??
??????? proxy: new Ext.data.HttpProxy({??????
??????????? url: ‘getShenOrder.action’ //这里是参数可以顺便写,这个数据源是在第一个下拉框select的时候load的???
??????? }),??????
??????? reader: new Ext.data.JsonReader({
??????? totalProperty: “results”,
??????? root: ‘list’,
??????? fields:[‘code’,’name’]
??????? })/*,
??????? listeners: {?
??????????? load: function() {
???????????? var combo = Ext.getCmp(‘ruleid’);
??????????????? combo.setValue(combo.getValue());?
??????????? }?
??????? }*/
?????? });
?var comb? = new Ext.form.ComboBox({
?fieldLabel: ‘审核级别’,
?labelSeparator : ‘：’,
?id:”ruleid”,
?name:”ruleid”,
?baseCls:”x-plain”,
?store:moduleStore,
?valueField:’code’,
?displayField:’name’,
?typeAhead: true,
?mode: ‘local’,
?triggerAction: ‘all’,
?selectOnFocus:true,
?editable:false,
?readOnly: true,
?listWidth: 105,??????????????? //设置数据显示框的长度
?width:90,????????????????????? //设置下拉框的长度
?hideTrigger:false
// listeners: {? //为Combo添加select事件
//??? select: function(combo, record, index) {?? // 该事件会返回选中的项对应在 store中的 record值. index参数是排列号.
//??? }
//??? }
})
moduleStore.load({params:{typeCode:targetcode}});???????????
moduleStore.on(‘load’,function(store,record,opts){?? //为Store设置load事件???????? var combo = Ext.getCmp(“ruleid”);?
?if(p2==0){
?var? firstValue? = record[0].data.code;//这种方法也可以获得第一项的值?
?combo.setValue(firstValue);//选中?
???????? }else{
? combo.setValue(p2);?? //根据审核顺序设置combo选中值
?}
});?
????????????
// Ext.getCmp(‘ruleid’).setValue(p2.toString()); 设置当前选中值Value
//????? 应该在load时setValue(data)或者第一次combobox显示的是data的值
// Ext.getCmp(‘ruleid’).setRawValue(‘一级审核’);? 设置显示的Text 题

==============================

我用另一种方式传houseid值，并且不需要beforeload事件。

listeners : {? //主要这里添加监听事件
??????????????????????????????????????? select :function(combo, record, index)
??????????????????????????????????????????????? {
??????????????????????????????????????????????? Ext.getCmp(‘room_id’).clearValue();? //roomCombo清除值
??????????????????????????????????????????????? houseid= Ext.getCmp(‘house_id’).getValue();//获取值
??????????????????????????????????????????????? room_combo_store.removeAll();
??????????????????????????????????????????????? room_combo_store.proxy=
??????????????????????????????????????????????? new Ext.data.HttpProxy({url:’php/room/room_combo_query.php?houseid=’+houseid});
?????????????????????????????????????????????????? room_combo_store.reload();? //重新加载room的store
??????????????????????????????????????????????????? }
?????????????????????????????????????????????? }
参考combo的一种写法
var store = new Ext.data.Store({
??? reader: new Ext.data.JsonReader({ id: “id” }, [{ name: “id” }, { name: “text”}]),
??? baseParams: { action: “” }, autoLoad: true,
??? proxy: new Ext.data.HttpProxy({ url: “” })
});
{xtype:”combo”,name: “UId”, hiddenName: “UId”, fieldLabel: “角色”, allowBlank: false, blankText: “请选择角色!”, readOnly: true, mode: “local”, store: store, valueField: “id”, displayField: “text”, triggerAction: “all”, width: 125}
返回值：
[{“id”:”2″,”text”:”管理员”},{“id”:”228″,”text”:”操作员”}]

======================================

Extjs中ComboBox选中默认值

…
??? var comboStore = new Ext.data.SimpleStore({
??????? fields: [‘value’, ‘text’],
??????? data: []
??? });
??? var combobox = new Ext.form.ComboBox({
??????? store: comboStore,
?id:’combo’,
??????? emptyText: ‘请选择’,
??????? mode: ‘local’,
??????? triggerAction: ‘all’,
??????? valueField: ‘value’,
??????? displayField: ‘text’,
??????? readOnly: true,
??????? applyTo: ‘combobox’
??? });
??? comboStore.on(‘load’,function(store,record,opts){
?var combo = Ext.getCmp(“combo”);
??????? var firstValue = store.getRange()[0].data.value;//这种方法可以获得第一项的值
?//firstValue? = record[0].data.value;//这种方法也可以获得第一项的值
?combo.setValue(firstValue);//选中
?alert(“value=”+combo.getValue());//查看选中的value
?alert(“text=”+combo.getRawValue());//查看选中的文本
??? });
…

一	二	三	四	五	六	日
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

发表回复 取消回复

相关文章

发表回复取消回复