ExtJS Combobox 属性详解和默认值选中
2015-09-20 21:26
831 查看
var store = new Ext.data.SimpleStore({
fields : ['id', 'text'],
data : [['1', '一月'], ['2', '二月'], ['3', '三月'], ['4', '四月'],
['5', '五月'], ['6', '六月'], ['7', '七月'], ['8', '八月'],
['9', '九月'], ['10', '十月'], ['11', '十一月'], ['12', '十二月']]
});
var combo = new new Ext.form.ComboBox({
id : 'myCombo',
name : 'name',// name只是改下拉的名称
hiddenName : 'id',// 提交到后台的input的name ,对应下面store里的''id,必须要填
width : 80,
store : store,// 填充数据
emptyText : '请选择',
mode : 'local',// 数据模式,local代表本地数据
readOnly : true,// 是否只读
value : '',// 默认值,要设置为提交给后台的值,不要设置为显示文本,可选
triggerAction : 'all',// 显示所有下列数据,一定要设置属性triggerAction为all
allowBlank : false,// 不允许为空
valueField : 'value',// 值,可选
displayField : 'text',// 显示文本 ,对应下面store里的'text',
editable : false,// 是否允许输入
forceSelection : true,// 必须选择一个选项
blankText : '请选择'// 该项如果没有选择,则提示错误信息,
listeners : {
afterRender : function(combo) {
var firstValue = store.reader.jsonData[0].text;
combo.setValue(firstValue);//同时下拉框会将与name为firstValue值对应的 text显示
}
}
});
combo.on('load',function(){Ext.getCmp("myCombo").setValue(1);});
//combobox里的id一定要设置,并且不能和hiddenname的值相同,然后通过Ext.getCmp(id值).setValue(value)即可达到html里的select效果,注意这里的value表示的是store里的第几项!
fields : ['id', 'text'],
data : [['1', '一月'], ['2', '二月'], ['3', '三月'], ['4', '四月'],
['5', '五月'], ['6', '六月'], ['7', '七月'], ['8', '八月'],
['9', '九月'], ['10', '十月'], ['11', '十一月'], ['12', '十二月']]
});
var combo = new new Ext.form.ComboBox({
id : 'myCombo',
name : 'name',// name只是改下拉的名称
hiddenName : 'id',// 提交到后台的input的name ,对应下面store里的''id,必须要填
width : 80,
store : store,// 填充数据
emptyText : '请选择',
mode : 'local',// 数据模式,local代表本地数据
readOnly : true,// 是否只读
value : '',// 默认值,要设置为提交给后台的值,不要设置为显示文本,可选
triggerAction : 'all',// 显示所有下列数据,一定要设置属性triggerAction为all
allowBlank : false,// 不允许为空
valueField : 'value',// 值,可选
displayField : 'text',// 显示文本 ,对应下面store里的'text',
editable : false,// 是否允许输入
forceSelection : true,// 必须选择一个选项
blankText : '请选择'// 该项如果没有选择,则提示错误信息,
listeners : {
afterRender : function(combo) {
var firstValue = store.reader.jsonData[0].text;
combo.setValue(firstValue);//同时下拉框会将与name为firstValue值对应的 text显示
}
}
});
combo.on('load',function(){Ext.getCmp("myCombo").setValue(1);});
//combobox里的id一定要设置,并且不能和hiddenname的值相同,然后通过Ext.getCmp(id值).setValue(value)即可达到html里的select效果,注意这里的value表示的是store里的第几项!
相关文章推荐
- 重新认识JavaScript
- 详细js中(function(window,document,undefined))的作用
- JavaScript获取DOM元素位置和尺寸大小
- 201509020-js
- JS中关于clientWidth offsetWidth scrollWidth 等的区别
- Javascript - Function access scope analysis 函数在页面上的可访问性浅析
- BackboneJs入门学习[08]—Router路由初探
- JSP与Servlet区别简述
- 简易抽签程序(数字滚动 HTML + JavaScript)
- JavaScript权威设计--命名空间,函数,闭包(简要学习笔记十二)
- Jsp与servlet的区别
- 利用 fastjson.jar 把对象解析成Json 数据
- 犀牛——第13章 13.3 JavaScript程序的执行
- Three.js 第一篇:绘制一个静态的3D球体
- js闭包初体验
- FastJSON使用心得——如何解析带中文或者数字key的数据
- 如何用 JS 实现 3D 赛车效果
- JSP中的pageEncoding和contentType属性
- js弹出框、对话框、提示框、弹窗总结
- javascript中对象的属性的特性