[转] http://cache.baidu.com/c?m=9f65cb4a8c8507ed4fece7631046893b4c4380146d96864968d4e414c4224604142db7e67a7e1104d3d82f2750f51218bded367035093db59ed58b40c0bb962d2d892c36671cf112539153bb8e1b65972fc710afb81897adf04584afa28782140cdd52756d80879c5b70459730a04961beec&p=8c7bd61f86cc47aa17bcc7710c64&user=baidu
Ext.form.ComboBox 属性详解(见注释)及使用方法
定义一个ComboBox:
Wayfoon.YearComb = new Ext.form.ComboBox({
id:'cbid',
name:'year',//name只是改下拉的名称
hiddenName:'hyear',//提交到后台的input的name
width : 80,
store : Wayfoon.Year,//填充数据
emptyText : '请选择',
mode : 'local',//数据模式,local代表本地数据
readOnly : true,//是否只读
value : (new Date()).YEAR,//默认值,要设置为提交给后台的值,不要设置为显示文本
triggerAction : 'all',// 显示所有下列数据,一定要设置属性triggerAction为all
allowBlank : false,//不允许为空
valueField : 'value',//值
displayField : 'text',//显示文本
editable: false,//是否允许输入
forceSelection: true,//必须选择一个选项
blankText:'请选择'//该项如果没有选择,则提示错误信息
});
注意:
id:'cbid',//作用不大,可以自动生成
name:'year',//name只是改下拉的名称,几乎没有作用
hiddenName:'hyear',//提交到后台的input的name,重要
使用firebug查看html代码, 以上代码生成html是
<div id="ext-gen279" class="x-form-field-wrap x-trigger-wrap-focus" style="width: 80px;">
<input id="hyear" type="hidden" name="hyear" value="01"/>
<input id="cbid" class="x-form-text x-form-field x-form-focus" type="text" autocomplete="off" size="24" readonly="" style="width: 55px;"/>
<img id="ext-gen280" class="x-form-trigger x-form-arrow-trigger" src="http://www.yibenzhang.com/JSFW/ext/resources/images/default/s.gif"/>
</div>
可以看出一个下列选择 主要由三部分组成 两个input 和一个img(下拉的箭头)。例外 name属性没有起到作用。
combobox中要用到的数据:可以改成从数据库中读取数据
Wayfoon.Year = new Ext.data.SimpleStore({
fields : ['value', 'text'],
data : [['2008', '2008'], ['2009', '2009']]
});
如果要下列框级联,在combox 里面加上
listeners:{
select:{
fn:function(combo,record,index) {
var store;
if(record.get('value')=='广东')
{
store = Wayfoon.MMS.TypeStore5;
}
else if(record.get('value')=='广西')
{
store = Wayfoon.MMS.TypeStore51;
}
Ext.getCmp('city'+id).clearValue();
Ext.getCmp('city'+id).store = store;
if(Ext.getCmp('city'+id).view){
Ext.getCmp('city'+id).view.setStore(store);
}
Ext.getCmp('city'+id).enable();
}
}
}
比如省份和城市级联
//省份数据
Wayfoon.MMS.TypeStore4 = new Ext.data.SimpleStore({
fields : ['value', 'text'],
data : [['', '全部省份'],
['广东', '广东'], ['广西', '广西'], ['黑龙江', '黑龙江'],['吉林', '吉林'],['陕西', '陕西'],
['浙江', '浙江'],['江苏', '江苏'],['四川', '四川'],['湖北', '湖北'],['新疆', '新疆'],
['云南', '云南'],['安微', '安微'],['福建', '福建'],['江苏', '江苏'],['山东', '山东'],
['北京','北京']]
});
//城市数据1
Wayfoon.MMS.TypeStore5 = new Ext.data.SimpleStore({
fields : ['value', 'text'],
data : [['', '全部城市'], ['深圳市', '深圳市'], ['广州市', '广州市']]
});
//城市数据2
Wayfoon.MMS.TypeStore51 = new Ext.data.SimpleStore({
fields : ['value', 'text'],
data : [['', '全部城市'], ['桂林', '桂林'], ['山水', '山水']]
});
//省份combo
Wayfoon.Province=function(id){
var comboProvince=({
xtype : 'combo',
//name : 'combo-province',
readOnly : true,
triggerAction : 'all',
allowBlank : true,
width : 60,
store : Wayfoon.MMS.TypeStore4,
value : '',
//pageSize:10,
//typeAhead: true,
//resizable : true,
hiddenName : 'hComboProv',
displayField : 'text',
valueField : 'value',
mode : 'local',
emptyText : '选择省份',
listeners:{
select:{
fn:function(combo,record,index) {
var store;
if(record.get('value')=='广东')
{
store = Wayfoon.MMS.TypeStore5;
}
else if(record.get('value')=='广西')
{
store = Wayfoon.MMS.TypeStore51;
}
Ext.getCmp('city'+id).clearValue();
Ext.getCmp('city'+id).store = store;
if(Ext.getCmp('city'+id).view){
Ext.getCmp('city'+id).view.setStore(store);
}
Ext.getCmp('city'+id).enable();
}
}
}
});
return comboProvince;
}
//城市combo
Wayfoon.City=function(id){
var comboCity=(
{
id:'city'+id,
xtype : 'combo',
readOnly : true,
triggerAction : 'all',
allowBlank : true,
width : 60,
store : new Ext.data.Store(),//Wayfoon.MMS.TypeStore5,
value : '',
hiddenName : 'hComboCity',
displayField : 'text',
valueField : 'value',
mode : 'local',
emptyText : '选择城市'
});
return comboCity;
}
分享到:
相关推荐
1. Ext.form.NumberField 2. Ext.form.TextArea 3. Ext.form.TriggerField 4. Ext.form.DateField 5. Ext.form.ComboBox 6. Ext.form.TimeField
Ext.form.field.ComboBox结合Java、JSON实现AutoComplete
用EXT来实现下拉框ComboBox 下拉框可以实现分页
53、Ext.form.DateField类 ………… 45 54、Ext.form.ComboBox类 ……………… 46 55、Ext.form.TimeField类 ………… 47 56、Ext.menu.Menu类 ………………… 50 57、Ext.menu.BaseItem类 …………… 50 58、Ext....
NULL 博文链接:https://leonel.iteye.com/blog/454174
ext关于form表单和combobox的例子
9.2.2 ext.container.abstractcontainer和ext.container.container的配置项、属性、方法和事件 / 434 9.2.3 将body元素作为容器:ext.container.viewport / 435 9.3 面板 / 436 9.3.1 面板的结构 / 436 9.3.2 ...
4.1.12 Ext.form.field.ComboBox组合框 4.1.13 Ext.form.field.Time时间选择框 4.1.14 Ext.form.field.Date日期选择框 4.1.15 Ext.form.field.Hidden隐藏字段 4.1.16 Ext.form.field.HtmlEditor编辑器字段 ...
easyui的datagrid中editor和combobox的级联,在datagrid中编辑项是下拉框的实现方式
easyui的datagrid中editor和combobox的级联
53、Ext.form.DateField类 ………… 45 54、Ext.form.ComboBox类 ……………… 46 55、Ext.form.TimeField类 ………… 47 56、Ext.menu.Menu类 ………………… 50 57、Ext.menu.BaseItem类 …………… 50 58、Ext....
Extjs4下拉树菜单 ComboBoxTree 支持单选和多选并且支持展开选中指定节点的通用控件 在项目中已经成熟运用 值得收藏和运用
extjs editgrid combobox 回显extjs editgrid combobox 回显extjs editgrid combobox 回显extjs editgrid combobox 回显
ext,ext combobox,ext二级联动,ext combobox二级联动 ___本人的原则:上传好东西,但绝不便宜.因为自己的心血 ext combobox二级联动,ext ,ext combobox,combobox,combobox二级联动,ext 二级联动 groupCombo.on('...
var fm = Ext.form; //构造一个只能包含checkbox的列 var checkColumn = new Ext.grid.CheckColumn({ header: 'Indoor?', dataIndex: 'indoor', width: 55 }); // 构造ColumnModel var cm = new Ext....
该资源是war包,里面包括ComboBox中的各个参数, 详细讲解在我的文档中有
首先在窗体中添加一个comboBox1和一个imageList(本例中带有三个图片) this.comboBox1.DrawMode = System.Windows.Forms.DrawMode.OwnerDrawFixed;
WPF、Prism实现ComboBox省市县三级级联
new Ext.form.ComboBox({ store: new Ext.data.JsonStore({ idProperty: 'VehicleNo', url: '../ajax/test.ashx, fields: ['VehicleNo', 'phoneNum'] }), id:'querynodesid', emptyText:'快速检索', ...