<!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(),
					layout: {
            type: 'hbox',
            align: 'stetch'
          },

					items: [{
						title: '子面板一',
						flex: 1,
            html: '1/4宽(flex=1)'
					},{
						title: '子面板二',
            flex: 1,
            html: '1/4宽(flex=1)'
					},{
						title: '子面板三',
						flex: 2,
            html: '2/4宽(flex=2)'
					}]
				});
			});
    </script>
</head>
<body>
    <div id='form'></div>
		<div id='form1'></div>

</body>
</html>

　　

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

  1. CSS3-弹性盒布局(Flex Box)

    弹性盒布局(Flex Box) 一.概念 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型 ...

  2. ExtJs布局详解

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

  3. CSS3弹性伸缩布局(一)——box布局

    CSS3弹性伸缩布局简介 2009年,W3C提出了一种崭新的方案----Flex布局(即弹性伸缩布局),它可以简便.完整.响应式地实现各种页面布局,包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃 ...

  4. Extjs布局

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

  5. CSS：CSS弹性盒子布局 Flexible Box

    一.简介 flexbox:全称Flexible Box, 弹性盒子布局.可以简单实现各种伸缩性的设计,它是由伸缩容器和伸缩项目组成.任何一个元素都可以指定为flexbox布局.这种新的布局方案在200 ...

  6. ExtJS布局控件

    Layout Controls Auto Layout Ext JS4中的容器的默认布局是自动布局.这个布局管理器会自动地将组件放在一个容器中. Fit Layout Fit布局安排了容器的内容完全占 ...

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

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

  8. ExtJs布局之tabPanel

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

  9. ExtJs布局之viewport

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

随机推荐

  1. [C#] 记-TinyMapper使用

    What is TinyMapper TinyMapper - a tiny and quick object mapper for .Net. The main advantage is perfo ...

  2. Android greenDao的简单配置和使用

    最近自学做东西的时候用到了一个收藏的功能,然后我想把东西存放到SQLite当中,然而自己传值的时候都是用到的实体类,所以存起来也比较麻烦,所以从网上找到一个greenDao的开源框架非常火,不仅效率高 ...

  3. linux之iptables总结

    netfilter/iptables概述:     netfilter/iptables是Linux内核防火墙架构,由netfilter实现功能,由iptables提供接口.     iptables ...

  4. wifi-sdio接口

    1.sdio接口层解析 SDIO总线 SDIO总线和USB总线类似,SDIO也有两端,其中一端是HOST端,另一端是device端.所有的通信都是由HOST端发送命令开始的,Device端只要能解析命 ...

  5. jquery-弹窗：layer

    键: 值 描述 下表的属性都是默认值,您可在调用时按需重新配置,他们可帮助你实现各式各样的风格.如是调用: $.layer({键: 值, 键: 值, …}); type: 0 层的类型.0:信息框(默 ...

  6. 今天开始应该使用 5 个JavaScript调试技巧

    原文:5 Javascript debugging tips you’ll start using today 我之前使用过用 printf debugging,自此之后我用这种方法似乎总能更快地解决 ...

  7. Linux rsync 同步

    rsync 是一个快速增量文件传输工具,它可以用于在同一主机备份内部的备分,我们还可以把它作为不同主机网络备份工具之用.本文主要讲述的是如何自架rsync服务器,以实现文件传输.备份和镜像.相对tar ...

  8. 初探Xamarin

    Xamarin是一个基于mono的商业项目,收费,而且贼贵.官网地址是:http://xamarin.com/ 就我个人理解,收费的Xamarin提供一个for visual studio 2010/ ...

  9. Chr()和chrb()的含义(转)

    http://blog.csdn.net/cunxiyuan108/article/details/5989701 Chr(charcode) 必要的 charcode 参数是一个用来识别某字符的 L ...

  10. Ionic 2 Guide

    Ionic 2 Guide 最近一直没更新博客,业余时间都在翻译Ionic2的文档.之前本来是想写一个入门,后来觉得干脆把官方文档翻译一下算了,因为官方文档就是最好的入门教程.后来越翻译越觉得这个事情 ...