木禾讲解Ext JS界面设计（布局,xtype,items,vbox,form,column）

关键词：

xtype,items,vbox,hbox,anchor,defaults,padding,frame,ui,form,column,

实例一：

要做成的界面如下：



1，那么第一步，就是先划分大的版块，如下，因为大体是以行为主，所以先分行。同时关注到左上角是有标签页，是更大的版块。总体思想是大涵盖小的来划分。



2，第二步，划每个大版块里的小版块。像这里是下面的一行分成了两块。



3，第三步，划分完后，就可以开始写了，写的时候就是一个items一个items地一层一层地往下写。写的时候再去看他的样式，慢慢调。上面的代码如下。

1）首先是标签页，他最大。

padding: "2 0 0 0",//边框距离外部的距离，四个数字分别对应上右下左
xtype: 'tabpanel',  //这个就是标签页类型了！
plain: true,//简单的纯色样式
region: 'center',
//margins: '0 5 5 5',//内部间距
activeTab: 0,
items: [
//------------innertab1----------
{

},
//-------------innertab2------------
poHeader //因为有在其它地方定义了这个页面里的内容，这里直接写定义的函数名即可。
]

2）接下来是这两个行。

padding: "2 0 0 0",
xtype: 'tabpanel',
plain: true,//简单的纯色样式
region: 'center',
//margins: '0 5 5 5',//内部间距
activeTab: 0,
items: [
//------------innertab1----------
{
title:'红包方案',//第一个标签页的名字
layout: {
type: 'vbox', //垂直盒子 //就是以行形式排列的布局，平时用到的行的有“vbox”和“form”,列的有“hbox”“column”，各个的用法都有所以不同，请自行百度。
align: 'stretch', //布满
pack: 'start' //从上面开始
},
items: [
{},//这里两个花括号就是要写的行的内容。
{}
]
},
//-------------innertab2------------
poHeader
]

3）接下来是再写下一层。

padding: "2 0 0 0",
xtype: 'tabpanel',
plain: true,//简单的纯色样式
region: 'center',
//margins: '0 5 5 5',//内部间距
activeTab: 0,
items: [
//------------innertab1----------
{
title:'红包方案',
layout: {
type: 'vbox', //垂直盒子
align: 'stretch', //布满
pack: 'start' //从上面开始
},
items: [
{
flex:6,//flex是用于vbox或hbox的，用于两个框的占比。如这里的6和下面的4，就说明这个框占比6/10,下面的框占比4/10。
layout: 'fit',//fit就是铺满的意思，因为这个框里就只要放满一个内容所以就铺满。
items: [
rppHeader//放的内容，已经在别的地方定义好了。
]
},
{
flex:4,
layout: {
type: 'hbox',//水平盒子，用于这里成列的排布。
align: 'stretch'
},
items: [
lrpHeader,
suHeader

]
}
]
},
//-------------innertab2------------
poHeader
]

实例二：

要做这个，主要介绍表格的上面部分。



1，第一步，大的行先划分了，如下。

border: false,
layout: {
type: 'vbox', //垂直盒子
align: 'stretch', //布满
pack: 'start' //从上面开始
},
//default: { flex: 3 },
items: [
//最上面
{
layout: 'anchor',
autoheight: true,
padding: '2 0 0 5',
frame: true,
ui: 'light',
items: warehouseInfoPanel
},
//中间层
{
height:240,//这里定义了总高度
layout: {
type: 'vbox', //垂直盒子
align: 'stretch',//布满
pack: 'start'//从上面开始
},
frame: true,
ui: 'light',
defaults: {
flex: 3
},
items: [
warehouseOrder,
warehouseOrderDetail
]

},
//下面仓库
stockOccupancy
]

2，第二步，针对最上面部分，我们进行细致划分。先分行，再分一个一个的列。

(1)分form:



(2)然后分column:



如上面两图，先分行，因为这样一行的列比较多，也可以先分列，但先分行代码写起来明显比先分列简便。

