ExtJs布局之BOX
<!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的更多相关文章
- CSS3-弹性盒布局(Flex Box)
弹性盒布局(Flex Box) 一.概念 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型 ...
- ExtJs布局详解
序言 1.百度百科上说:ExtJs功能丰富,无人能出其右.无论是界面之美,还是功能之强,extjs都高居榜首. 2.呵呵,界面之美当是少不了布局的,这篇文章我写layout的七种布局.(extjs是4 ...
- CSS3弹性伸缩布局(一)——box布局
CSS3弹性伸缩布局简介 2009年,W3C提出了一种崭新的方案----Flex布局(即弹性伸缩布局),它可以简便.完整.响应式地实现各种页面布局,包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃 ...
- Extjs布局
今天我来总结一下extjs下面的各种布局,不仅是为了给自己做笔记,同时,也希望让刚刚接触extjs的朋友们快速的了解下,大神就不用看了.废话不多说,开始布局的讲解. (以下代码都可以直接在javasc ...
- CSS:CSS弹性盒子布局 Flexible Box
一.简介 flexbox:全称Flexible Box, 弹性盒子布局.可以简单实现各种伸缩性的设计,它是由伸缩容器和伸缩项目组成.任何一个元素都可以指定为flexbox布局.这种新的布局方案在200 ...
- ExtJS布局控件
Layout Controls Auto Layout Ext JS4中的容器的默认布局是自动布局.这个布局管理器会自动地将组件放在一个容器中. Fit Layout Fit布局安排了容器的内容完全占 ...
- ExtJS布局方式(layout)图文详解
Auto默认布局 不给下级组件指定大小和位置 Absolute绝对布局 可使用坐标(x.y)进行布局 Accordion手风琴布局 实现Accordion效果的布局,也可叫可折叠布局.也就是说使用该布 ...
- ExtJs布局之tabPanel
<!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv ...
- ExtJs布局之viewport
<!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv ...
随机推荐
- Power Map 入门
Excel 的 Microsoft Power Map是三维 (3-D) 数据的可视化工具,允许您以新的方式看信息.电源映射允许您发现您可能看不到传统的二维 (2-d) 表和图中的见解. 使用Powe ...
- C#之玩转反射【转:http://www.cnblogs.com/yaozhenfa/p/CSharp_Reflection_1.html】
前言 之所以要写这篇关于C#反射的随笔,起因有两个: 第一个是自己开发的网站需要用到 其次就是没看到这方面比较好的文章. 所以下定决心自己写一篇,废话不多说开始进入正题. 前期准备 在VS20 ...
- ExtJS MVC学习手记 2
开发环境 eclipse(indigo) ExtJS4.0 开发目标 使用store.model和controller创建菜单树 开发步骤 之前我们已经建立了一个MVC的项目框架.现在要做的就是在这个 ...
- Hive与HBase区别
对于刚接触大数据的用户来说,要想区分Hive与HBase是有一定难度的.本文将尝试从其各自的定义.特点.限制.应用场景等角度来进行分析,以作抛砖引玉之用. ====Hive是什么?Apache Hiv ...
- Objective-C面向对象(一)
1.类和对象 1.1定义类 面向对象的程序设计中有两个重要概念:类(class)和对象(object),类事某一批对象的抽象,对象是一个具体存在的实体. Objective-C定义类需要氛围2个步骤 ...
- UITableView设置cell为不可选?
本文选自StackOverflow(简称:SOF)精选问答汇总系列文章之一,本系列文章将为读者分享国外最优质的精彩问与答,供读者学习和了解国外最新技术.本文将为读者讲解UITableView如何设置单 ...
- 20145129 《Java程序设计》第6周学习总结
20145129 <Java程序设计>第6周学习总结 教材学习内容总结 InputStream与OutStream 串流设计的概念 输入串流代表对象为java.io.InputStream ...
- Careercup - Google面试题 - 6271724635029504
2014-05-06 13:23 题目链接 原题: Finding a pair of elements from two sorted lists(or array) for which the s ...
- printf的一个常用技巧
acm 的题目经常要求输出最后面一位不能有空格: 用if语句显得代码难看: 实现如下: int a[5]={1,2,3,4,5}; for(int i=0;i<=4;i++) printf(&q ...
- linux I/O
一) I/O调度程序的总结 1) 当向设备写入数据块或是从设备读出数据块时,请求都被安置在一个队列中等待完成. 2) 每个块设备都有它自己的队列. 3) I/O调度程序负责维护 ...