ExtJS 的9种布局详解8(三)

最新推荐文章于 2025-12-23 22:21:31 发布

原创最新推荐文章于 2025-12-23 22:21:31 发布 · 151 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#extjs #html #function #layout #table

本文详细介绍了ExtJS中fit、form及table三种布局方式的特点及应用实例。fit布局使子元素充满容器；form布局专为表单设计，方便字段管理；table布局按普通表格方式展示子元素，便于创建复杂表格。

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

例一：

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

Js代码

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

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，代码如下：

Js代码

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

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

八、form

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

Js代码

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();
});

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列

例一：

Js代码

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(){ 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:''} ] }); });

Js代码

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

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

上面的代码指定父容器使用Fit布局，因此子将自动填满整个父容器。