Ext Js 3.2 边框布局--BorderLayout的应用
来源:互联网 发布:北京工业大学网络教育 编辑:程序博客网 时间:2024/05/19 04:02
1:边框布局--BorderLayout
Ext.layout.BorderLayout对应面板布局layout配置项的名称为border。该布局包含多个字面板,是一个面向应用的UI风格的布局,它将整个容器分为5个部分,
分别是east, south, west, north, center, 加入到容器中的字面板需要指定region配置项来告知容器需要加入到哪个部分,并且该布局还内建了对面板分割栏的支持。
代码:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <base href="<%=basePath%>"> <title>formPanel</title> <meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><link rel="stylesheet" type="text/css" href="ext3.2/resources/css/ext-all.css"></link><script type="text/javascript" src="ext3.2/adapter/ext/ext-base.js"></script><script type="text/javascript" src="ext3.2/ext-all.js"></script><script type="text/javascript" src="ext3.2/src/local/ext-lang-zh_CN.js"></script><script type="text/javascript"> Ext.onReady(function() { var panel = new Ext.Panel({ title: 'Ext.layout.BorderLayout 布局实例', height: 250, width: 400, renderTo: 'border', layout: 'border', //表格布局 items: [{ title:'northPanel', html: '上边', region: 'north', height: 50 }, { title: 'SouthPanel', html: '下边', region: 'south', height: 50 }, { title: 'EastPanel', html: '右边', region: 'center', //指定了子面板所在区域为east width: 110, split: true //允许用户自行拖放以改变某一个区域的大小 } ] });});</script> </head> <body> <div id="border"></div> </body></html>
2:程序效果图
注意:BorderLayout具有固定性,渲染之后就不会任意变动或者改变格局,中央区域(center region)在BorderLayout设定中不可获缺,假使没有其他区域,
中央布局就是该布局的全部区域
- Ext Js 3.2 边框布局--BorderLayout的应用
- BorderLayout边框布局
- Ext布局实例-----BorderLayout布局
- Ext布局实例-----BorderLayout布局
- BorderLayout(边框布局管理器)
- Ext Js 3.2 折叠布局-AccordionLayout的应用
- BorderLayout的布局
- JavaSwing布局BorderLayout的用法
- Ext Js 3.2 卡片式布局--CardLayout应用
- Ext.js的列布局
- awt简单应用 布局管理器 BorderLayout GridLayout
- BorderLayout布局
- Ext Js中 Ext.QuickTips的应用
- Ext Js 3.2 form表单布局的小例子
- 最简单的 BorderLayout布局例子:
- 关于awt的BorderLayout布局管理器
- 我的笔记 BorderLayout 边界布局管理器
- Java:对于Borderlayout布局管理的理解
- 心情不好
- String.Format 方法 (String, Object)
- 冲突域
- Jetty 设置IP和localhost都可以访问的方法
- oracle学习记录之五--第8讲
- Ext Js 3.2 边框布局--BorderLayout的应用
- Tolecontainer的简单应用
- 洞窟物语v1.0.2按键修改
- Ajax: A New Approach to Web Applications
- 虚拟机下的linux文本模式上网设置
- ubuntu11.10 GMIP缩放图片
- HDOJ 1166 敌兵布阵 第一次用线段树AC题目
- LDD3笔记:第二章 构造和运行模块
- 关于划分树