学习ExtJS fit布局使用说明

学习ExtJS fit布局使用说明

摘要：一、Fit布局，子元素将自动填满整个父容器（对元素设置宽度无效），如果容器组件中有多个子元素，则只会显示第一个子元素。二、应用举例复制代码代...

一、Fit布局，子元素将自动填满整个父容器（对元素设置宽度无效），如果容器组件中有多个子元素extjs layout fit，则只会显示第一个子元素。

二、应用举例

复制代码 代码如下:

Ext.((){

new Ext.Panel({

:Ext.(),

title:"容器组件",

:"fit",

width:500,

:100,

items:

{title:"子元素1",html:"这是子元素1中的内容"},

{title:"子元素2",html:"这是子元素2中的内容"}

);

});

一、布局由类Ext..定义，布局名称为。该布局把容器分成东南西北中五个区域，分别由east，south, west，north, cente来表示，在往容器中添加子元素的时候extjs layout fit，我们只需要指定这些子元素所在的位置，布局会自动把子元素放到布局指定的位置。

二、应用举例

复制代码 代码如下:

Ext.((){

new Ext.({

:"",

items:

{:"north",

:50,

title:"顶部面板"},

{:"south",

:50,

title:"底部面板"},

{:"",

title:"中央面板"},

{:"west",

width:100,

title:"左边面板"},

{:"east",

width:100,

title:"右边面板"}

});

});

一、 Form布局由类Ext..定义学习ExtJS fit布局使用说明，名称为formextjs layout fit，是一种专门用于管理表单中输入字段的布局，这种布局主要用于在程序中创建表单字段或表单元素等使用。

：tru表示隐藏标签，默认为false。

：标签队齐方式left、right、,默认为left。

复制代码 代码如下:

Ext.((){

var = new Ext.Panel({

title:"人员信息",

:Ext.(),

frame:true,

width:500,

:300,

:"form",

:false,

:"right",

:120,

: '',

items:

{:"姓名",name:"name"},

{:"请输入地址",name:""},

{:"请输入电话",name:"tel"}

);

二、在实际应用中，Ext.form.这个类默认布局使用的是Form布局学习ExtJS fit布局使用说明，因此我们直接使用即可。上面的例子可改写成如下的形式：

复制代码 代码如下:

Ext.((){

var = new Ext.({

title:"人员信息",

:Ext.(),

frame:true,

width:500,

:300,

:false,

:"right",

:120,

: '',

items:

{:"姓名",name:"name"},

{:"请输入地址",name:""},

{:"请输入电话",name:"tel"}

);