ExtJS布局控件
Layout Controls
Auto Layout
Ext JS4中的容器的默认布局是自动布局。这个布局管理器会自动地将组件放在一个容器中。
Fit Layout
Fit布局安排了容器的内容完全占据空间,它适合于容器的大小。Fit布局通常用于具有单个项目的容器。Fit布局是Card布局的基类
Ext.onReady(function() {
Ext.create("Ext.panel.Panel", {
layout: "fit", //fit布局
title : "Fit layout panel",
height: 400,
width: 600,
renderTo: "panel",
items: [{
xtype: "textfield",
fieldLabel: "Email"
}]
});
});
Anchor Layout
anchor布局管理器将一个容器的项目与容器的大小相比较。当容器被调整时,anchor布局管理器会重新安排相对于容器的新大小的项目。您可以将anchor属性配置为子项。
您可以在 anchor属性中配置宽度和高度值以及 anchor属性中的偏移值,如下所示。
anchor : "width% height%"
(or)
anchor : "offsetWidth offsetHeight"
您还可以通过指定偏移值和百分比来混合这两个选项。这里有一个简单的面板,它有一个文本框和一个按钮,并配置了一个anchor布局。项目配置了anchor属性。当你点击这个按钮时,面板的宽度和高度会增加5px。
Ext.onReady(function() {
var panel = Ext.create("Ext.panel.Panel", {
layout: "anchor",
title : "Anchor layout panel",
width: 600,
height: 400,
items: [{
xtype: "textfield",
fieldLabel: "Name",
anchor: "95% 15%"
}, {
xtype: "button",
text: "Resize",
anchor: "-50, 15%",
listeners: {
"click": function() {
panel.setWidth(panel.getWidth() + 5);
panel.setHeight(panel.getHeight() + 5);
}
}
}],
renderTo: "panel"
});
});
另一个例子
Ext.onReady(function() {
var panel1 = new Ext.Panel({
title : "Panel1",
height : 100,
anchor : '-50',
html : "高度等于100,宽度=容器宽度-50"
});
var panel2 = new Ext.Panel({
title: "Panel2",
height: 100,
anchor: '50%',
html: "高度等于100,宽度=容器宽度的50%"
});
var panel3 = new Ext.Panel({
title: "Panel3",
anchor: '-10, -250',
html: "宽度=容器宽度-10,高度=容器高度-250"
});
var win = new Ext.Window({
title: "Anchor Layout",
height: 400,
width: 400,
layout: 'anchor',
items: [panel1, panel2, panel3]
});
win.show();
});
Box Layout
Ext.layout.container.Box是VBox和HBox布局的基础类。VBox和HBox分别代表垂直盒和水平盒。
下面显示一个带有三个按钮(A、B和C)的面板。这些按钮是垂直排列在面板的中心
Ext.onReady(function() {
var panel = Ext.create("Ext.panel.Panel", {
title : "VBox layout panel",
width: 600,
height: 400,
layout : {
type : "vbox",
pack : "center", //水平居中
align : "center" //垂直居中
},
defaults : {
xtype : "button",
margin: "10"
},
items: [
{text : "A"},
{text : "B"},
{text : "C"}
],
renderTo: "panel"
});
});
代码可以修改为使用hbox布局。可以修改布局配置,如下所示。
Ext.onReady(function() {
var panel = Ext.create("Ext.panel.Panel", {
title : "VBox layout panel",
width: 600,
height: 400,
layout : {
type : "hbox",
pack : "center",
align : "middle"
},
defaults : {
xtype : "button",
margin: "10"
},
items: [
{text : "A"},
{text : "B"},
{text : "C"}
],
renderTo: "panel"
});
});
Accordion Layout
Accordion布局是VBox布局的扩展。它可以垂直地排列一组面板,以折叠和可扩展的特性。下面显示了使用Accordion布局的面板的代码片段。
Ext.onReady(function() {
var panel = new Ext.panel.Panel({
renderTo : 'panel',
title : '容器组件',
layout : 'accordion',
width : 600,
height : 400,
items : [{
title : '元素1',
html : '元素1'
}, {
title : '元素2',
html : '元素2'
}, {
title : '元素3',
html : '元素3'
}, {
title : '元素4',
html : '元素4'
}]
});
});
Table Layout
表格布局用于呈现HTML表格元素。它具有一个表的所有属性,最常用的是列属性。
Ext.onReady(function() {
var panel = Ext.create("Ext.panel.Panel", {
title : "Table layout panel",
width: 600,
height: 400,
layout : {
type : "table",
columns: 2
},
defaults : {
xtype : "button",
margin: "10"
},
items: [
{text : "A"},
{text : "B"},
{text : "C"},
{text : "D"},
{text : "E"},
{text : "F"}
],
renderTo: "panel"
});
});
另一个例子
Ext.onReady(function() {
var panel = Ext.create("Ext.panel.Panel", {
title : "Table layout panel",
width: 600,
height: 400,
layout : {
type : "table",
columns: 3
},
items : [{
title : "子元素1",
html : "这是子元素1中的内容",
rowspan : 2,
height: 108
}, {
title : "子元素2",
html : "这是子元素2中的内容",
colspan : 2,
width: 400
}, {
title : "子元素3",
html : "这是子元素3中的内容"
}, {
title : "子元素4",
html : "这是子元素4中的内容"
}],
renderTo: "panel"
});
});
Column Layout
列布局将容器安排在从左到右的独立列中。在容器中使用列布局的每个条目都配置了一个columnWidth属性。所有项的列宽度属性的值之和必须等于容器的总宽度。
您可以按百分比或具体值提供列宽的值。百分比值作为一个十进制数,其中总列的宽度等于1。
Ext.onReady(function() {
new Ext.Panel({
renderTo : document.body,
layout : "column",
width : 500,
height : 400,
items : [{
title : "列1",
width : 200
}, {
title : "列2",
columnWidth : .3
}, {
title : "列3",
columnWidth : .3
}, {
title : "列4",
columnWidth : .4
}]
});
});
Border Layout
边界布局通常是Ext JS 4应用程序的主布局。您可以使用诸如页眉、页脚和菜单这样的区域来设计一个主布局。在Ext JS 4中,主要用于构建单页面应用程序,边界布局用于设计页面的整个布局。
边界布局将页面划分为不同的区域,如南北、东、西、和中心。中心区域必须进行配置,而其他区域是可选的。
Ext.onReady(function() {
new Ext.Viewport({
layout : 'border',
items : [{
region : "north",
height : 50,
title : "顶部面板"
}, {
region : "south",
height : 50,
title : "底部面板"
}, {
region : "center",
title : "中央面板"
}, {
region : "west",
width : 100,
title : "左边面板"
}, {
region : "east",
width : 100,
title : "右边面板"
}]
})
});
Card Layout
卡片布局,当在一个容器上使用时,把它的物品当作一个卡片的集合,并且在任何时候只显示一个项目。
卡片布局有一个重要的属性叫做activeItem,它包含要显示的项的信息。必须对该属性进行操作,以更改要显示的项。
Ext.onReady(function() {
var testpanel = new Ext.Panel({
layout : 'card', // 卡片式布局
activeItem : 0, // 设置默认显示的第一个子面板
title : 'Ext.layout.CardLayout',
frame : true,
renderTo : Ext.getBody(),
bodyPadding : 5,
width : 600,
height : 400,
defaults : {
bodyStyle : 'background-color:#FFFFFF'
},
// 面板items配置项默认的xtype类型为panel 该默认值可以通过defaultType配置项进行更改
items : [{
title : '嵌套面板一',
html : '说明一',
id : 'p1'
}, {
title : '嵌套面板二',
html : '说明二',
id : 'p2'
}, {
title : '嵌套面板三',
html : '说明三',
id : 'p3'
}],
buttons : [{
text : '上一页',
handler : changePage
}, {
text : '下一页',
handler : changePage
}]
});
// 切换子面板
function changePage(btn) {
var index = Number(testpanel.layout.activeItem.id.substring(1));
if (btn.text == '上一页') {
index -= 1;
if (index < 1) {
index = 1;
}
} else {
index += 1;
if (index > 3) {
index = 3;
}
}
testpanel.layout.setActiveItem('p' + index);
}
});
Summary
在本章中,我讨论了Ext JS 4的控件和布局。所有的UI控件都是从ext.component继承的。组件提供了几个属性、方法和事件。Ext.container。容器类充当所有容器控件的基类,如面板、视图和工具栏。表单面板表示标准的HTML表单,具有诸如验证、处理等功能。您可以将字段控件添加到表单面板中。Ext.layout。布局是所有布局组件的基类。边界布局定义了应用程序的主布局,而卡片布局用于显示任何时间点上的一个项目。
ExtJS布局控件的更多相关文章
- Windows phone 8.1布局控件
布局控件(4种 第一种) Grid:相当于 HTML 中的 Table 标签,但是注意 Table 更重要的是展示数据, 而 Grid 则是专门为布局所生 属性标记: Grid.RowDefin ...
- [WP8.1UI控件编程]Windows Phone VirtualizingStackPanel、ItemsStackPanel和ItemsWrapGrid虚拟化排列布局控件
11.2.2 VirtualizingStackPanel.ItemsStackPanel和ItemsWrapGrid虚拟化排列布局控件 VirtualizingStackPanel.ItemsSta ...
- Windows 8.1 应用再出发 - 几种布局控件
本篇为大家介绍Windows 商店应用中几种布局控件的用法.分别是Canvas.Grid.StackPanel 和 VariableSizedWrapGrid. 1. Canvas Canvas使用绝 ...
- WinForm界面开发之布局控件"WeifenLuo.WinFormsUI.Docking"的使用
WinForm界面开发之布局控件"WeifenLuo.WinFormsUI.Docking"的使用 转自:http://www.cnblogs.com/wuhuacong/arch ...
- [转载]ExtJs4 笔记(9) Ext.Panel 面板控件、 Ext.window.Window 窗口控件、 Ext.container.Viewport 布局控件
作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...
- WinForm界面布局控件WeifenLuo.WinFormsUI.Docking"的使用 (二)
WinForm界面布局控件WeifenLuo.WinFormsUI.Docking"的使用 (二) 编写人:CC阿爸 2015-1-29 今天我想与大家继续一起分享这一伟大的控件.有兴趣的同 ...
- WP 类似扑克牌布局控件和类似扑克卡片控件
一.说明 本文代码来源: <windows phone 7 程序设计> Charles Petzold 控件效果: 二.要点: 1.ItemControl.子项容器模板(ItemsCont ...
- 开源布局控件 WeifenLuo.WinFormsUI.Docking.dll使用
WeifenLuo.WinFormsUI.Docking是一个很强大的界面布局控件,可以保存自定义的布局为XML文件,可以加载XML配置文件.! 先看一下效果 使用说明: 1.新建一个WinForm程 ...
- Winform- 界面开发之布局控件"WeifenLuo.WinFormsUI.Docking"的使用
布局控件"WeifenLuo.WinFormsUI.Docking"是一个非常棒的开源控件,用过的人都深有体会,该控件之强大.美观.不亚于商业控件.而且控件使用也是比较简单的. 实 ...
随机推荐
- Red Hat Enterprise Linux 官方正式版镜像下载
Red Hat Enterprise Linux是美国红帽公司开发的商业市场导向的Linux发行版,为方便大家学习研究,整理分享历代红帽官方正式版镜像给有需要的朋友们. 下载地址:https://ww ...
- jenkins实现git自动拉取代码时替换配置文件
jenkins实现从git上自动拉取源代码——>自动编译——>发布到测试服务器——>验证测试,这个大家应该都知道,但是关于源代码里的配置文件,可能就会有点头疼了, 一般测试都会自己的 ...
- [洛谷P1169][题解][ZJOI2007]午餐
这是题目吗? 显然的DP,讲几个重要的地方 1.贪心:让吃饭时间长的先排队(证明从略) 2.状态: f[i][j][k]代表前i个人,一号时间j,二号时间k显然MLE 所以压缩成f[i][j]代表前i ...
- JS时间戳与时间字符串之间的相互转换
时间字符串 转 时间戳 /** * 时间字符串 转 时间戳 * @param {String} time_str 时间字符串(格式"2014-07-10 10:21:12") * ...
- js中call、apply、bind到底有什么区别?bind返回的方法还能修改this指向吗?
壹 ❀ 引 同事最近在看angularjs源码,被源码中各种bind,apply弄的晕头转向:于是他问我,你知道apply,call与bind的区别吗?我说apply与call是函数应用,指定thi ...
- Python 从入门到进阶之路(二)
之前的文章我们对 Python 语法有了一个简单的认识,接下来我们对 Python 中的 if while for 做一下介绍. 上图为 if 判断语句的流程,无论任何语言,都会涉及到判断问题,if ...
- c++ LeetCode(初级数组篇)十一道算法例题代码详解(一)
原文作者:aircraft 原文链接:https://www.cnblogs.com/DOMLX/p/10940636.html 唉!最近忙着面试找实习,然后都是面试的很多是leetcode的算法题, ...
- 关于C# webapi ,接口返回字符串和json格式 ,返回值中有反斜杠
最近遇到一个比较郁闷的问题,记录一下 写了一个接口,想返回json 数据,但是返回值中总是带有反斜杠... ,下面来看原因 首先,配置 webapi的路由 App_Start 文件夹下 ,WebApi ...
- PHP简单判断当前使用的是什么浏览器
PHP简单判断当前使用的是什么浏览器,判断浏览器类型的方法,方便统计网站访问用户使用浏览器的比例. 判断浏览器类型方法 function userBrowser() { $user_OSagent = ...
- fluwx使用的问题
今天搞了下fluwx这个库,也是遇到了很多问题. 问题一:‘包名不对,请检查包名是否与开放平台上填写的一致’ 显示把文档这些看了遍,但是也不是很清楚,还加了下群问别人,主要我没有开发过Android, ...