extjs布局，layout使用方法，extjs左右布局，extjs多表格布局。
使用版本ext-4.2.1-gpl，官网直接有下载的。
html代码：
<!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代码：
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: '包装台',
split: true,
width: '20%',
minWidth: 100,
minHeight: 140,
bodyPadding: 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:''}]
})]
}]
});
});
代码查看附件。
相关推荐
标题中的"Extjs4.1 小例子"意味着这个压缩包包含了一些基础的示例代码，旨在帮助初学者快速入门。通过这些小例子，你可以了解如何使用ExtJS 4.1来创建用户界面，包括布局管理、组件系统、数据绑定、事件处理等核心...
文件"ExtJS 实用简明教程.pdf"很可能是这个中文教程的一部分，或者是一个独立的简明指南，它可能包含了一些关键概念的快速入门、重要组件的使用方法，以及一些实用技巧。PDF格式使得你可以离线阅读，方便随时查阅。 ...
### ExtJs2.0入门实例知识点详解 #### 1. Ext.MessageBox - **Ext.MessageBox.alert()** - **用途**: 显示一个简单的警告框。 - **参数**: - `title` (必需): 弹出框的标题。 - `msg` (必需): 显示的信息。 ...
本实例将帮助初学者了解如何使用ExtJS入门，并通过提供的资源文件学习如何改变文件的颜色。 首先，我们要明白在ExtJS中改变文件颜色主要涉及到CSS样式和组件的配置。ExtJS的组件如按钮、表格、面板等都可以通过CSS...
总的来说，"extJS 一些简单实例"这个主题涵盖了使用ExtJS进行Web开发的基础知识，包括组件、数据绑定、应用配置等方面，适合初学者入门和进阶者巩固。通过学习和实践这些实例，开发者可以掌握创建交互式Web界面的...
5. **ExtJS入门**：熟悉ExtJS的基本架构，包括组件、布局和数据管理。 6. **ExtJS组件**：了解如何使用GridPanel、FormPanel、Button等组件构建用户界面。 7. **Ajax与ExtJS结合**：学习如何利用ExtJS的Ajax API...
Extjs基础入门系列: 第一讲.ExtJs初识及其环境搭建 第二讲.开始ExtJs梦想之旅 第三讲.ExtJS工具栏、菜单栏 第四讲.ExtJS最常用的表单之textfield控件 第五讲.ExtJs最常用表单组件Number、CheckBox、Radio 第...
1、基于ExtJS 5.1版本实现，采用Neptune样式风格，中文语言； 2、使用全新的MVVM模式架构，面向对象写法； 3、全系统只有一个index.html界面，登录框也封装成独立的视图组件； 4、通过实现角色管理、用户管理两个...
"EXT最强最实用入门实例"很可能是针对EXTJS初学者的一份教程，旨在帮助他们快速掌握EXTJS的基础知识和实践技巧。 EXTJS采用三层数据结构，这三层分别是数据层（Data Layer）、表示层（Presentation Layer）和业务...
8. **ExtJS入门教程(超级详细)**： 这可能是全面的ExtJS 3.x教程，涵盖了从基础到进阶的所有内容，包括组件体系、布局管理、数据绑定、AJAX通信、事件处理等。 通过深入学习以上知识点，你将能够熟练地运用ExtJS 3...
#### Extjs4入门实例分析 为了更好地理解和掌握ExtJS，下面将通过一个简单的示例来演示如何使用ExtJS构建一个基本的Web应用程序。 假设我们要创建一个包含文本框和按钮的简单表单，当点击按钮时，文本框中的内容会...
在ExtJS中，视图通常是`Ext.container.Container`或其子类的实例，用于布局和组织UI元素。 Controller（控制器）：作为模型和视图之间的桥梁，处理用户的交互事件，更新模型数据，同时也响应模型的变化来更新视图。...
入门实例和代码解析** 一个简单的“Hello, World”程序是学习任何新语言或框架的良好起点。在Ext Js中，我们可以创建一个基本的窗口显示欢迎信息。以下是一个示例代码： ```javascript Ext.onReady(function() { ...
这份"Extjs 4.0 源码说明文档入门手册 和示例"是学习和理解ExtJS 4.0核心概念和工作原理的重要资源。 源码分析： 在`ext-4.0.0`目录中，你将找到ExtJS 4.0的核心源代码。这些文件主要分为以下几个部分： 1. `src`...
`store`配置项用于关联数据存储，通常为`Ext.data.Store`实例。网格还支持排序、分页和行编辑等功能。 **三、树形视图（Tree）** 树形视图用于显示层次结构的数据。在ExtJS中，使用`Ext.tree.Panel`创建树。`...