要先注意到，上面引用之前是写了xtype为anchor,所以接下来这两行可以使用anchor的属性，如anchor:’-50 -50’,anchor:’80%’之类的东西。

items: [
//第一行
{
padding: '5px',  //这个框四边都跟别人相距5个元素
anchor: '-50 -50', //高度等于容器高-50，宽度=容器宽度-50
layout: "column",      //这里是写分列用的，不用hbox，因为这里想要用到columnwidth
defaults: {      //这里写了默认属性，相当于让下面的items里的所有｛｝里具有了这个属性，这样就可以不用一个个去加。
labelWidth: 60,//此为各标签前面文字的宽度。
columnWidth: .16,//此为各标签的宽度百分比，用这个可以使各个标签相接近。
padding: '2 5 2 5'//此为各的标签的四边的对外距离。
},
defaultType: 'displayfield',//这里使得各个字段文本显示为无框文本。
items: [
//第一行内容
]
},
//第二行
{
padding: '5px',
anchor: '-50 -50',
layout: "column",
defaults: {
labelWidth: 60,//此为各标签前面文字的宽度。
columnWidth: .16,//此为各标签的宽度百分比，用这个可以使各个标签相接近。
padding: '2 5 2 5'//此为各的标签的四边的对外距离。
},
defaultType: 'displayfield',
items: [
//第二行内容
]
}
]

3，这两行完整的代码如下

items: [
//第一行
{
padding: '5px',
anchor: '-50 -50',
layout: "column",
defaults: {
labelWidth: 60,//此为各标签前面文字的宽度。
columnWidth: .16,//此为各标签的宽度百分比，用这个可以使各个标签相接近。
padding: '2 5 2 5'//此为各的标签的四边的对外距离。
},
defaultType: 'displayfield',
items: [
{
id: 'WHID',
name: 'WHID',
fieldLabel: '序号',
labelWidth: 30,
allowBlank: false,
hidden: true
},
warecombox,

{
id: 'WareHouseName',
name: 'WareHouseName',
value: record.get('WareHouseName'),
fieldLabel: '仓库名称'
},
{
id: 'WareHouseCategory',
name: 'WareHouseCategory',
value: record.get('WareHouseCategory'),
fieldLabel: '仓库类别'
},
{
id: 'OrgStructure',
name: 'OrgStructure',
value: record.get('OrgStructure'),
fieldLabel: '组织结构'
},
{
id: 'RealOrderNum',
name: 'RealOrderNum',
value: record.get('RealOrderNum'),
fieldLabel: '现存订单'
}
]
},
//第二行
{
padding: '5px',
anchor: '-50 -50',
layout: "column",
defaults: {
labelWidth: 60,//此为各标签前面文字的宽度。
columnWidth: .16,//此为各标签的宽度百分比，用这个可以使各个标签相接近。
padding: '2 5 2 5'//此为各的标签的四边的对外距离。
},
defaultType: 'displayfield',
items: [
{
id: 'InvCapacity',
name: 'InvCapacity',
fieldLabel: '库存容量',
value: record.get('InvCapacity'),
allowBlank: false,
anchor: '100%'
},
{
id: 'LockCapacity',
name: 'LockCapacity',
fieldLabel: '锁定容量',
value: record.get('LockCapacity'),
allowBlank: false,
anchor: '100%'
},
{
id: 'RealUseCapacity',
name: 'RealUseCapacity',
value: record.get('RealUseCapacity'),
fieldLabel: '实际占用'
},
{
id: 'RemainCapacity',
name: 'RemainCapacity',
value: record.get('RemainCapacity'),
fieldLabel: '剩余容量'
},
{
id: 'PlanOrderNum',
name: 'PlanOrderNum',
value: record.get('PlanOrderNum'),
fieldLabel: '预排订单'
}
]
}
]

讲完了，相信大家会做了。有什么问题可以邮箱或V信交流~

邮箱：1750956847@qq.com.