- 浏览: 1153659 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
RebeccaZhong:
严重: StandardWrapper.Throwableco ...
三步发布java方式的rest服务 -
RebeccaZhong:
严重: StandardWrapper.Throwableco ...
三步发布java方式的rest服务 -
冷酷月光:
楼主。请教一下。arcgis for android 有提供地 ...
ArcGIS API For Android离线地图的实现 -
winney117:
请问如何GET已有网页上的指定内容?比如百度文库中的某一篇文章 ...
三步发布java方式的rest服务 -
zige1012:
您好,我想问问我想换个自己地图的切片,也有4层(L0-L3), ...
ArcGIS API For Android离线地图的实现
extjs的容器组件都可以设置它的显示风格,它的有效值有 absolute, accordion, anchor, border, card, column, fit, form and table. 一共9种。简单总结一下,帮助记忆。
[list]absolute
顾名思义,在容器内部,根据指定的坐标定位显示
accordion
这个是最容易记的,手风琴效果
anchor
这个效果具体还不知道有什么用,就是知道注意一下
1.容器内的组件要么指定宽度,要么在anchor中同时指定高/宽,
2.anchor值通常只能为负值(指非百分比值),正值没有意义,
3.anchor必须为字符串值
border
将容器分为五个区域:east,south,west,north,center
card
像安装向导一样,一张一张显示
column
把整个容器看成一列,然后向容器放入子元素时
fit
一个子元素将充满整个容器(如果多个子元素则只有一个元素充满整个容器)
form
是一种专门用于管理表单中输入字段的布局
table
按照普通表格的方法布局子元素,用layoutConfig:{columns:3},//将父容器分成3列
[/list] .
[list]
Ext.OnReady(function(){ var panel=new Ext.Panel(//Ext.formPanel就是Panel中用了form布局 { renderTo:'paneldiv', title:'容器组件', layout:'accordion', width:500, height:200, layoutConfig:{animate:false}, items:[ {title:'元素1',html:''}, {title:'元素2',html:''}, {title:'元素3',html:''}, {title:'元素4',html:''} ] } ); });
1.容器内的组件要么指定宽度,要么在anchor中同时指定高/宽,
2.anchor值通常只能为负值(指非百分比值),正值没有意义,
3.anchor必须为字符串值
Ext.onReady(function() { var panel1 = new Ext.Panel({ title: "panel1", height: 100, anchor: '-50', html: "高度等于100,宽度=容器宽度-50" }); var panel2 = new Ext.Panel({ title: "panel2", height: 100, anchor: '50%', html: "高度等于100,宽度=容器宽度的50%" }); var panel3 = new Ext.Panel({ title: "panel3", anchor: '-10, -250', html: "宽度=容器宽度-10,高度=容器宽度-250" }); var win = new Ext.Window({ title: "Anchor Layout", height: 400, width: 400, plain: true, layout: 'anchor', items: [panel1, panel2,panel3] }); win.show(); });
Ext.onReady(function() { var button = Ext.get('show-btn'); var win; button.on('click', function() { //创建TabPanel var tabs = new Ext.TabPanel({ region: 'center', //border布局,将页面分成东,南,西,北,中五部分,这里表示TabPanel放在中间 margins: '3 3 3 0', activeTab: 0, defaults: { autoScroll: true }, items: [{ title: 'Bogus Tab', html: "第一个Tab的内容." }, { title: 'Another Tab', html: "我是另一个Tab" }, { title: 'Closable Tab', html: "这是一个可以关闭的Tab", closable: true }] }); //定义一个Panel var nav = new Ext.Panel({ title: 'Navigation', region: 'west', //放在西边,即左侧 split: true, width: 200, collapsible: true, //允许伸缩 margins: '3 0 3 3', cmargins: '3 3 3 3' }); //如果窗口第一次被打开时才创建 if (!win) { win = new Ext.Window({ title: 'Layout Window', closable: true, width: 600, height: 350, border : false, plain: true, layout: 'border', closeAction:'hide', items: [nav, tabs]//把上面创建的panel和TabPanel放在window中,并采用border方式布局 }); } win.show(button); }); });
Ext.onReady(function() { var i = 0; var navHandler = function(direction) { if (direction == -1) { i--; if (i < 0) { i = 0; } } if (direction == 1) { i++; if (i > 2) { i = 2; return false; } } var btnNext = Ext.get("move-next").dom.document.getElementsByTagName("button")[1]; var btnBack = Ext.get("move-next").dom.document.getElementsByTagName("button")[0]; if (i == 0) { btnBack.disabled = true; } else { btnBack.disabled = false; } if (i == 2) { btnNext.value = "完成"; btnNext.disabled = true; } else { btnNext.value = "下一步"; btnNext.disabled = false; } card.getLayout().setActiveItem(i); }; var card = new Ext.Panel({ width: 200, height: 200, title: '注册向导', layout: 'card', activeItem: 0, // make sure the active item is set on the container config! bodyStyle: 'padding:15px', defaults: { border: false }, bbar: [ { id: 'move-prev', text: '上一步', handler: navHandler.createDelegate(this, [-1]) }, '->', { id: 'move-next', text: '下一步', handler: navHandler.createDelegate(this, [1]) } ], items: [{ id: 'card-0', html: '<h1>欢迎来到注册向导!</h1><p>Step 1 of 3</p>' }, { id: 'card-1', html: '<h1>请填写注册资料!</h1><p>Step 2 of 3</p>' }, { id: 'card-2', html: '<h1>注册成功!</h1><p>Step 3 of 3 - Complete</p>' }], renderTo: "container" }); });
Ext.onReady(function() { var win = new Ext.Window({ title: "Column Layout", height: 300, width: 400, plain: true, layout: 'column', items: [{ title:"width=50%", columnWidth:0.5, html:"width=(容器宽度-容器内其它组件固定宽度)*50%", height:200 }, { title:"width=250px", width: 200, height:100, html:"固定宽度为250px" } ] }); win.show(); });
Ext.OnReady(function(){ var panel=new Ext.Panel( { renderTo:'paneldiv', title:'容器组件', layout:'fit', width:500, height:100, items:[ {title:'子元素1'}, {title:'子元素2'}, {title:'子元素3'}, {title:'子元素4'}, {title:'子元素5'} ] } ); });
Ext.onReady(function() { var win = new Ext.Window({ title: "form Layout", height: 150, width: 230, plain: true, bodyStyle: 'padding:15px', items: { xtype: "form", labelWidth: 30, defaultType: "textfield", frame:true, items: [ { fieldLabel:"姓名", name:"username", allowBlank:false }, { fieldLabel:"呢称", name:"nickname" }, { fieldLabel: "生日", xtype:'datefield', name: "birthday", width:127 } ] } }); win.show(); });
Ext.onReady(function(){ var panel=new Ext.Panel( { renderTo:'paneldiv', title:'容器组件', layout:'table', width:500, height:200, layoutConfig:{columns:3},//将父容器分成3列 items:[ {title:'元素1',html:'ssssssssss',rowspan:2,height:100}, {title:'元素2',html:'dfffsddsdfsdf',colspan:2}, {title:'元素3',html:'sdfsdfsdf'}, {title:'元素4',html:''} ] } ); });
[/list] .
评论
7 楼
lian819
2013-12-23
很经典的入门之作, 学习extjs布局, 全面又无门槛
6 楼
1914652991
2013-02-25
支持,相当的好
5 楼
endual
2012-05-11
这是相当不错啊,谢谢转到我博客了
4 楼
dmewy
2010-05-19
怎么没有VBOX啊...
3 楼
wjing63
2009-07-09
受用,多谢
2 楼
prothi
2009-05-07
讲解很全面,很快便可以将Ext布局掌握了,多谢了,不过希望下次写Ext.onReady时不要写成Ext.OnReady使用代码时好久我猜找到这个大小写错误~
1 楼
chenfengcn
2009-04-08
相当的不错呀,支持一下!!!
发表评论
-
EXT新手建议:建立自己的工具箱(Toolkit)
2008-12-11 09:56 2040转自:http://www.iteye.com/topic/1 ... -
JavaScript实现双击编辑
2008-12-09 19:20 3145其实就是元素的替代 <!DOCTYPE html ... -
JavaScript时间选择控件
2008-12-09 15:42 2848<!DOCTYPE HTML PUBLIC &quo ... -
ExtJS学习笔记二 Tree的Treepanel使用
2008-12-05 11:04 11151最近学习extjs发现了一个问题,extjs是一个Ja ... -
extjs学习资源
2008-12-02 16:49 1961ExtJs官方网 http://www.extjs.com/ ... -
extjs的Tooltips与QuickTips
2008-12-02 16:03 6400ExtJs是通过Ext.ToolTip和Ext.QuickTi ... -
ExtJS学习笔记一 ExtJS开发环境的配置
2008-11-26 11:03 3450<link rel="stylesheet ... -
自定义对象
2008-10-28 14:55 1221一,概述 在Java语言中,我们可以定义自己的类,并根据这些 ... -
javascript this详解
2008-10-28 13:04 1269在面向对象编程语言中,对于this关键字我们是非常熟悉的。比如 ... -
多选图片一次上传
2008-08-18 16:34 8142做上传图片功能的时候,经常会遇到这样一个问题,有时候可能需要一 ... -
使用external实现javscript调用flash的function
2008-08-18 15:22 1571先看Flash帮助的对于addCallback相关说明: p ... -
Javascript与flash交互通信控制的方法
2008-08-18 14:55 3327下面是一些在Flash和使用Javascript的HTML文件 ... -
控制 Flash Player 的 JavaScript 方法一览表
2008-08-18 12:14 4529播放动画:Play() 例:(网页中的 Flash id) ... -
利用数组提高IE拼接字符串效率
2008-08-17 15:54 1555今天终于静下心来研究程序的效率问题,竟然发现一个普通的循环拼接 ... -
多文件上传组件SWFUpload java环境小例子
2008-08-16 23:32 8950前几周做一个web企业项目,用户一定要求要有批量上传功能,而且 ... -
JS三种编解码方式
2008-08-14 12:28 1734js对文字进行编码涉及3个函数:escape,encodeUR ... -
深入JavaScript(apply和call函数)
2008-07-31 14:22 45001、关于javascript的apply和 ... -
关于JavaScript中apply与call的用法意义及区别
2008-07-31 14:12 2758JavaScript中有一个call和ap ... -
prototype实例一则
2008-07-31 13:21 3118为什么我还没有点击链接 zhuanyi函数就运行了。。。 & ... -
javascript中的触发器传递参数
2008-07-31 11:00 3133在一个结构良好的网页 ...
相关推荐
ExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.doc
本文将详细介绍ExtJS的9种布局样式,帮助开发者更好地理解和应用这些布局。 1. **Absolute Layout**: Absolute布局允许你在容器内根据指定的坐标定位显示组件。每个子组件需要有x和y坐标来确定其在容器中的位置。...
目录 1. ExtJs 结构树 2 ...25. extJs 2.0学习笔记(Ext.Element API总结) 69 26. extJs 2.0学习笔记(Element.js篇) 73 27. extJs 2.0学习笔记(DomHelper.js篇) 76 28. extJs 2.0学习笔记(ext.js篇) 77
Extjs4.0学习笔记,以下是部分介绍: xtjs4,创建Ext组件有了新的方式,就是Ext.create(....),而且可以使用动态加载JS的方式来加快组件的渲染,我们再也不必一次加载已经达到1MB的ext-all.js了,本文介绍如何在EXTJS4...
### Extjs 5 学习笔记之 SenchaCmd 深入解析 #### 一、SenchaCmd 的简介 SenchaCmd 是一个跨平台的命令行工具,它为基于 ExtJS 和 Sencha Touch 应用程序的开发周期提供了全面的支持。从创建应用程序的基础结构到...
13. **extJs 2.0 学习笔记**:这部分可能包括了针对2.0版本的一些特性讲解,如Ajax的使用、Ext.data模块的基础知识以及Panel组件的深入探讨。 以上只是对每个章节主题的简要概述,实际的学习笔记会更深入地讲解每个...
EXTJS in Action 是一本专为学习EXTJS编写的书籍,但这里我们主要关注学习笔记中的关键知识点。 首先,EXTJS的目录结构非常重要,因为它包含了所有必要的资源和源码: 1. `adapter`:这部分包含了适配器,用于将...
适合ExtJs开发人员extjs技术上手以及深入
ExtJs简明教程+Extjs学习笔记,来源网络,免费奉送,我讨厌需要资源分~
在探讨《ExtJS学习心得笔记》这一主题时,我们不仅会深入理解ExtJS框架的核心概念与实践技巧,还会从新手的角度出发,提炼出一系列有助于快速上手的学习策略,避免常见的学习陷阱,确保学习过程高效而有成效。...
### ExtJs 学习笔记知识点总结 #### 一、初识 ExtJs ##### 1.1 入门 - **背景介绍**: - **ExtJs**:一款强大的JavaScript库,用于构建现代化的Web应用程序。它提供了一系列丰富的UI组件、布局管理器以及数据...
语言程序设计资料:ExtJs学习笔记-2积分.doc
这个学习笔记涵盖了从基础到高级的多个主题,帮助读者深入理解ExtJs的核心概念和技术。以下是一些关键知识点的详细说明: 1. **ExtJs 结构树**:这部分内容可能涉及ExtJs如何构建可自定义的用户界面组件树,包括...
总结起来,EXTJS 的Table Layout是一种强大的布局工具,用于构建有规律、行列分明的用户界面。掌握EXTJS的控件使用和Table Layout,可以帮助开发者高效地创建出专业且用户友好的前端应用。在实际开发过程中,应根据...
ExtJS资料笔记(extjs各个属性的详解) ExtJS资料笔记(extjs各个属性的详解) ExtJS资料笔记(extjs各个属性的详解)
在Extjs中,给Panel设置布局的方法是设置Panel的Layout配置项,Extjs3.1.0版本提供了17种布局方式,这里会挑选一些常用的进行介绍: 1. AbsoluteLayout(绝对布局) 绝对布局是最直接的布局方式,每个组件的位置...