Extjs4中的布局
title: 'Panel 1',
html: 'Panel 1',
height: 60,
width: 100
title: 'Panel 2',
height: 80,
width: 60
title: 'Panel 3',
html: 'Panel 3',
height: 65,
title: 'Panel 4',
html: 'Panel 4',
height: 70,
title: 'Auto Layout',
width: 100,
height: 320,
//layout:'auto',
defaults: {
bodyStyle: 'padding:15px'
},
.png)
title: 'Panel 1',
html: '100% 30%',
anchor:'100% 30%'
title: 'Panel 2',
html: '80% 25%',
title: 'Panel 3',
html: '-70 20%',
title: 'Panel 4',
html: '-30 25%',
title: 'Anchor Layout',
width: 250,
height:300,
layout:'anchor',
defaults: {
bodyStyle: 'padding:10px'
},
- 80等正数表示子元素离父容器左内边框、上内边框的距离；
- -30等负数表示子元素离父容器右内边框、下内边框的距离；
- 80%等百分数表示子元素占父容器宽度、高度的百分比。注意：对于高度使用百分比值时，每个子元素的最终的值都是“百分比*父容器的高度”。
.png)
var panel1 = Ext.create('Ext.panel.Panel', {
title: 'Panel 1',
html: 'x: 10; y: 10 - anchor: 80% 80%', /*this config option will display the given text inside the panel*/
anchor:'80% 80%',
x: 10,
y: 10
title: 'Absolute Layout',
width: 300,
height: 200,
layout:'absolute',
defaults: {
bodyStyle: 'padding:10px'
},
.png)
var panel1 = Ext.create('Ext.panel.Panel', {
title: 'Panel 1',
html: 'Panel 1', //this text will be displayed on the panel body
flex: 1
});
var panel2 = Ext.create('Ext.panel.Panel', {
title: 'Panel 2',
html: 'Panel 2', //this text will be displayed on the panel body
flex: 3
var hbox = Ext.create('Ext.window.Window', {
title: 'HBox Layout',
width: 300,
height:100,
layout: {
type: 'hbox',
align: 'stretch'
},
defaults: {
bodyStyle: 'padding:10px'
},
items: [panel1, panel2]
});
.png)
var panel1 = Ext.create('Ext.panel.Panel', {
title: 'Panel 1',
html: 'Panel 1',
flex: 2
});
var panel2 = Ext.create('Ext.panel.Panel', {
title: 'Panel 2',
html: 'Panel 2',
flex: 1
});
var vbox = Ext.create('Ext.window.Window', {
title: 'VBox Layout',
width: 82,
height: 300,
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
bodyStyle: 'padding:15px'
},
items: [panel1, panel2]
});
.png)
var panel1 = Ext.create('Ext.panel.Panel', {
title: 'Panel 1',
html: '<b>Panel 1</b>'
});
var panel2 = Ext.create('Ext.panel.Panel', {
title: 'Panel 2',
html: '<b>Panel 2</b>'
var panel3 = Ext.create('Ext.panel.Panel', {
title: 'Panel 3',
html: '<b>Panel 3</b>'
});
var panel4 = Ext.create('Ext.panel.Panel', {
title: 'Panel 4',
html: '<b>Panel 4</b>'
});
var panel5 = Ext.create('Ext.panel.Panel', {
title: 'Panel 5',
html: '<b>Panel 5</b>'
});
var accordion = Ext.create('Ext.window.Window', {
title: 'Accordion Layout',
margins:'5 0 5 5',
split:true,
width: 210,
height:250,
layout:'accordion',
defaults: {
bodyStyle: 'padding:35 15 0 50'
},
items: [panel1, panel2, panel3, panel4, panel5]
.png)
var table = Ext.create('Ext.window.Window', {
title: 'Table Layout',
width: 250,
height: 200,
layout: {
type: 'table',
columns: 3,
tableAttrs: {
style: {
width: '100%',
height: '100%'
}
}
},
defaults: {
bodyStyle: 'padding:10px'
},
html:'Cell 1',
rowspan: 3 //this cell will span 3 rows
},{
html:'Cell 2'
},{
html:'Cell 3'
},{
html:'Cell 4'
},{
html:'Cell 5'
},{
html:'Cell 6',
colspan: 2 //this cell will span 2 columns
html:'Cell 7'
},{
html:'Cell 8'
},{
html:'Cell 9'
}]
});
.png)
title: 'Panel 1',
html: '.25',
});
var panel2 = Ext.create('Ext.panel.Panel', {
title: 'Panel 2',
html: '.25',
columnWidth: .25 //means 25%
});
var panel3 = Ext.create('Ext.panel.Panel', {
title: 'Panel 3',
html: '1/2',
columnWidth: 1/2 //means 50%
});
var column = Ext.create('Ext.window.Window', {
title: 'Column Layout',
width: 400,
layout:'column',
defaults: {
height: 60,
bodyStyle: 'padding:10px'
},
items: [panel1, panel2, panel3]
});
.png)
title: 'Panel 1',
bodyStyle: 'padding:15px',
html: 'Fit Content'
});
var fit = Ext.create('Ext.window.Window', {
title: 'Fit Layout',
width: 100,
height: 150,
items: [panel1]
});
fit.show();
.png)
title: 'Card Layout',
width: 400,
height: 200,
layout: 'card',
activeItem: 0,
bodyStyle: 'padding:70 50 0 150',
defaults: {
border:false
},
bbar: [{
id: 'prevButton',
text: 'Preivous Step',
handler: navHandler,
disabled: true
},
'->',
{
id: 'nextButton',
text: 'Next Step',
handler: navHandler
}],
items: [{
html: '<p>Step 1 of 3</p>'
},{
html: '<p>Step 2 of 3</p>'
},{
html: '<p>Step 3 of 3</p>'
}]
});
card.show();
var navHandler = function(btn) {
var activeItem = card.layout.activeItem;
var active = card.items.indexOf(activeItem);
if (btn.id == 'nextButton') {
active += 1;
}
else if (btn.id == 'prevButton') {
active -= 1;
}
card.layout.setActiveItem(active);
var prev = card.dockedItems.items[1].items.items[0];
var next = card.dockedItems.items[1].items.items[2];
if (active == 0){
prev.setDisabled(true);
} else if (active == 1){
prev.setDisabled(false);
next.setDisabled(false);
} else if (active == 2){
next.setDisabled(true);
}};
width: 700,
height: 500,
title: 'Border Layout',
layout: 'border',
defaults:{
xtype: 'panel'
},
items: [{
title: 'North Region is resizable',
region: 'north',
height: 100,
split: true
},{
title: 'South Region is resizable',
region: 'south',
height: 100,
split: true
},{
title: 'West Region is collapsible',
region:'west',
width: 200,
collapsible: true,
layout: 'fit'
},{
title: 'East Region is collapsible',
region:'east',
width: 200,
collapsible: true,
layout: 'fit'
},{
title: 'Center Region',
region: 'center',
layout: 'fit'
}]
});
border.show();
var html = '<div style="padding:10px;"><h1><center><span>Body</ center></h1></div>';
var panel1 = new Ext.Panel({
collapsible:true,
width:400,
renderTo: 'ext3-panel',
title: 'Ext 3 Panel - Header',
html: html,
tbar: new Ext.Toolbar({
items: [{
type: 'button',
text:'Button - Top Toolbar'
}]
}),
bbar: new Ext.Toolbar({
items: [{
type: 'button',
text:'Button - Bottom Toolbar'
}]
}),
fbar: new Ext.Toolbar({
items: [{
type: 'button',
text:'Button - Footer Toolbar'
}]
})
});
collapsible:true,
width:400,
renderTo: 'ext4-panel',
title: 'Ext 4 Panel - Header',
html: html,
tbar: Ext.create('Ext.toolbar.Toolbar',{
items: [{
type: 'button',
text:'Button - Top Toolbar'
}]
}),
bbar: Ext.create('Ext.toolbar.Toolbar',{
items: [{
type: 'button',
text:'Button - Bottom Toolbar'
}]
}),
fbar: Ext.create('Ext.toolbar.Toolbar',{
items: [{
type: 'button',
text:'Button - Footer Toolbar'
}]
})
});
collapsible:true,
width:400,
border:true,
renderTo: 'ext4-panel2',
title: 'Ext 4 Panel - Header',
headerPosition: 'top',
html: html,
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [{
xtype: 'button',
text: 'Button - Top Toolbar'
}]
},{
xtype: 'toolbar',
dock: 'bottom',
items: [{
xtype: 'button',
text: 'Button - Bottom Toolbar'
}]
},{
xtype: 'toolbar',
dock: 'bottom',
items: [{
xtype: 'component',
flex: 1 //will occupy 100% of the width of the panel
},{
xtype: 'button',
text: 'Button - Footer Toolbar'
}]
}]
});
在Extjs4中Header已经独立成为Panel下的一个子组件了，所属类为Ext.panel.Header。我们可以设置Header的位置（top、bottom、left和right）
width:500,
renderTo: 'ext4-panel-tools',
html: html,
title: 'Tools - Header',
tools: [{
type: 'close',
handler: function(){} //some logic inside handler
},{
type: 'collapse',
handler: function(){} //some logic inside handler
},{
type: 'down',
handler: function(){} //some logic inside handler
},{
type: 'expand',
handler: function(){} //some logic inside handler
},{
type: 'gear',
handler: function(){} //some logic inside handler
},{
type: 'help',
handler: function(){} //some logic inside handler
},{
type: 'left',
handler: function(){} //some logic inside handler
},{
type: 'maximize',
handler: function(){} //some logic inside handler
},{
type: 'minimize',
handler: function(){} //some logic inside handler
},{
type: 'minus',
handler: function(){} //some logic inside handler
},{
type: 'next',
handler: function(){} //some logic inside handler
},{
type: 'pin',
handler: function(){} //some logic inside handler
},{
type: 'plus',
handler: function(){} //some logic inside handler
},{
type: 'prev',
handler: function(){} //some logic inside handler
},{
type: 'print',
handler: function(){} //some logic inside handler
},{
type: 'refresh',
handler: function(){} //some logic inside handler
},{
type: 'restore',
handler: function(){} //some logic inside handler
},{
type: 'right',
handler: function(){} //some logic inside handler
},{
type: 'save',
handler: function(){} //some logic inside handler
},{
handler: function(){} //some logic inside handler
},{
type: 'unpin',
handler: function(){} //some logic inside handler
},{
type: 'up',
handler: function(){} //some logic inside handler
},{
// do search
owner.child('#refresh').show();
}
});
var simple = new Ext.FormPanel({
labelWidth: 75,
url:'save-form.php',
frame:true,
title: 'Form - Ext 3',
bodyStyle:'padding:5px 5px 0',
width: 350,
renderTo:'ext3-form',
defaults: {width: 230},
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank:false
},{
fieldLabel: 'Last Name',
name: 'last',
allowBlank:false
}
],
buttons: [{
text: 'Cancel'
}]
});
var simple = Ext.create('Ext.form.Panel', {
frame:true,
title: 'Form - Ext 4',
bodyStyle:'padding:5px 5px 0',
width: 350,
renderTo:'ext4-form',
fieldDefaults: {
msgTarget: 'side',
labelWidth: 75
},
anchor: '100%'
},
items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank:false
},{
fieldLabel: 'Last Name',
name: 'last',
allowBlank:false
}],
buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
frame:true,
title: 'Form - Ext 4',
bodyStyle:'padding:5px 5px 0',
width: 600,
renderTo:'ext4-form',
fieldDefaults: {
labelAlign: 'top',
msgTarget: 'side'
},
defaults: {
border: false,
xtype: 'panel',
flex: 1,
layout: 'anchor'
},
layout: 'hbox',
items: [{
items: [{
xtype:'textfield',
fieldLabel: 'First Name',
anchor: '-10',
name: 'first',
allowBlank:false
}, {
xtype:'textfield',
fieldLabel: 'Phone Number',
anchor: '-10',
name: 'phone',
allowBlank:false
}]
}, {
items: [{
xtype:'textfield',
fieldLabel: 'Last Name',
anchor: '100%',
name: 'last',
allowBlank:false
},{
Chapter 3
[ 137 ]
xtype:'textfield',
fieldLabel: 'Email',
anchor: '100%',
name: 'email',
vtype:'email'
}]
}],
buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
});
Extjs4中的布局的更多相关文章
- Extjs4中的常用组件：Grid、Tree和Form
至此我们已经学习了Data包和布局等API.下面我们来学习作为Extjs框架中我们用得最多的用来展现数据的Grid.Tree和Form吧! 目录: 5.1. Grid panel 5.1.1. Col ...
- Android Studio分类整理res/Layout中的布局文件(创建子目录)
res/layout中的布局文件太杂,没有层次感,受不了的我治好想办法解决这个问题. 前几天看博客说可以使用插件分组,可惜我没找到.知道看到另一篇博客时,才知道这个方法不能用了. 不能用插件,那就手动 ...
- 【HTML5&CSS3进阶学习02】Header的实现·CSS中的布局
前言 我们在手机上布局一般是这个样子的: 其中头部对整个mobile的设计至关重要,而且坑也很多: ① 一般来说整个header是以fixed布局,fixed这个产物在移动端来说本身坑就非常多 ② 在 ...
- JVM中，对象在内存中的布局
在hotSpot虚拟机中,对象在内存中的布局可以分成对象头.实例数据.对齐填充三部分. 对象头:主要包括: 1.对象自身的运行行元数据,比如哈希码.GC分代年龄.锁状态标志等,这部分长度在32位虚拟机 ...
- WPF中Grid布局
WPF中Grid布局XMAl与后台更改,最普通的登录界面为例. <Grid Width="200" Height="100" > <!--定义 ...
- android 非activity如何得到布局文件 （java文件中获取布局文件）
Android中得到布局文件对象有两种方式第一种,在Activity所在类中this.getLayoutInflater().inflater(R.layout.布局文件名,null);第二种,在非A ...
- Java中用户界面布局
绝对布局Absolute 通过放大或缩小界面的时候,组件大小和位置不会发生变化 浮动布局FlowLayout 调整应用程序窗口的大小时,组件将立刻重新排列 边界布局Border Layout 该位置有 ...
- 无废话Android之常见adb指令、电话拨号器、点击事件的4种写法、短信发送器、Android 中各种布局（1）
1.Android是什么 手机设备的软件栈,包括一个完整的操作系统.中间件.关键的应用程序,底层是linux内核,安全管理.内存管理.进程管理.电源管理.硬件驱动 2.Dalvik VM 和 JVM ...
- ExtJs4中的复选树级联选择
好久没有写新的博文了,过了个年休息了近一个月,人都懒散了.. 这几天要把项目中的几个模块有ext3升级到ext4,还要保持页面展示和功能要跟3.x版本的一样.升级并不是一件简单的是,基本相当于重写了, ...
随机推荐
- NSArray或NSDictionary中汉字输出
1.问题: NSArray *array = [NSArray arrayWithObjects:@"我",@"在",@"鼓楼", nil] ...
- jQuery仿百度帖吧头部固定不随滚动条滚动效果
<style> *{margin:0px;padding:0px;} div.nav{background:#000000;height:57px;line-height:57px;col ...
- GDB: basics
Before Debugging, generating the debugging info using gcc -g3 *.c/cpp; then gdb ~.out/exe using comm ...
- Apache + PHP in Windows XP (to add SQLite)
Firstly, Winxp do not support VC11+, so choose Apache packs compiled under VC10-. Before installatio ...
- ubuntu 常用命令记录
1.# 表示权限用户(如:root),$ 表示普通用户 开机提示:Login:输入用户名 password:输入口令 用户是系统注册用户成功登陆后,可以进入相应的用户环境. 退出当前shel ...
- margin:0 auto
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- CentOS下编译安装Apache(httpd)
官网下载最新版本的apache, apr, apr-util http://httpd.apache.org/download.cgi#apache24 http://apr.apache.org/d ...
- Roboguice学习之视图注入
Robuguide的使用 准备工作: 首先在项目中必须实现GreetingModule和RoboguiceDemoApplication GreetingModule.java import com. ...
- 项目中常用js方法整理common.js
抽空把项目中常用js方法整理成了common.js,都是网上搜集而来的,大家一起分享吧. var h = {}; h.get = function (url, data, ok, error) { $ ...
- 高性能web开发：如何加载js，，js的存放位置
外部JS的阻塞下载 所有浏览器在下载JS的时候,会阻止一切其他活动,比如其他资源的下载,内容的呈现等等.至到JS下载.解析.执行完毕后才开始继续并行下载其他资源并呈现内容. 有人会问:为什么JS不能像 ...