Ext的Combox
Ext的Combox
引自:http://lzquan.javaeye.com/blog/
var emplyoees = new
Ext.form.
ComboBox({
id : ’emplyoees’,
fieldLabel: ‘人员’,
hiddenName:’emplyoee’,
store: emplyoeeStore,
readOnly : true,
valueField : ‘name’,
displayField:’name’,
typeAhead: true,
valueNotFoundText : 0,
mode: ‘local’,
triggerAction: ‘all’,
emptyText:’请选择人员’,
selectOnFocus:true,
width:190
});
emplyoees .on(‘beforerender’,function(){
this.value=you need value;
});
不过显示的也是you need value.可以采用
this.hiddenField.value=you need value
5.服务器数据作为ComboBox的数据源实例
首先从服务器获取json数据：
cs后台代码，简单起见，示例而已，要主要字符串格式(新手注意，下面的代码放在类里面，不是放在方法里)
public
string
ServerData
=
“
[‘湖北’,’江西’,’安徽’]
“
;
aspx前台js介绍代码
Ext.onReady(
function
(){
var
combo
=
new
Ext.form.ComboBox({
store:
<%=
ServerData
%>
,
//
获取ServerData的string值，不要用””引起来，否则就不是object数据，而是字符串，这是一个很巧妙的关键点：把服务器的字符串转化为js的object数据，是不是超级方便。
emptyText:
‘
请选择一个省份….
‘
,
applyTo:
‘
combo
‘
});
});
<
input
type
=”text”
id
=”combo”
size
=”20″
/>
我们就通过<%=ServerData%>这样的方式获取到了服务器最简单的属性数据。问题来了，js和html怎么调用c#后台
的变量和方法？（变量的调用上面刚刚介绍）
6.js和html怎么调用c#后台的变量和方法
关于这个话题，我不多说，网上很多讲解，在此仅简单说明
1.js调用c#后台变量，参考上面，注意，如果想获取string类型，请在js里用引号 var str=”<%=ServerData%>“(返回 “ [‘湖北’,’江西’,’安徽’] “)
2.js调用c#后台方法：
return “fdfdfdfdsf”;
}
前台代码：
–>
<
input
id
=”Text2″
type
=”text”
value
=”<%=ServerData()%>“
/>
3.js调用c#后台带参数的方法
return pram+”，我是参数传进来的”;
}
主要是处理好js的引号问题，多尝试就会正确
–>
<
script
>
alert(
‘
<%=ServerData("谦虚的天下") %>
‘
);
script >
好了，现在我们有了js获取后台数据的方法手段，不怕不怕啦，不过，这只是一小步。
7.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
‘
});
这里我们介绍了两个新的参数displayField和mode，请记住，后面不再专门说明。
8.ComboBox的value获取
添加listeners事件：
ComboBox的事件很多(api)，我们无法一一讲解，但是我们可以举一反三，select事件就是其中典型的一个
listeners:{
“
select
“
:
function
(){
alert(Ext.get(
“
combo
“
).dom.value);
//
获取id为combo的值
}
}
//
这里我们提供了一种不是很好的方法，在此不做过多停留
9.把Extjs的ComboBox样式应用到select的下拉框中去
核心参数介绍
//
用于转换样式的，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的不同之处的，不过不明显！
10.ComboBox的其他重要参数
.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
//
其他参数，请参考api，或自行尝试
关于combobox的其他花俏功能在此不多做介绍。
最后一点，如何实现在aspx页面更灵活的分离cs数据和js数据的交互？因为我们都喜欢把js放在一个单独的文件，然后在aspx页面引用
这样就有一个问题，我在js里直接获取cs数据就有点不方便。我认为可以这样，在aspx页面里获取数据，并作为js，你就js变量，你就可
以在js里引用了，或者直接通过url地址获取。
之所以这么啰嗦的讲combobox，是因为这个东西有时候真的让人又爱又恨！
下篇中我们继续讲解form中其他的表单元素！
下面是另一片，从网上抄的。
comboOptions.load();
[{“id”:”1″,”name”:”Super Admin”},{“id”:”2″,”name”:”Admin”}]需要注意的是,如果返回的json数据有多列,需要在new JsonStore的时候,在fields一项中填写所有column的名字,否则不能填充combobox
又一篇:
//布种 直接从数据库读去数据生成列表
var fabircTypeDs = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: CONTEXT_PATH+’/fabrictype/fabrictypeAll.action’
}),
reader: selReader,
remoteSort: false
});
fabircTypeDs.load();
var fabircTypeCmb = new Ext.form.ComboBox({
fieldLabel: ‘布种’,
store: fabircTypeDs,
hiddenName:’softId’,
loadingText: ‘searching…’,
displayField : ‘name’,
mode:’local’,
editable : false,
valueField: ‘id’,
width: 170,
triggerAction: ‘all’
});
//供应商 当用户输入数据时根据输入信息进行模糊查询，动态生成列表，类似google搜索框
var dsSupplier = new Ext.data.Store({
proxy: new Ext.data.ScriptTagProxy({
url:CONTEXT_PATH+’/supplier/supplierAll.action’
}),
reader: new Ext.data.JsonReader({
root: ‘gridRows’,
totalProperty: ‘totalCount’
}, [
{name: ‘id’, mapping: ‘id’},
{name: ‘name’, mapping: ‘name’}
])
});
var supplierCmb = new Ext.form.ComboBox({
fieldLabel:’供应商’,
store: dsSupplier,
displayField:’name’,
valueField: ‘id’,
typeAhead: true,
loadingText: ‘loading…’,
width: 170,
hiddenName:’name’,
hideTrigger:true,
minChars:1,
forceSelection:true,
triggerAction: ‘all’
});
我从网上抄的:
var CountryCode = [
[’93’,’Afghanistan(93)’],
[‘355′,’Albania (355)’],
[‘213′,’Algeria (213)’],
[‘684′,’American Samoa (684)’],
[‘376′,’Andorra (376)’],
[‘244′,’Angola (244)’]
]
new Ext.form.ComboBox({
fieldLabel: ‘Country Code’,
name:’country_code’,
forceSelection: true,
listWidth: 200,
store: new Ext.data.SimpleStore({
fields: [‘value’, ‘text’],
data : CountryCode
}),
valueField:’value’,
displayField:’text’,
typeAhead: true,
mode: ‘local’,
triggerAction: ‘all’,
selectOnFocus:true,//用户不能自己输入,只能选择列表中有的记录
allowBlank:false,
listeners:{
select:function(){
alert(this.value);
}
}
})
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/213646.html原文链接：https://javaforall.net
