extjs combobox column布局为什么折叠在一起

最新推荐文章于 2017-11-12 22:21:52 发布
最新推荐文章于 2017-11-12 22:21:52 发布
阅读量1k 收藏
点赞数 1
分类专栏： javascript 文章标签： extjs autoload null constructor function border
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yanghongchang_/article/details/7544737
版权

以下是代码:

extjs libriry 3.3.1


/**
 * 人员基本信息查询Form
 */

//--------------------------Combobox

 MyComboBox=Ext.extend(Ext.form.ComboBox,{
	     fieldLabel:null,
	     value:null,
	     triggerAction:"all",
	     displayField:"key",
	     editable:false,
	     name:null,
	     id:null,
	     url:null,
	     hiddenName:'value',
	     valueField:"value",
	     autoLoad:null,
	     mode:null,
	     store:null,
	     width:127,
    	 constructor:function(conf){
         //给以上参数赋值
         this.fieldLabel=conf.fieldLabel;
         this.value=conf.value;
         this.name=conf.name;
         this.id=conf.id;
         this.url=(typeof conf.url) !='undefined'? conf.url : null;
         this.mode=(typeof conf.mode) !='undefined'? conf.mode : 'remote';
         this.valueField=(typeof conf.valueField) !='undefined'? conf.valueField : this.valueField;
         this.displayField=(typeof conf.displayField) !='undefined'? conf.displayField : this.displayField;
         this.width=(typeof conf.width) !='undefined'? conf.width : this.width;
         this.autoLoad=conf.autoLoad;
         
         //store
         if(conf.flag!=0){//非0即真
         this.store=conf.store;	 
         }else{
        	 this.store=new Ext.data.JsonStore({
        		 idProperty: 'value',
    	    	 autoLoad:this.autoLoad,
    	    	 url:this.url,
    	    	 fields:[{name:'key'},{name:"value"}]
    	     });
         }
      
         
         
         //构造
         MyComboBox.superclass.constructor.call(this,{
        	    fieldLabel:this.fieldLabel,
				value:this.value,
				triggerAction:this.triggerAction,
			    displayField:this.displayField,
			    editable:this.editable,
			    valueField:this.valueField,
			    name:this.name,
			    id:this.id,
			    hiddenName:this.hiddenName,
			    store:this.store,
			    width:this.width,
			    mode:this.mode
		 });
         
	 }
 });
 
 


//--------------------------FORM
UserBasicInfoTopForm=Ext.extend(Ext.form.FormPanel,{
	yearCbo:null,//年份cbo
	medicalCompanyCbo:null,//医疗服务单位cbo
	//构造方法
	constructor:function(){
		//intialization year combobox 
		this.initYearCbo();
		//
		this.initMedicalCompanyCbo();
		
		UserBasicInfoTopForm.superclass.constructor.call(this,{
		     region:'north',//位于北边
		     collapsible:true,//是否可以最小
		     //collapsedTitle: true,
		     height:80,
		     title:'人员基本信息查询条件',
		     minSize:50,//最小只能拖到50
		     maxSize:120,//最大120
			 items: [{//a begin
		         xtype : "panel",
			     layout : "column",
			     border : false,
	        	 items:[
						{
					    xtype:"panel",
					    layout:'form',
					    border:false,
					    width:130,
					    labelWidth:55,
					    items:[this.yearCbo]
					    },
					    {
						    xtype:"panel",
						    layout:'form',
						    border:false,
						    width:200,
						    labelWidth:55,
						    items:[this.medicalCompanyCbo]
						}
	        	       ]
			 }]
		});
	},
	//---初始化年度的 Cbo you know
	initYearCbo:function(){
		 this.yearCbo=new MyComboBox({
			 fieldLabel:"报销类型",
			 value:"",
			 name:"dbyear",
			 id:"dbyear",
			 url:"/himp/user_basic_info!queryYearListAjax.action",
			 autoLoad:true,
			 flag:0,
			 width:70
			 });
	},
	//初始化医疗服务单位cbo orgCode
	initMedicalCompanyCbo:function(){
		 this.medicalCompanyCbo=new MyComboBox({
			 fieldLabel:"报销类型",
			 value:"",
			 name:"dbyear",
			 id:"dbyear",
			 url:"/himp/user_basic_info!queryMedicalUnitAjax.action",
			 autoLoad:true,
			 flag:0,
			 width:140
			 });	
	}
});
看出来错误没有,其实是在我copy的时候犯的错误,因为这两个combobox的id是一样的,更改不同的id就好了,

