Extjs 下拉框(1)

来源：互联网发布：呼死你软件下载编辑：程序博客网时间：2024/05/21 13:36

发现很多初入ext的朋友，都曾在下拉框的问题上难倒过，我简单说一下，下拉框的使用。以免在这上面浪费时间。

创建方式一：

var cb = new Ext.form.ComboBox({

//下面的

});

创建方式二：

var tercombo = Ext.create('Ext.form.ComboBox', {

});

 创建方式三：(推荐)

直接xtype:combo 推荐这种创建方式，当点击时，才创建。(速度会快点)

一：本地加载

{

editable :false,//不可编辑
fieldLabel : '状态',
xtype: 'combo',
name : 'states',
id : 'states',
blankText:'请选择状态',
emptyText:'请选择状态',
allowBlank : true,
triggerAction:'all', //单击触发按钮显示全部数据
width:150,

hiddenName:'dkey', //传到后台的值。默认是k
displayField:'dvalue', //定义要显示的字段
valueField:'dkey', //定义值字段
mode:'local', //本地模式
// mode:'remote',
forceSelection:true, //要求输入的值必须在列表中存在
resizable:true, //允许改变下拉列表大小
typeAhead:true, //允许自动选择剩余部分文本

//              value: '', // 设置默认选中值

allowBlank : true,
store:stateStore
}

本地加载的数据源：

var stateStore = new Ext.data.ArrayStore({
fields: ['dkey', 'dvalue'],
data: [['0', '禁用'], ['1', '启用']]
});

数据库加载的数据源：(把上面的store：stateStore替换成下面的)

store:new Ext.data.ArrayStore({
autoLoad:true,
url : __ctxPath + '',
fields : [ 'dkey', 'dvalue' ]
})

下拉框有两个值，一个是用来显示的字段(value)，一个是用来隐藏的(key). 所以构建时必须有这个两个字段。

既然他有两个值，取值的时候就要注意了。

Ext.getCmp('id').getValue(); //取到的是Combox中displayField 属性里面的值(value)

Ext.getCmp('id').getRawValue(); //取到的是Combox中valueField属性里面的值(key)

这一定要区分开，

注：当把ComboBox 的editable 设为true之后，用getValue()是取不到手工输入进去的值;(做可编辑下拉框时注意，用getRawValue() )

1 0