<!DOCTYPE html>
<html>
<head>
    <title>ExtJs</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" type="text/css" href="ExtJs/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css">
		<script type="text/javascript" src="ExtJs/ext-all.js"></script>
		<script type="text/javascript" src="ExtJs/bootstrap.js"></script>
		<script type="text/javascript" src="ExtJs/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>

    <script type="text/javascript">
			Ext.onReady(function() {
				Ext.create('Ext.panel.Panel',{
					title: 'Ext.layout.container.Table',
					frame: true,
					height: 600,
					width: 800,
					renderTo: Ext.getBody(),
          defaults: {
						collapsible: true
					},
					layout: 'border',

					items: [{
						title: 'north Panel',
						height: 50,
            html: '上边',
            region: 'north'
					},{
						title: 'south Panel',
						height: 50,
            html: '下边',
            region: 'south'
					},{
						title: 'west Panel',
						width: 100,
            html: '左边',
            region: 'west'
					},{
						title: 'east Panel',
						width: 100,
            html: '右边',
            region: 'east'
					},{
						title: 'main content',
            html: '中间',
            region: 'center'
					}]
				});
			});
    </script>
</head>
<body>
    <div id='form'></div>
		<div id='form1'></div>

</body>
</html>

　　

ExtJs布局之border的更多相关文章

  1. ExtJS 布局-Border 布局（Border layout）

    更新记录: 2022年6月11日 发布. 2022年6月1日 开始. 1.说明 边框布局允许根据区域(如中心.北部.南部.西部和东部)指定子部件的位置.还可以调整子组件的大小和折叠. 2.设置布局方法 ...

  2. ExtJs布局详解

    序言 1.百度百科上说:ExtJs功能丰富,无人能出其右.无论是界面之美,还是功能之强,extjs都高居榜首. 2.呵呵,界面之美当是少不了布局的,这篇文章我写layout的七种布局.(extjs是4 ...

  3. ExtJs布局大全

    1.Fit 布局 在Fit 布局中,子元素将自动填满整个父容器.注意:在fit 布局下,对其子元素设置宽度是无效的.如果在fit 布局中放置了多个组件,则只会显示第一个子元素.在Fit 布局中,子元素 ...

  4. [Andrew]Ext.Net常用布局（Border布局）

    @(Html.X().Window().Width(600).Height(400).Layout(LayoutType.Border) .Items(p => {     p.Add(Html ...

  5. Extjs布局

    今天我来总结一下extjs下面的各种布局,不仅是为了给自己做笔记,同时,也希望让刚刚接触extjs的朋友们快速的了解下,大神就不用看了.废话不多说,开始布局的讲解. (以下代码都可以直接在javasc ...

  6. WPF入门教程系列十——布局之Border与ViewBox（五）

    九. Border Border 是一个装饰的控件,此控件绘制边框及背景,在 Border 中只能有一个子控件,若要显示多个子控件,需要将一个附加的 Panel 控件放置在父 Border 中.然后可 ...

  7. ExtJS布局方式（layout）图文详解

    Auto默认布局 不给下级组件指定大小和位置 Absolute绝对布局 可使用坐标(x.y)进行布局 Accordion手风琴布局 实现Accordion效果的布局,也可叫可折叠布局.也就是说使用该布 ...

  8. ExtJs布局之viewport

    <!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv ...

  9. ExtJs布局之accordion,fit,auto

    <!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv ...

随机推荐

  1. Media Player（APP）

    今天共享一下,以前做的影音播放器.比较简单.适合新手. 我上传了附件可以参考一下. PDF:http://files.cnblogs.com/files/hongguang-kim/MediaPlay ...

  2. hdu 1496 Equations

    题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=1496 Equations Description Consider equations having ...

  3. hdu 2822 Dogs

    题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=2822 Dogs Description Prairie dog comes again! Someda ...

  4. orcle 查询数据集对变量赋值函数

    create or replace function test(Name in varchar2 ) return varchar2 is V_CONTAINERDESC CHAR ); BEGIN ...

  5. ios 将Log日志重定向输出到文件中保存

    对于真机,日志没法保存,不好分析问题.所以有必要将日志保存到应用的Docunment目录下,并设置成共享文件,这样才能取出分析. 首先是日志输出,分为c的printf和标准的NSLog输出,print ...

  6. JSP的编译指令

    JSP有3个编译指令,是通知JSP引擎的消息,它不直接生成输出.编译指令都有默认值,无须为每个指令设置值. 常见的编译指令有如下三个: page:针对当前页面的指令. include:指定包含另一个页 ...

  7. OC-通讯录

    要求描述:用OC语言完成简易通讯录(实现增删改查)功能.(注:使用MRC) 1.创建AddressBook类. 1)使用字典作为容器,字典的Key值为分组名(姓名首字母),value值为数组,数组中存 ...

  8. 校园导游之NABC个人分析

    校园导游之NABC个人分析 Need: 为不熟悉校园环境的人们(如新生,来咱们学校参观滴)提供便利. Approach: 了解Andriod应用开发:导航功能之外还可以对学校进行宣传,比如拍一些学校的 ...

  9. 初学MFC

    学习使用MFC搭建界面.尝试使用MFC搭建了一个简单的基于对话框的计算器界面,包括模态对话框.非模态对话框.向导对话框等. // MFCApplicationAddDlg.h : 头文件 // #pr ...

  10. Python科学计算（二）windows下开发环境搭建（当用pip安装出现Unable to find vcvarsall.bat）

    用于科学计算Python语言真的是amazing! 方法一:直接安装集成好的软件 刚开始使用numpy.scipy这些模块的时候,图个方便直接使用了一个叫做Enthought的软件.Enthought ...