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 ...
随机推荐
- leetcode第一刷_N-Queens II
这个题好无趣,竟然输出解的个数.前一个题把全部解都输出出来了.还愁不知道解的个数吗. . 我怀疑这个解的个数是有一个类似通项的东西,就上网查了一下.没有啊亲,最后就把上一题的代码略微改了一下过掉了. ...
- LPC43xx双核笔记
简介本页提供了一些使用LPC43xx器件双核特性的基本信息.此页面上的信息和专题使用Keil uVision4工具,以双核工程的使用来演示.该工程初始化两个内核以运行FreeRTOS,并采用三色LED ...
- delphi project of object
http://www.cnblogs.com/ywangzi/archive/2012/08/28/2659811.html 其实要了解这些东西,适当的学些反汇编,WINDOWS内存管理机制,PE结构 ...
- Spring Boot 2中对于CORS跨域访问的快速支持
原文:https://www.jianshu.com/p/840b4f83c3b5 目前的程序开发,大部分都采用前后台分离.这样一来,就都会碰到跨域资源共享CORS的问题.Spring Boot 2 ...
- ORACLE数据库导入的时候出现IMP-00038: 无法转换为环境字符集句柄
数据泵不一致导致的,比如说你用expdp导出来的 用imp导入的时候就会出现这个错误exp导出来的用imp导入expbd导出来的用impdp导入和版本没有关系
- Linux的命名空间详解--Linux进程的管理与调度（二）
转自:http://blog.csdn.net/gatieme/article/details/51383322 日期 内核版本 架构 作者 GitHub CSDN 2016-05-12 Linux- ...
- OPTAUTH 两步验证详解
先贴图: 在对外网开放的后台管理系统中,使用静态口令进行身份验证可能会存在如下问题: (1) 为了便于记忆,用户多选择有特征作为密码,所有静态口令相比动态口令而言,容易被猜测和破解: (2) 黑客可以 ...
- Node.js批量去除BOM文件
之前的同事写了一个工具,但有bug,就是在替换文件后原文件的格式变成utf8 BOM了,这种带BOM的XML在Mac下可能读取不出来,所以就需要写个工具处理一下- 其实思路比较简单,首先遍历目录, ...
- .NET零基础入门06：面向对象入门
一:前言 在本系列课程的第一部分,我们说明为了要选择C#作为你成为程序员的第一门语言: • 首先,C#是一门非常优秀的面向对象编程的语言: 凡是对编码感兴趣的同学一定听说过"面向对象编程&q ...
- 让Orchard支持多个Layout
默认Orchard只有一个Layout,有的时候,我们的站点往往需要多个母版页.那么,如果要让Orchard支持多个Layout,以下是一种解决方案. 一:创建LayoutFilter using S ...