| « | November 2025 | » | | 日 | 一 | 二 | 三 | 四 | 五 | 六 | | | | | | | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | | | | | | | |
|
公告 |
| 本博客在此声明所有文章均为转摘，只做资料收集使用。并无其他商业用途。 |
| Blog信息 |
|
blog名称:
日志总数:210
评论数量:205
留言数量:-19
访问次数:926185
建立时间:2007年5月10日 |
| |
|
 [EXT2.0]ExtJS2.0开发与实践笔记[2]——Ext中的Layout
文章收藏, 网上资源, 软件技术, 电脑与网络
李小白 发表于 2008/4/24 22:54:07 |
我们都知道java中有布局管理器的概念，通过调整布局器可以简化我们对可视组件的管理。而在Ext中同样提供了自己的布局实现，以简化web界面的开发与定制。如下图所示，Ext的Layout可分解为东、西、南、北、中5个基本区域。500)this.width=500'>在ExtJS2.0实现中，我们可以写成如下代码样式。ExtJS2.0配置方法如下：初识ExtJSLayoutExt.js
500)this.width=500'>500)this.width=500'>/**//**500)this.width=500'> * <p>Title: LoonFramework</p>500)this.width=500'> * <p>Description:Ext的Layout用例</p>500)this.width=500'> * <p>Copyright: Copyright (c) 2008</p>500)this.width=500'> * <p>Company: LoonFramework</p>500)this.width=500'> * <p>License: http://www.apache.org/licenses/LICENSE-2.0</p>500)this.width=500'> * @author chenpeng500)this.width=500'> * @email：ceponline@yahoo.com.cn500)this.width=500'> * @version 0.1500)this.width=500'> */500)this.width=500'>500)this.width=500'>LayoutExt = function()...{500)this.width=500'> //设定布局器及面板500)this.width=500'> //Ext1.1为Ext.BorderLayout500)this.width=500'> var Viewport = Ext.Viewport;500)this.width=500'> //变量设置500)this.width=500'> var root;500)this.width=500'> var layout;500)this.width=500'> //返回LayoutExt操作结果到onReady500)this.width=500'>500)this.width=500'> return ...{500)this.width=500'>500)this.width=500'> init: function()...{500)this.width=500'> root = this;500)this.width=500'> //初始化Ext状态管理器，此类可返回用户在Cookie中的操作状态500)this.width=500'> Ext.state.Manager.setProvider(new Ext.state.CookieProvider());500)this.width=500'> 500)this.width=500'>500)this.width=500'> layout = new Viewport(...{500)this.width=500'> //布局方式，'border'500)this.width=500'> layout: 'border',500)this.width=500'> items: [ //北 500)this.width=500'>500)this.width=500'> ...{500)this.width=500'> region: 'north', //显示区域500)this.width=500'> contentEl: 'north', //绑定的content500)this.width=500'> title: 'North', //名称500)this.width=500'> split: false,//分割线500)this.width=500'> collapsible: true, //是否允许折起500)this.width=500'> //在ie下无此项会报错(firefox无事……),默认分别为此布局左、上、右、下的边距,以此防止越界造成的崩溃。500)this.width=500'> //也可写作 'Object:数值'的形式，如 margins：{top: 0, left: 0, right:0, bottom: 0}500)this.width=500'> margins: '0 0 0 0' 500)this.width=500'> }, //西 500)this.width=500'>500)this.width=500'> ...{500)this.width=500'> region: 'west', //显示区域500)this.width=500'> contentEl: 'west', //绑定的content500)this.width=500'> title: 'West', //名称500)this.width=500'> split: true,//分割栏500)this.width=500'> width: 80, //宽500)this.width=500'> margins: '0 0 0 0' //在ie下无此项会报错500)this.width=500'> }, //东500)this.width=500'>500)this.width=500'> ...{500)this.width=500'> region: 'east', //显示区域500)this.width=500'> contentEl: 'east', //绑定的content500)this.width=500'> title: 'East', //名称500)this.width=500'> width: 80,500)this.width=500'> split: true,//分割栏500)this.width=500'> margins: '0 0 0 0' //在ie下无此项会报错500)this.width=500'> }, //南 500)this.width=500'>500)this.width=500'> ...{500)this.width=500'> region: 'south', //显示区域500)this.width=500'> contentEl: 'south', //绑定的content500)this.width=500'> title: 'South', //名称500)this.width=500'> split: true,//分割栏500)this.width=500'> margins: '0 0 0 0' //在ie下无此项会报错500)this.width=500'> }, //中500)this.width=500'>500)this.width=500'> new Ext.TabPanel(...{500)this.width=500'> region: 'center',500)this.width=500'> deferredRender: false,500)this.width=500'> activeTab: 0, //活动的tab索引500)this.width=500'>500)this.width=500'> items: [...{500)this.width=500'> contentEl: 'center1',500)this.width=500'> title: '中央区域1',500)this.width=500'> closable: true, //关闭项500)this.width=500'> autoScroll: true //是否自动显示滚动条500)this.width=500'>500)this.width=500'> }, ...{500)this.width=500'> contentEl: 'center2',500)this.width=500'> title: '中央区域2',500)this.width=500'> autoScroll: true500)this.width=500'> }]500)this.width=500'> })500)this.width=500'> ]500)this.width=500'> });500)this.width=500'> }500)this.width=500'> };500)this.width=500'>}500)this.width=500'>();500)this.width=500'>//加载onReady500)this.width=500'>Ext.onReady(LayoutExt.init, LayoutExt, true);500)this.width=500'>LayoutExt.html(定义html页面，设定及引用ext)
500)this.width=500'><html>500)this.width=500'> <head>500)this.width=500'> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">500)this.width=500'> <title>LayoutExt</title>500)this.width=500'> <!--加载ExtJs资源-->500)this.width=500'> <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"/>500)this.width=500'>500)this.width=500'> <script type="text/javascript" src="adapter/ext/ext-base.js">...500)this.width=500'> </script>500)this.width=500'>![]()
|
阅读全文(1881) | 回复(0) | 编辑 | 精华 |
| |
|