ExtJS layout的9种样式详解(三)

七、fit 一个子元素将充满整个容器(如果多个子元素则只有一个元素充满整个容器)

例一:



 

 例二: 如果容器组件中有多个子元素,则只会显示一个元素,如下面的代码:

Ext.onReady(function(){
new Ext.Panel({
		renderTo:"hello",
		title:"容器组件",
		layout:"fit",
		width:500,
		height:100,
		items:[{title:"子元素1",html:"这是子元素1中的内容"},
			{title:"子元素2",html:"这是子元素2中的内容"}
		]
	});
});

 

 

例三:如果不使用布局Fit,代码如下:

Ext.onReady(function(){
	new Ext.Panel({
		renderTo:"hello",
		title:"容器组件",
		width:500,
		height:200,
		items:[{title:"子元素1",html:"这是子元素1中的内容"},
				{title:"子元素2",html:"这是子元素2中的内容"}
		]
	});
});

 

 

八、form 是一种专门用于管理表单中输入字段的布局

Ext.onReady(function() {   
	var win = new Ext.Window({   
		title: "form Layout",   
		height: 150,   
		width: 230,   
		plain: true,   
		bodyStyle: 'padding:15px',   
		items:{   
			xtype: "form",   
			labelWidth: 30,   
			defaultType: "textfield",   
			frame:true,   
			items:[   
				{   
					fieldLabel:"姓名",   
					name:"username",   
					allowBlank:false //必填项(非空)  
				},   
				{   
					fieldLabel:"呢称",   
					name:"nickname"   
				},   
				{   
					fieldLabel: "生日",   
					xtype:'datefield',   
					name: "birthday",   
					width:127  
				}   
			]   
		}   
	});   
	win.show();   
});

 

 

九、table 按照普通表格的方法布局子元素,用layoutConfig:{columns:3},//将父容器分成3

例一:

Ext.onReady(function(){   
	var panel=new Ext.Panel( {   
       renderTo:'hello',   
       title:'容器组件',   
       layout:'table',          
       width:500,   
       height:200,   
       layoutConfig:{columns:3},//将父容器分成3列   
       items:[   
        {title:'元素1',html:'ssssssssss',rowspan:2,height:100},   
        {title:'元素2',html:'dfffsddsdfsdf',colspan:2},   
        {title:'元素3',html:'sdfsdfsdf'},   
        {title:'元素4',html:''}   
       ]   
	});   
});  

 

 

 

Ext.onReady(function(){
	new Ext.Panel({
		renderTo:"hello",
		title:"容器组件",
		layout:"fit",
		width:500,
		height:100,
		items:[{title:"子元素",html:"这是子元素中的内容"}]
	});
});

 

上面的代码指定父容器使用Fit布局,因此子将自动填满整个父容器。输出的图形如下:012

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值