之前的图

修改代码:

/**
 * 人员基本信息查询Form
 */

//--------------------------Combobox

 MyComboBox=Ext.extend(Ext.form.ComboBox,{
	     fieldLabel:null,
	     value:null,
	     triggerAction:"all",
	     displayField:"key",
	     editable:false,
	     name:null,
	     id:null,
	     url:null,
	     hiddenName:'value',
	     valueField:"value",
	     autoLoad:null,
	     mode:null,
	     store:null,
	     width:127,
    	 constructor:function(conf){
         //给以上参数赋值
         this.fieldLabel=conf.fieldLabel;
         this.value=conf.value;
         this.name=conf.name;
         this.id=conf.id;
         this.url=(typeof conf.url) !='undefined'? conf.url : null;
         this.mode=(typeof conf.mode) !='undefined'? conf.mode : 'remote';
         this.valueField=(typeof conf.valueField) !='undefined'? conf.valueField : this.valueField;
         this.displayField=(typeof conf.displayField) !='undefined'? conf.displayField : this.displayField;
         this.width=(typeof conf.width) !='undefined'? conf.width : this.width;
         this.autoLoad=conf.autoLoad;
         
         //store
         if(conf.flag!=0){//非0即真
         this.store=conf.store;	 
         }else{
        	 this.store=new Ext.data.JsonStore({
        		 idProperty: 'value',
    	    	 autoLoad:this.autoLoad,
    	    	 url:this.url,
    	    	 fields:[{name:'key'},{name:"value"}]
    	     });
         }
      
         
         
         //构造
         MyComboBox.superclass.constructor.call(this,{
        	    fieldLabel:this.fieldLabel,
				value:this.value,
				triggerAction:this.triggerAction,
			    displayField:this.displayField,
			    editable:this.editable,
			    valueField:this.valueField,
			    name:this.name,
			    id:this.id,
			    hiddenName:this.hiddenName,
			    store:this.store,
			    width:this.width,
			    mode:this.mode
		 });
         
	 }
 });
 
 


//--------------------------FORM
UserBasicInfoTopForm=Ext.extend(Ext.form.FormPanel,{
	yearCbo:null,//年份cbo
	medicalCompanyCbo:null,//医疗服务单位cbo
	//构造方法
	constructor:function(){
		//intialization year combobox 
		this.initYearCbo();
		//
		this.initMedicalCompanyCbo();
		
		UserBasicInfoTopForm.superclass.constructor.call(this,{
		     region:'north',//位于北边
		     collapsible:true,//是否可以最小
		     //collapsedTitle: true,
		     height:80,
		     title:'人员基本信息查询条件',
		     minSize:50,//最小只能拖到50
		     maxSize:120,//最大120
			 items: [{//a begin
		         xtype : "panel",
			     layout : "column",
			     border : false,
	        	 items:[
						{
					    xtype:"panel",
					    layout:'form',
					    border:false,
					    width:130,
					    labelWidth:55,
					    items:[this.yearCbo]
					    },
					    {
						    xtype:"panel",
						    layout:'form',
						    border:false,
						    width:200,
						    labelWidth:55,
						    items:[this.medicalCompanyCbo]
						}
	        	       ]
			 }]
		});
	},
	//---初始化年度的 Cbo you know
	initYearCbo:function(){
		 this.yearCbo=new MyComboBox({
			 fieldLabel:"报销类型",
			 value:"",
			 name:"dbyear",
			 id:"dbyear",
			 url:"/himp/user_basic_info!queryYearListAjax.action",
			 autoLoad:true,
			 flag:0,
			 width:70
			 });
	},
	//初始化医疗服务单位cbo orgCode
	initMedicalCompanyCbo:function(){
		 this.medicalCompanyCbo=new MyComboBox({
			 fieldLabel:"报销类型",
			 value:"",
			 name:"orgCode",
			 id:"orgCode",
			 url:"/himp/user_basic_info!queryMedicalUnitAjax.action",
			 autoLoad:true,
			 flag:0,
			 width:140
			 });	
	}
});

