【ExtJS】FormPanel 布局(二)
周末2天好好学习了下布局,现在都给实现了吧。
5、border布局:
Border布局将容器分为五个区域:north、south、east、west和center。除了center区域外,其他区域都需要设置宽高,center区域宽高与其他区域有关。容器内部除去west、north、east、south的宽高,由center区域自动填满。
1 Ext.create('Ext.panel.Panel',{
width: 700,
height: 500,
title: 'Border Layout',
layout: 'border',
renderTo: 'border',
margin: '50 150 50 50',
border : true,
defaults:{
xtype: 'panel'
},
items: [{
title: 'North Region is resizable',
region: 'north',
height: 100,
html: 'north',
split: true
},{
title: 'South Region is resizable',
region: 'south',
height: 100,
html: 'south',
split: true
},{
title: 'West Region is collapsible',
region:'west',
width: 200,
collapsible: true,
html: 'west',
margin: '0 5 0 0',
layout: 'fit'
},{
title: 'East Region is collapsible',
region:'east',
width: 200,
collapsible: true,
html: 'east',
margin: '0 0 0 5',
layout: 'fit'
},{
title: 'Center Region',
region: 'center',
html: 'center',
layout: 'fit'
}]
})
效果:
配置项:
1、region:Border布局下各区域的默认权重. 当某区域项不含weight
属性时使用. 此对象必须包含所有区域 ("north", "south", "east" 和 "west").
2、margin:为组件设置margin. margin 可以是一个数值适用于所有边 或者它可以是每个样式的CSS样式规范, 例如: '10 5 3 10'.
6、card布局:
var navigate = function(panel, direction){
var layout = panel.getLayout();
layout[direction]();
Ext.getCmp('move-prev').setDisabled(!layout.getPrev());
Ext.getCmp('move-next').setDisabled(!layout.getNext());
};
var card = Ext.create('Ext.panel.Panel', {
title: 'Card Layout',
width: 400,
height: 200,
layout: 'card',
activeItem: 0,
renderTo: 'card',
margin: '50 150 50 50',
border: true,
defaults: {
xtype: 'panel',
border: true
},
bbar: [{
id: 'move-prev',
text: 'Back',
handler: function(btn) {
navigate(btn.up("panel"), "prev");
},
disabled: true
},
'->',
{
id: 'move-next',
text: 'Next',
handler: function(btn) {
navigate(btn.up("panel"), "next");
}
}],
items: [{
id: 'card-0',
html: 'Step1'
},{
id: 'card-1',
html: 'Step2'
},{
id: 'card-2',
html: 'Step3'
}]
});
效果:
7、Column布局:
Column布局为Auto布局的子类,用于设置子元素的宽度。
var column = Ext.create('Ext.panel.Panel',{
title: 'Column Layout',
width: 400,
layout: 'column',
margin: '50 150 50 50',
border: true,
renderTo: 'column',
defaults: {
xtype: 'panel',
border: true,
margin: '2 2 2 2',
height: 100
},
items: [{
html: 'column1',
columnWidth: 1/2
},{
html: 'column2',
columnWidth: .25
},{
html: 'column3',
columnWidth: 1/4
}]
});
效果:
8、Container布局:
这个是一个布局的基类, 能使当容器只包含一个子元素时, 子元素自动填满容器. 此类应该通过layout :'fit' 属性进行扩展或创建, 通常应该不需要通过 类名关键字进行直接创建.
Fit并没有任何直接的配置参数(继承的除外), 要通过Fit布局使一个面板填充一个容器, 只需简单的设置容器layout: 'fit'
属性, 然后给容器 添加一个唯一面板即可.
var fit = Ext.create('Ext.panel.Panel',{
title: 'Fit Layout',
width: 400,
height: 200,
layout: 'fit',
margin: '50 150 50 50',
border: true,
renderTo: 'fit',
items: {
title: 'Inner Panel',
html: 'This is the inner panel content!',
margin: '2 2 2 2',
border: true
}
});
效果:
9、VBox与HBox布局:
var hbox = Ext.create('Ext.panel.Panel',{
width: 400,
height: 300,
title: "HBoxLayout Panel",
border: true,
margin: '50 150 50 50',
renderTo: 'hbox',
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
xtype: 'panel',
title: 'Inner Panel One',
html: 'One',
border: true,
margin: '2 2 2 2',
flex: 2
},{
xtype: 'panel',
title: 'Inner Panel Two',
html: 'One',
border: true,
margin: '2 2 2 2',
flex: 1
},{
xtype: 'panel',
title: 'Inner Panel Three',
html: 'One',
border: true,
margin: '2 2 2 2',
flex: 1
}]
});
VBox:
var vbox = Ext.create('Ext.panel.Panel',{
width: 400,
height: 300,
title: "VBoxLayout Panel",
border: true,
margin: '50 150 50 50',
renderTo: 'vbox',
layout: {
type: 'vbox',
align: 'center'
},
renderTo: 'vbox',
items: [{
xtype: 'panel',
title: 'Inner Panel One',
html: 'One',
border: true,
margin: '2 2 2 2',
width: 250,
flex: 2
},
{
xtype: 'panel',
title: 'Inner Panel Two',
html: 'Two',
border: true,
margin: '2 2 2 2',
width: 250,
flex: 4
},
{
xtype: 'panel',
title: 'Inner Panel Three',
html: 'Three',
border: true,
margin: '2 2 2 2',
width: '50%',
flex: 4
}]
});
效果:
10、Table布局:
1. columns:设置表格布局的列数;
var table = Ext.create('Ext.panel.Panel',{
title: 'Table Layout',
width: 400,
height: 160,
renderTo: 'table',
border: true,
margin: '50 150 50 50',
layout: {
type: 'table',
columns: 3
},
defaults: { border: true,
margin: '2 2 2 2',
},
items: [{
html: 'Cell A content',
rowspan: 2
},{
html: 'Cell B content',
colspan: 2
},{
html: 'Cell C content',
cellCls: 'highlight'
},{
html: 'Cell D content'
}]
});
效果:
这些都是一些基本布局,更多复杂应用也只不过是布局的嵌套,具体实现成什么样,还得看实际上的需求。
【ExtJS】FormPanel 布局(二)的更多相关文章
- ExtJs FormPanel布局
FormPanel有两种布局:form和column,form是纵向布局,column为横向布局.默认为后者.使用layout属性定义布局类型.对于一个复杂的布局表单,最重要的是正确分割,分割结果直接 ...
- Extjs关于FormPanel布局
Extjs关于FormPanel布局 FormPanel有两种布局:form和column,form是纵向布局,column为横向布局.默认为后者.使用layout属性定义布局类型.对于一个复杂的布局 ...
- ExtJs常用布局--layout详解(含实例)
序言: 笔者用的ExtJs版本:ext-3.2.0 ExtJs常见的布局方式有:border.form.absolute.column.accordion.table.fit.card.anchor ...
- 无废话ExtJs 入门教程二十一[继承:Extend]
无废话ExtJs 入门教程二十一[继承:Extend] extjs技术交流,欢迎加群(201926085) 在开发中,我们在使用视图组件时,经常要设置宽度,高度,标题等属性.而这些属性可以通过“继承” ...
- 无废话ExtJs 入门教程二十[数据交互:AJAX]
无废话ExtJs 入门教程二十[数据交互:AJAX] extjs技术交流,欢迎加群(521711109) 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C ...
- 无废话ExtJs 入门教程二[Hello World]
无废话ExtJs 入门教程二[Hello World] extjs技术交流,欢迎加群(201926085) 我们在学校里学习任何一门语言都是从"Hello World"开始,这里我 ...
- 基本CSS布局二
基本CSS布局二------基本页面布局二 /*主面板样式*/ #container { width:100%; margin:0px auto;/*主面板DIV居中*/ } /*顶部面板样式*/ # ...
- 【ExtJS】FormPanel 布局(一)
准备工作,布置一个最简单的Form,共5个组件,都为textfield. Ext.onReady(function(){ Ext.create('Ext.form.Panel', { width: 5 ...
- Extjs Column布局常见问题及解决方法
原文地址:http://blog.csdn.net/weoln/article/details/4339533 第一次用Extjs的column布局时遇见了很多问题,记录下来,供大家参考.column ...
随机推荐
- Java多线程设计模式(四)
目录(?)[-] Future Pattern Two-Phase Termination Pattern Thread-Specific Storage Pattern Active Object ...
- nginx中级应用
1.安装监控模块 Nginx中的stub_status模块主要用于查看Nginx的一些状态信息. 本模块默认是不会编译进Nginx的,如果你要使用该模块,则要在编译安装Nginx时指定: . /con ...
- unigui的UnimDatePicker控件使用经验
最近使用unigui的UnimDatePicker控件遇到只能选择当年之前的年份和日期及日期选择界面不能显示中文的问题,经以下设置就能正常使用.1.UnimDatePicker月份显示中文 unim ...
- RobotFramework关键字返回参数
业务关键字[登录]返回参数 调用时直接把return的参数值写在业务关键字的最前面,就可以使用关键字的返回值了
- JAVA程序对MYSQL数据库加锁实验
什么是脏读,不可重复读,幻读 1. 脏读 :脏读就是指当一个事务正在访问数据,并且对数据进行了修改,而这种修改还没有提交到数据库中,这时,另外一个事务也访问这个数据,然后使用了这个数据. 2. 不可重 ...
- nowcoder(牛客网)普及组模拟赛第一场 解题报告
蒟蒻我可能考了一场假试 T1 绩点 这题没什么好说的,应该是只要会语言的就会做. T2 巨大的棋盘 一个模拟题吧qwq,但是要注意取模的时候先加上n或者m再取模,要不然会错的. #include< ...
- Java面试必问
1. 图灵 1.1 聊聊哈希算法与HashMap 1)一个优秀的哈希算法有什么特点? 快速.不可逆.敏感性.低碰撞性 2)自己写一个Hash算法 取模 3)Java中的Hash算法 HashMap,侧 ...
- django 配置xadmin
django xadmin本地安装 百度云 下载,激活码:bxhv,下载后不需要解压,直接本地 pip install xxx.zip django 版本需要 1.1.11, 1,添加app INST ...
- django通过使用jwt模块实现状态保持
第一步:安装jwt pip install djangorestframework-jwt 第二步:settings/dev的配置文件配置 REST_FRAMEWORK = { # 认证配置 'DEF ...
- ArchLinux 下 VirtualBox 增强设置
0.前言: 其实这个标题本来不是我的本意,因为我的ArchLinux开机启动报错了!. 原本是一个服务报错,解决就行了对不对.后来我各种搜索大法发现了一个常识错误. 1.报错: 2.过程(赶时间的朋友 ...