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 ...
随机推荐
- CodeSmith 基础用法和例子
〇. 前言 一. 工具设置 CodeSmith默认是不支持中文的,那么我们必须要先设置使其支持中文显示,保存.并且要能够在生成文件中支持中文. [Tools ...
- Revit Family API 添加材质参数设置可见性
start //添加类型 void AddType(FamilyManager familyMgr, string name, double w, double d) { FamilyType ...
- nil coalescing operator
nil coalescing operator ?? 就是 optional和 三元运算符?:的简写形式. 比如一个optional String类型的变量 var a:String? // prin ...
- Unity3D实践系列06,球体撞击物体游戏
本篇实现一个球体在固定区域移动撞击Cube的游戏. 首先有1个Plane当作地面,1个Sphere当作球体,4个Cube当作墙,12个Cube当作被撞击物体,另外还有球体的撞击计算,在撞击的过程适时显 ...
- android模拟器修改时间
我们看右上角的模拟器的时间,是不是和我们现在时间不同步呢 点击主菜单之后,我们找到下边的设置的按钮 下边找到时间和日期, 怎么把页面修改中文, 可以看(安卓模拟器怎么修改语言)的经验 ...
- java hash表
当使用一个哈希表,要指定用作键的对象,以及要链接到该键的值. 然后,该键经过哈希处理,所得到的散列码被用作存储在该表中值的索引. Hashtable定义了四个构造方法.第一个是默认构造方法: Hash ...
- NSNotification的使用（对观察者模式最通俗、易懂的讲解）
这是一个观察者模式. 首先在你需要监听的类中加入观察者: - (void)addObserver:(id)observer selector:(SEL)aSelector name:(NSString ...
- Nginx中文手冊
下载 : Nginx 中文手冊 Nginx 常见应用技术指南[Nginx Tips] 第二版 作者:NetSeek http://www.linuxtone.org (IT运维专家网|集群架构|性能调 ...
- UIWebView加载CSS样式的html
UIWebView加载CSS样式的html 效果 源码 // // ViewController.m // CSS // // Created by YouXianMing on 16/7/19. / ...
- 用开源项目JazzyViewPager实现ViewPager切换动画
JazzyViewPager这个项目可以让viewpager有各种绚丽的动画,而且还可以自由扩展.但从官网下载的lib导入时会出现找不到视图的问题,不知道是不是我人品不行,所以我就自己写了lib.总之 ...