extjs_08_界面布局
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYWRhbV93enM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head> <title>My JSP 'index.jsp' starting page</title> <!-- 引入样式，能够把ext-all.css换成ext-all-access.css | ext-all-gray.css改变样式-->
<link rel="stylesheet" type="text/css" href="./extjs4.1/resources/css/ext-all.css">
<!-- 开发模式引入ext-all-debug.js，公布模式引入ext-all.js -->
<script type="text/javascript" src="./extjs4.1/ext-all-debug.js"></script>
<!-- 语言包 -->
<script type="text/javascript" src="./extjs4.1/locale/ext-lang-zh_CN.js"></script> <script type="text/javascript">
Ext.onReady(function() { //绝对布局
Ext.create("Ext.form.Panel", {
title : "Absolute Layout",
width : 300,
height : 275,
layout : {
type : "absolute"
},
defaultType : "textfield",//默觉得文本类型
items : [ {
x : 10,
y : 10,
xtype : "label",
text : "username:"
}, {
x : 80,
y : 10,
name : "to",
anchor : "90%"//定义位置(锚)
}, {
x : 10,
y : 40,
xtype : "label",
text : "password:"
}, {
x : 80,
y : 40,
name : "subject",
anchor : "90%"
}, {
x : 0,
y : 80,
xtype : "textareafield",
name : "msg",
anchor : "100% 100%",//宽和高
value : "文本域默认值"
} ],
renderTo : Ext.getBody()
}); //手风琴布局
Ext.create("Ext.panel.Panel", {
title : "Accordion Layout",
width : 300,
height : 300,
defaults : {
bodyStyle : "padding:15px"//用户自己定义CSS样式被应用到panel的body元素上
},
layout : {
type : "accordion",
titleCollapse : true,//同意通过点击标题栏的任何位置来展开/收缩子项Panel
animate : true,//表示对所含面板进行展开/收缩时, 面板的打开/关闭使用动画效果
//'true'表示当每一个面板展开时, 都将面板移动到容器的第一个. 'false' 则保持顺序不变.
activeOnTop : true
},
items : [ {
title : "Panel 1",
html : "Panel content!"
}, {
title : "Panel 2",
html : "Panel content!"
}, {
title : "Panel 3",
html : "Panel content!"
} ],
renderTo : Ext.getBody()
}); //锚定布局
Ext.create("Ext.Panel", {
width : 500,
height : 400,
title : "AnchorLayout Panel",
layout : "anchor",
renderTo : Ext.getBody(),
items : [ {
xtype : "panel",
title : "75% Width and 20% Height",
anchor : "75% 20%"
}, {
xtype : "panel",
title : "Offset -300 Width & -200 Height",
anchor : "-300 -200"
}, {
xtype : "panel",
title : "Mixed Offset and Percent",
anchor : "-250 20%"
} ]
}); //自己主动布局
Ext.create("Ext.Panel", {
width : 500,
height : 280,
title : "AutoLayout Panel",
layout : "auto",
renderTo : document.body,
items : [ {
xtype : "panel",
title : "Top Inner Panel",
width : "75%",
height : 90
}, {
xtype : "panel",
title : "Bottom Inner Panel",
width : "75%",
height : 90
} ]
}); //边界布局
Ext.create("Ext.panel.Panel", {
width : 500,
height : 300,
title : "Border Layout",
layout : "border",
items : [ {
title : "South Region is resizable",
region : "south", // position for region
xtype : "panel",
height : 100,
split : true, // 手动调整大小
// 假设有四个值, 则分别依次应用于上,右,下,左.
margins : "0 5 5 5"
}, {
// xtype: "panel" implied by default
title : "West Region is collapsible",
region : "west",
xtype : "panel",
margins : "5 0 0 5",
width : 200,
collapsible : true, // 是否同意收缩
id : "west-region-container",
layout : "fit"
}, {
title : "Center Region",
region : "center", // center region is required, no width/height specified
xtype : "panel",
layout : "fit",
margins : "5 5 0 0"
} ],
renderTo : Ext.getBody()
}); //卡片布局
var p = Ext.create("Ext.tab.Panel", {
width : 500,
height : 300,
layout : "card",
title : "Card Layout",
items : [ {
title : "Card 1",
html : "Card 1"
}, {
title : "Card 2",
html : "Card 2"
} ],
renderTo : Ext.getBody()
});
p.getLayout().setActiveItem(0);//激活指定的面板. //列布局
// All columns are percentages -- they must add up to 1
Ext.create("Ext.panel.Panel", {
title : "Column Layout - Percentage Only",
width : 350,
height : 250,
layout : "column",
items : [ {
title : "Column 1",
columnWidth : 0.25
}, {
title : "Column 2",
columnWidth : 0.55
}, {
title : "Column 3",
columnWidth : 0.20
} ],
renderTo : Ext.getBody()
}); // Mix of width and columnWidth -- all columnWidth values must add up
// to 1. The first column will take up exactly 120px, and the last two
// columns will fill the remaining container width. Ext.create("Ext.Panel", {
title : "Column Layout - Mixed",
width : 350,
height : 250,
layout : "column",
items : [ {
title : "Column 1",
width : 120
}, {
title : "Column 2",
columnWidth : 0.7
}, {
title : "Column 3",
columnWidth : 0.3
} ],
renderTo : Ext.getBody()
}); //填充布局
Ext.create("Ext.panel.Panel", {
title : "Fit Layout",
width : 300,
height : 150,
layout : "fit",
items : {
title : "Inner Panel",
html : "This is the inner panel content",
bodyPadding : 20,//这个值被应用到全部的边界
border : false
},
renderTo : Ext.getBody()
}); //横向布局
Ext.create("Ext.Panel", {
width : 500,
height : 300,
title : "HBoxLayout Panel",
layout : {
type : "hbox",
align : "stretch"
},
renderTo : document.body,
items : [ {
xtype : "panel",
title : "Inner Panel One",
width : 200
}, {
xtype : "panel",
title : "Inner Panel Two",
flex : 1
}, {
xtype : "panel",
title : "Inner Panel Three",
flex : 1
} ]
}); //纵向布局
Ext.create("Ext.Panel", {
width : 500,
height : 400,
title : "VBoxLayout Panel",
layout : {
type : "vbox",
align : "center"
},
renderTo : document.body,
items : [ {
xtype : "panel",
title : "Inner Panel One",
width : 250,
flex : 2
}, {
xtype : "panel",
title : "Inner Panel Two",
width : 250,
flex : 4
}, {
xtype : "panel",
title : "Inner Panel Three",
width : "50%",
height : 200
} ]
}); //表格布局
Ext.create("Ext.panel.Panel", {
title : "Table Layout",
width : 300,
height : 150,
layout : {
type : "table",
// The total column count must be specified here
columns : 3
},
defaults : {
// applied to each contained panel
bodyStyle : "padding:20px"
},
items : [ {
html : "Cell A content",
rowspan : 2
}, {
html : "Cell B content",
colspan : 2
}, {
html : "Cell C content",
cellCls : "highlight"
}, {
html : "Cell D content"
} ],
renderTo : Ext.getBody()
}); })
</script> </head> <body>
<br>
</body>
</html>
extjs_08_界面布局的更多相关文章
- 微信js框架第二篇(创建完整界面布局)
接着昨天的继续谈关于微信新出的这个js框架,今天主要谈一个页面的创建到布局的详细步骤. 一.创建一个完整页面 页面你可以创建在项目的任何节点,只要你在入口文件正确引入创建该页面的路径就可使 ...
- 2013 duilib入门简明教程 -- 界面布局(9)
上一个教程实现的标题栏代码中,并没有看到处理自适应窗口大小的代码,但是窗口大小变化后,按钮的位置会跟着变化,这是因为我们将按钮放到了HorizontalLayout.VerticalLayou ...
- php创建新用户注册界面布局实例
php创建新用户注册界面布局实例 <!DOCTYPE> <html> <head> <title>Load page</title> < ...
- WPF基础知识、界面布局及控件Binding（转）
WPF是和WinForm对应的,而其核心是数据驱动事件,在开发中显示的是UI界面和逻辑关系相分离的一种开放语言.UI界面是在XAML语言环境下开发人员可以进行一些自主设计的前台界面,逻辑关系还是基于c ...
- Unity 编辑器的 界面布局 保存方法
在软件界面的右上角(关闭按钮的下方),点击 layout (界面)的下拉箭头. 弹出选项中的 save layout....(保存界面选项),输入命名,就可以生成这个界面的布局. (软件本身也有 ...
- ios开发UI篇—使用纯代码自定义UItableviewcell实现一个简单的微博界面布局
本文转自 :http://www.cnblogs.com/wendingding/p/3761730.html ios开发UI篇—使用纯代码自定义UItableviewcell实现一个简单的微博界面布 ...
- iOS开发UI篇—使用xib自定义UItableviewcell实现一个简单的团购应用界面布局
iOS开发UI篇—使用xib自定义UItableviewcell实现一个简单的团购应用界面布局 一.项目文件结构和plist文件 二.实现效果 三.代码示例 1.没有使用配套的类,而是直接使用xib文 ...
- UWP开发入门（二十）——键盘弹起时变更界面布局
UWP APP在键盘弹起或隐藏时,并不会自动处理界面布局.有时会出现键盘遮挡了下一个需要填写的文本框,或是下一步按钮的情况.本篇我们以登录界面做例子,用一种巧妙简单的方式在键盘弹起和隐藏时更改界面的布 ...
- WPF基础知识、界面布局及控件Binding
WPF是和WinForm对应的,而其核心是数据驱动事件,在开发中显示的是UI界面和逻辑关系相分离的一种开放语言.UI界面是在XAML语言环境下开发人员可以进行一些自主设计的前台界面,逻辑关系还是基于c ...
随机推荐
- [原创]浅谈移动App安全测试
[原创]浅谈移动App安全测试 移动互联网很火,就像当年互联网兴起一样,这几天和朋友在沟通交流,谈到一个话题,你们做金融App钱放在你们哪边安全不?会不会你们做的移动App不安全,让人盗了里面的资金, ...
- Oracle初始化参数之memory_target
一.引言: Oracle 9i引入pga_aggregate_target,可以自动对PGA进行调整: Oracle 10g引入sga_target,可以自动对SGA进行调整: Oracle 11g则 ...
- STM32学习日志--使用DMA功能自动更新PWM的输出
/******************************************************************************* 编译环境: EWARM V5.30 硬 ...
- getsockname()/getpeername()函数第一次被调用得到0.0.0.0结果
int getsockname(int sockfd, struct sockaddr *addr, socklen_t *addrlen); getsockname() returns the cu ...
- Snmp学习总结(三)——Win7安装和配置SNMP
一.安装SNMP Win7操作系统默认情况下是不安装SNMP服务的,今天讲解一下在Win7操作系统下安装SNMP,具体安装步骤如下: WIN7操作系统下安装SNMP的步骤如下: 开始安装SNMP
- Java集合框架顶层接口collectiion接口
如何使用迭代器 通常情况下,你会希望遍历一个集合中的元素.例如,显示集合中的每个元素. 一般遍历数组都是采用for循环或者增强for,这两个方法也可以用在集合框架,但是还有一种方法是采用迭代器遍历集合 ...
- iOS 程序插件及功能动态更新思路
所用框架及语言 iOS客户端-Wax(开发愤怒的小鸟的连接Lua 和 Objc的框架),Lua,Objc, 服务端-Java(用于返回插件页面) 工具框架链接地址:Wax - https://gith ...
- iOS内存管理 －讲的不错，角度独特
ios的内存管理,包括对象的所有权与引用计数.自动释放.访问器方法与属性.一些会改变引用计数的特殊情况 ----- 对象所有权(ownership) 与引用计数 (retain co ...
- 排序算法之归并排序（Mergesort）解析
转自:http://www.cnblogs.com/ayqy/p/4050452.html 一.归并排序的优缺点(pros and cons) 耗费心思来理解它,总要有个理由吧: 归并排序的效率达 ...
- Android之仿String的对象驻留
String a ＝ "abc"; String b = "abc"; a == b true; 变量a和变量b是同一个值.这不只是说它俩的值是一样的, ...