修改之后的效果:



雨泽
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
学习ExtJS Column布局
10-29
ExtJS Column布局使用说明，需要的朋友可以参考下。
ExtJS的FieldSet的column列布局
10-29
ExtJS的FieldSet的column列布局，需要的朋友可以参考下。
ExtJs column与form布局嵌套实现表单重排
weixin_34334744的博客
09-14 193
2019独角兽企业重金招聘Python工程师标准>>> ...
ExtJs之下拉框ComboBox
Heroin的博客
11-12 262
创建comboBox的代码如下所示，先创建数据源然后是store转换，数据源对应comboBox。
根据流程节点combobox时候可编辑
extjs帝国梦的专栏
11-14 346
项目中会遇到这样的问题，combobox到固定的流程
Extjs让combobox写起来简洁又漂亮
10-20
代码看起来简洁又漂亮是如何做到的，这篇文章主要为大家详细介绍了Extjs如何让combobox写起来更简单，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
extjs4.1 grid columns处理几个小问题（第一：combobox 中的store带参数到后台，第二model数据是一个object）
zhengyuechuan的专栏
07-15 7208
第一个问题：combobox中的store可以通过带参数来区分。 Ext.define("zyc.view.test.ComboboxStoreParam",{ extend:'Ext.panel.Panel', title : '测试',//标题 alias: 'widget.comboboxstoreparam', frame :
extjs combobox下拉框显示位置问题
东亮博客
03-18 5407
问题描述:(下拉框显示的不在combobox的下端) 问题代码: {                     //baseCls:"x-plain",//强制与颜色 匹配               layout:"form",               labelWidth:55,               columnWidth:.14,
extjs4 ComboBox 动态加载，联动，设置默认值，锁定等
luodaoren1984的专栏
09-19 5020
最近在搞EXTJS，当然就会碰到ComboBox 默认值的问题，结果在网上找了一堆，没有一个w
extjs中combox的细节问题
weixin_34077371的博客
02-16 85
在combox中，ComboBox的 id和 hiddenId 必须是不同的， 因为不应该有两个DOM节点共用一个相同的id。 所以，如果ComboBox的 name 和 hiddenName是相同的，你必须指定一个唯一的 hiddenId 。 写代码的时候没有注意这个细节，选中下拉菜单的内容后，值一直显示不出来，找了好长时间才发现是这个问题。 xtype:'combo...
ExtJs 4.x 学习小记：使用FieldSet进行查询面板的布局
bdmh的专栏
04-10 6120
效果 为了tu
无废话ExtJs 入门教程十一[下拉列表：Combobox]
weixin_30952103的博客
06-23 115
继上一节内容，我们在表单里加了个一个下拉列表： 1.代码如下： 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://ww...
ExtJS-----ComboBox(完整事例演示)||有一bug
wangzhiyuande的专栏
08-14 3286
html： Combobox三级联动的实例 .center{ width:800px; height:400px; border:3px solid#FF1493; margin:10px auto; }
王超深度解析：ExtJS布局模式详解（Border、Form、column等）
- Ext.layout.BorderLayout是ExtJS中的一个核心布局方式，它将容器划分为五个区域（东east、南south、西west、北north和中心center），通过`region`属性指派子元素到特定区域。例如： ``` var viewport = new Ext...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值