表单布局 tableLayout与columnLayout 及文本框跨列

最新推荐文章于 2021-09-01 15:16:19 发布

fireinjava

最新推荐文章于 2021-09-01 15:16:19 发布

阅读量484

点赞数

分类专栏： Ext 文章标签： EXT

Ext 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

var objCd = new Ext.form.TextField({
	fieldLabel : '对象编码',
	name : 'param.objCd',
	allowBlank : true,
	width : 100
});
var formPanel = new Ext.form.FormPanel({
	layout : 'form',// 可不写,默认
	items : [
			 {
				layout : 'column',
				items : [{
							columnWidth : .3,
							layout : 'form',
							items : [id, statusTime, level1Id,nodeType, objId]
						 },
						 {
							columnWidth : .3,
							layout : 'form',
							items : [cd, createTime, levelNum, treeId,objCd]
						  },
						  {
							columnWidth : .3,
							layout : 'form',
							items : [status, updateTime, superId,
							objType]
						 }]
			 },
			 name,
			 memo]
		})

 var formPanel = new Ext.form.FormPanel({
    	layout : 'table',
  	layoutConfig : {
  	 	columns : 3
 	 },
  	defaults : {
   		layout:'form'
  	},
  	items : [
    		{ items : [id]}
   		,{ items : [cd]}
  		 ,{ items : [status]}
   		,{ items : [statusTime]}
   		,{ items : [createTime]}
  		 ,{ items : [updateTime]}
  		 ,{ items : [level1Id]}
  		 ,{ items : [levelNum]}
   		,{ items : [superId]}
   		,{ items : [nodeType]}
   		,{ items : [treeId]}
   		,{ items : [objType]}
   		,{ items : [objId]}
  		 ,{ items : [objCd]}
  		 ,{ items : []}
   		,{ items : [name], colspan : 3}
  		 ,{ items : [memo], colspan : 3}
  		]
  	,buttons : [btnSave,btnClose]
	 });

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

注意：width:300,变大了.

var objCd = new Ext.form.TextField({
	fieldLabel : '对象编码',
	name : 'param.objCd',
	allowBlank : true,
	width : 300
});
var formPanel = new Ext.form.FormPanel({
	layout : 'form',// 可不写,默认
	items :[{
			layout : 'column',
			items  :[
					{
						columnWidth : .3,
						layout : 'form',
						items : [id,statusTime,level1Id,nodeType]
					 },
					{
						columnWidth : .3,
						layout : 'form',
						items : [cd,createTime,levelNum,treeId]
					 },
					{
						columnWidth : .3,
						layout : 'form',
						items : [status,updateTime,superId,objType]
					 }
					]
		},
		{
		 layout : 'column',
		 items  :[
		 		 {
						columnWidth : .3,
						layout : 'form',
						items : [objId]
				 },
				 {
						columnWidth : .7,
						layout : 'form',
						items : [objCd]
				 }]
		},
		name,
		memo]
})