Ext.form.ComboBox 属性详解(见注释)及使用方法
定义一个ComboBox:
- Wayfoon.YearComb = new Ext.form.ComboBox({
- id:'cbid',
- name:'year',
- hiddenName:'hyear',
- width : 80,
- store : Wayfoon.Year,
- emptyText : '请选择',
- mode : 'local',
- readOnly : true,
- value : (new Date()).YEAR,
- 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 : [['', '全部省份'],
- ['广东', '广东'], ['广西', '广西'], ['黑龙江', '黑龙江'],['吉林', '吉林'],['陕西', '陕西'],
- ['浙江', '浙江'],['江苏', '江苏'],['四川', '四川'],['湖北', '湖北'],['新疆', '新疆'],
- ['云南', '云南'],['安微', '安微'],['福建', '福建'],['江苏', '江苏'],['山东', '山东'],
- ['北京','北京']]
- });
- Wayfoon.MMS.TypeStore5 = new Ext.data.SimpleStore({
- fields : ['value', 'text'],
- data : [['', '全部城市'], ['深圳市', '深圳市'], ['广州市', '广州市']]
- });
- Wayfoon.MMS.TypeStore51 = new Ext.data.SimpleStore({
- fields : ['value', 'text'],
- data : [['', '全部城市'], ['桂林', '桂林'], ['山水', '山水']]
- });
- Wayfoon.Province=function(id){
- var comboProvince=({
- xtype : 'combo',
-
- readOnly : true,
- triggerAction : 'all',
- allowBlank : true,
- width : 60,
- store : Wayfoon.MMS.TypeStore4,
- value : '',
-
-
-
- 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;
- }
- Wayfoon.City=function(id){
- var comboCity=(
- {
- id:'city'+id,
- xtype : 'combo',
- readOnly : true,
- triggerAction : 'all',
- allowBlank : true,
- width : 60,
- store : new Ext.data.Store(),
- 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的级联
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 支持单选和多选并且支持展开选中指定节点的通用控件 在项目中已经成熟运用 值得收藏和运用
easyui的datagrid中editor和combobox的级联,在datagrid中编辑项是下拉框的实现方式
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:'快速检索', ...