extjs layout, layout usage, extjs left and right layout, extjs multi-table layout.
Use version ext-4.2.1-gpl, which can be downloaded directly from the official website.
html code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Border Layout Example</title>
<!-- GC -->
<style type="text/css">
.big-glyph {
font-size: 20px !important;
width: 20px !important;
height: 20px !important;
line-height: 20px !important;
margin-top: 2px;
}
.ux-arrow {
cursor: pointer;
}
.ux-arrow-over {
color: red;
}
.ux-arrow-current-north .ux-arrow-up,
.ux-arrow-current-south .ux-arrow-down,
.ux-arrow-current-east .ux-arrow-right,
.ux-arrow-current-west .ux-arrow-left {
color: #c0c0c0;
cursor: not-allowed;
}
</style>
<script type="text/javascript" src="../../examples/shared/include-ext.js"></script>
<script type="text/javascript" src="../../examples/shared/options-toolbar.js"></script>
<script type="text/javascript" src="border.js"></script>
</head>
<body></body>
</html>
js code:
Ext.require(['*']);
Ext.onReady(function() {
Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
function closeRegion (e, target, header, tool) {
var panel = header.ownerCt;
newRegions.unshift(panel.initialConfig);
viewport.remove(panel);
}
var newRegions = [{
region: 'north',
title: 'North 2',
height: 100,
collapsible: true,
weight: -120
}, {
region: 'east',
title: 'East 2',
width: 100,
collapsible: true,
weight: -110
}, {
region: 'west',
title: 'West 2',
width: 100,
collapsible: true,
weight: -110
}];
var viewport = Ext.create('Ext.Viewport', {
layout: {
type: 'border',
padding: 5
},
defaults: {
split: true
},
items: [{
region: 'west',
collapsible: true,
layout: 'absolute',
title: 'Packaging table',
split: true,
width: '20%',
minWidth: 100,
minHeight: 140,
body padding: 10,
stateId: 'westRegion',
stateful: true,
html: '',
items: [Ext.create('Ext.grid.Panel',{
id:'westGrid',
columns:[{text:'岗位名称', dataIndex:'postName', width:125},{text:'工作人员', dataIndex:'workName', width:125}]
})]
},{
region: 'center',
html: '',
title: '扫描查找',
minHeight: 80,
items: [Ext.create('Ext.form.Panel',{
id:'saomiaoGrid',
layout: 'hbox',
defaults: {
border: false,
xtype: 'panel',
flex: 1,
layout: 'anchor'
},
buttons: ['->', {
text: '封箱'
}, {
text: '打印面单'
}, {
text: '下一包裹'
}],
items: [{
items: [{
xtype: 'textfield',
fieldLabel: '作业单号',
anchor: '30',
name: ''
},{
xtype: 'textfield',
fieldLabel: '箱号',
anchor: '30',
name: ''
},{
xtype: 'textfield',
fieldLabel: '承运商',
anchor: '30',
name: ''
},{
xtype: 'textfield',
fieldLabel: '集货库位',
anchor: '30',
name: ''
}]
},{
items: [{
xtype: 'textfield',
fieldLabel: '格子号',
anchor: '30',
name: ''
},{
xtype: 'textfield',
fieldLabel: '面单号',
anchor: '30',
name: ''
},{
xtype: 'textfield',
fieldLabel: '运输方式',
anchor: '30',
name: ''
},{
xtype: 'textfield',
fieldLabel: '系统重量',
anchor: '30',
name: ''
}]
},{
items: [{
xtype: 'textfield',
fieldLabel: '是否印花',
anchor: '30',
name: ''
},{
xtype: 'textfield',
fieldLabel: '拣货单号',
anchor: '30',
name: ''
},{
xtype: 'textfield',
fieldLabel: '发货单号',
anchor: '30',
name: ''
}]
}]
})]
},{
region: 'south',
height: 200,
split: true,
collapsible: true,
title: '扫描中',
minHeight: 60,
html: '',
weight: -200,
items: [Ext.create('Ext.grid.Panel',{
id:'southGrid1',
columns:[{text:'序号', dataIndex:''},{text:'货品编码', dataIndex:''},{text:'货品名称', dataIndex:''},{text:'包装重量', dataIndex:''},{text:'包装体积', dataIndex:''},{text:'分配数量', dataIndex:''},{text:'拣货数量', dataIndex:''},{text:'已包装数量', dataIndex:''},{text:'未包装数量', dataIndex:''},{text:'当前包装数量', dataIndex:''},{text:'款', dataIndex:''},{text:'色', dataIndex:''},{text:'码', dataIndex:''}]
})]
},{
region: 'south',
height: 200,
split: true,
collapsible: true,
title: '货品信息',
minHeight: 60,
html: '',
weight: -200,
items: [Ext.create('Ext.grid.Panel',{
id:'southGrid2',
columns:[{text:'序号', dataIndex:''},{text:'货品编码', dataIndex:''},{text:'货品名称', dataIndex:''},{text:'包装重量', dataIndex:''},{text:'包装体积', dataIndex:''},{text:'分配数量', dataIndex:''},{text:'拣货数量', dataIndex:''},{text:'已包装数量', dataIndex:''},{text:'未包装数量', dataIndex:''},{text:'当前包装数量', dataIndex:''},{text:'款', dataIndex:''},{text:'色', dataIndex:''},{text:'码', dataIndex:''}]
})]
}]
});
});
代码查看附件。