Ext 布局 例子 解析
Ext布局例子解析
源码是ext布局例子，其实也很简单，下面逐一解释：
<html> <head> <title>Complex Layout</title> <link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" /> <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script> <script type="text/javascript" src="../../ext-all.js"></script> <style type="text/css"> html, body { font:normal 12px verdana; margin:0; padding:0; border:0 none; overflow:hidden; height:100%; } p { margin:5px; } .settings { background-image:url(../shared/icons/fam/folder_wrench.png); } .nav { background-image:url(../shared/icons/fam/folder_go.png); } </style> //以上是载入相关的js和初始化HTML样式 <script type="text/javascript"> Ext.onReady(function(){// Now Ready？Go！ Ext.state.Manager.setProvider(new Ext.state.CookieProvider()); /*This is the global state manager. By default all components that are "state aware" check this class for state information if you don't pass them a custom state provider. In order for this class to be useful, it must be initialized with a provider when your application initializes.这是Ext官方对state.Manager的解释，意思大概是说这是一个全局的状态管理器，缺省情况“状态”是激活的，如果自定义的状态提供器无法工作，请检查“状态”的信息，为了使这个类生效，你必须在你的程序初始化的时候为这个“状态”初始化其提供器，CookieProvider是缺省的提供器，是用cookie的方式保存状态信息 The default Provider implementation which saves state via cookies.不知道Ext以后能否提供状态保存在数据库里面，这样用户上次使用的状态结果就可以在下次用户登陆的时候保留下来。*/ var viewport = new Ext.Viewport({ /*A specialized container representing the viewable application area (the browser viewport). The Viewport renders itself to the document body, and automatically sizes itself to the size of the browser viewport and manages window resizing. There may only be one Viewport created in a page. Inner layouts are available by virtue of the fact that all Panel s added to the Viewport, either through its items , or through the items, or the add method of any of its child Panels may themselves have a layout.The Viewport does not provide scrolling, so child Panels within the Viewport should provide for scrolling if needed using the autoScroll config.初始化了一个状态管理器，现在需要开始对页面进行布局，Viewport的用途是：是一个专门的容器，用来构建一个适应浏览器的程序界面，该界面将其自身渲染至文档的主体中，并且自动根据浏览器的大小缩放其自身，同时管理窗口的缩放动作。一个页面只允许创建一个界面，通过其自身的item，或是其他的items，或是添加其子面板的方法，从而达到实现布局的目的。界面本省并不提供卷动效果，如果需要该效果，可以在它的子面板内提供该效果。*/ layout:'border',// 布局类型 items:[//Viewport的items new Ext.BoxComponent({ /* Base class for any visual Ext.Component that uses a box container. BoxComponent provides automatic box model adjustments for sizing and positioning and will work correctly withnin the Component rendering model. All container classes should subclass BoxComponent so that they will work consistently when nested within other Ext layout containers.是任何虚拟Ext.Component的基类，使用一个盒子容器。它提供的盒子模型利用其大小和位置均可调整的特性，使其可以在Component渲染模型里面正确的显示。所有的容器类都应该置于它的子类下，这样当容器类与其他Ext的布局容器互相嵌套时才能一直正确显示*/ region:'north',// north区域 el: 'north', height:32 }),{ region:'south',// south区域 contentEl: 'south',// 内容来源在DIV id为south split:true, height: 100, minSize: 100, maxSize: 200, collapsible: true,// 可折叠属性 title:'South', margins:'0 0 0 0' }, { region:'east',// 东部区域 title: 'East Side', collapsible: true,// 可折叠 split:true, width: 225, minSize: 175, maxSize: 400, layout:'fit', margins:'0 5 0 0', items: new Ext.TabPanel({ /*A basic tab container. Tab panels can be used exactly like a standard Ext.Panel for layout purposes, but also have special support for containing child Panels that get automatically converted into tabs.一个基本的标签容器，就像一个标准的Ext.Panel 专为布局所用，但仍然特别支持对容器的子面板 转化为标签 */ border:false, activeTab:1,// 初始化的标签数量 tabPosition:'bottom',// 标签位置 items:[{ html:'<p>A TabPanel component can be a region.</p>',//标签内容 title: 'A Tab', closable: true,//是否可以被关闭 autoScroll:true//是否可以自动卷动 }, new Ext.grid.PropertyGrid({ /* A specialized grid implementation intended to mimic the traditional property grid as typically seen in development IDEs. Each row in the grid represents a property of some object, and the data is stored as a set of name/value pairs in Ext.grid.PropertyRecord s.一个特别的栅格工具，模仿传统的属性栅格，比如特别是程序开发的IDE里面。栅格内的每一行代表某个对象的属性，数据以名称/数值成对的方式储存在Ext.grid.PropertyRecords内*/ title: 'Property Grid', closable: true, source: {// PropertyRecords内的数据 "(name)": "Properties Grid", "grouping": false, "autoFitColumns": true, "productionQuality": false, "created": new Date(Date.parse('10/15/2006')), "tested": false, "version": .01, "borderWidth": 1 } })] }) },{ region:'west',// 西部区域 id:'west-panel',// 对应DIV标签 title:'West', split:true, width: 200, minSize: 175, maxSize: 400, collapsible: true, margins:'0 0 0 5', layout:'accordion',// 布局方式 layoutConfig:{ animate:true// 因为使用accordion的布局方式，肯定需要上下滑动啦 }, items: [{ contentEl: 'west',// 内容来源 title:'Navigation', border:false, iconCls:'nav'// 图标来源 },{ contentEl: 'west1', title:'Settings', html:'<p>Some settings in here.</p>', border:false, iconCls:'settings' }] }, new Ext.TabPanel({// 创建标签 region:'center',// 中央区域 deferredRender:false, activeTab:0, items:[{ contentEl:'center1', title: 'Close Me', closable:true, autoScroll:true },{ contentEl:'center2', title: 'Center Panel', autoScroll:true }] }) ,{ region:'north',// 后来自己加的北部区域，其实一早就已经定义了 contentEl: 'north', split:true, height: 100, minSize: 100, maxSize: 200, collapsible: true, title:'North', margins:'0 0 0 0' } ] }); Ext.get("hideit").on('click', function() {// 获取DOM对象DIV的id为hideit的a元素 var w = Ext.getCmp('west-panel'); /*Shorthand for Ext.ComponentMgr.get Provides a registry of all Components (specifically subclasses of Ext.Component ) on a page so that they can be easily accessed by component id (see Ext.getCmp ).This object also provides a registry of available Component classes indexed by a mnemonic code known as the Component's Ext.Component.xtype . The xtype provides a way to avoid instantiating child Components when creating a full, nested config object for a complete Ext page.A child Component may be specified simply as a config object as long as the correct xtype is specified so that if and when the Component needs rendering, the correct type can be looked up for lazy instantiation.是 Ext.ComponentMgr.get 的缩写的写法，它提供了一个页面上所有组件的注册表，使得他们可以很容易的用组件id访问到。该对象也提供了一个由 Ext.Component.xtype 所声明的由记忆码索引的组件表，当创建一个齐全的，互相嵌套的完全的ext页面的配置时，xtype提供了一个避免实例化子组件的方法。一个子组件将很容易指定为一个配置对象，只要xtype被正确的指定，这样一来，如果当组件需要渲染的时候，正确的类型能够被找到并无需再次实例化。*/ w.collapsed ? w.expand() : w.collapse(); }); }); </script> </head> <body> <script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES --> <div id="west"> <p>Hi. I'm the west panel.</p> </div> <div id="west1"> <p>Hi,I'm the west NO.2 pannel</p> </div> <div id="north"> <p>north - generally for menus, toolbars and/or advertisements</p> </div> <div id="center2"> <a id="hideit" href="#">Toggle the west region</a> <p> My closable attribute is set to false so you can't close me. The other center panels can be closed.</p> <p>The center panel automatically grows to fit the remaining space in the container that isn't taken up by the border regions.</p> <hr> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit. Quisque dolor magna, ornare sed, elementum porta, luctus in, leo.</p> <p>Donec quis dui. Sed imperdiet. Nunc consequat, est eu sollicitudin gravida, mauris ligula lacinia mauris, eu porta dui nisl in velit. Nam congue, odio id auctor nonummy, augue lectus euismod nunc, in tristique turpis dolor sed urna. Donec sit amet quam eget diam fermentum pharetra. Integer tincidunt arcu ut purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla blandit malesuada odio. Nam augue. Aenean molestie sapien in mi. Suspendisse tincidunt. Pellentesque tempus dui vitae sapien. Donec aliquam ipsum sit amet pede. Sed scelerisque mi a erat. Curabitur rutrum ullamcorper risus. Maecenas et lorem ut felis dictum viverra. Fusce sem. Donec pharetra nibh sit amet sapien.</p> <p>Aenean ut orci sed ligula consectetuer pretium. Aliquam odio. Nam pellentesque enim. Nam tincidunt condimentum nisi. Maecenas convallis luctus ligula. Donec accumsan ornare risus. Vestibulum id magna a nunc posuere laoreet. Integer iaculis leo vitae nibh. Nam vulputate, mauris vitae luctus pharetra, pede neque bibendum tellus, facilisis commodo diam nisi eget lacus. Duis consectetuer pulvinar nisi. Cras interdum ultricies sem. Nullam tristique. Suspendisse elementum purus eu nisl. Nulla facilisi. Phasellus ultricies ullamcorper lorem. Sed euismod ante vitae lacus. Nam nunc leo, congue vehicula, luctus ac, tempus non, ante. Morbi suscipit purus a nulla. Sed eu diam.</p> <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras imperdiet felis id velit. Ut non quam at sem dictum ullamcorper. Vestibulum pharetra purus sed pede. Aliquam ultrices, nunc in varius mattis, felis justo pretium magna, eget laoreet justo eros id eros. Aliquam elementum diam fringilla nulla. Praesent laoreet sapien vel metus. Cras tempus, sapien condimentum dictum dapibus, lorem augue fringilla orci, ut tincidunt eros nisi eget turpis. Nullam nunc nunc, eleifend et, dictum et, pharetra a, neque. Ut feugiat. Aliquam erat volutpat. Donec pretium odio nec felis. Phasellus sagittis lacus eget sapien. Donec est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p> <p>Vestibulum semper. Nullam non odio. Aliquam quam. Mauris eu lectus non nunc auctor ullamcorper. Sed tincidunt molestie enim. Phasellus lobortis justo sit amet quam. Duis nulla erat, varius a, cursus in, tempor sollicitudin, mauris. Aliquam mi velit, consectetuer mattis, consequat tristique, pulvinar ac, nisl. Aliquam mattis vehicula elit. Proin quis leo sed tellus scelerisque molestie. Quisque luctus. Integer mattis. Donec id augue sed leo aliquam egestas. Quisque in sem. Donec dictum enim in dolor. Praesent non erat. Nulla ultrices vestibulum quam.</p> <p>Duis hendrerit, est vel lobortis sagittis, tortor erat scelerisque tortor, sed pellentesque sem enim id metus. Maecenas at pede. Nulla velit libero, dictum at, mattis quis, sagittis vel, ante. Phasellus faucibus rutrum dui. Cras mauris elit, bibendum at, feugiat non, porta id, neque. Nulla et felis nec odio mollis vehicula. Donec elementum tincidunt mauris. Duis vel dui. Fusce iaculis enim ac nulla. In risus.</p> <p>Donec gravida. Donec et enim. Morbi sollicitudin, lacus a facilisis pulvinar, odio turpis dapibus elit, in tincidunt turpis felis nec libero. Nam vestibulum tempus ipsum. In hac habitasse platea dictumst. Nulla facilisi. Donec semper ligula. Donec commodo tortor in quam. Etiam massa. Ut tempus ligula eget tellus. Curabitur id velit ut velit varius commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Fusce ornare pellentesque libero. Nunc rhoncus. Suspendisse potenti. Ut consequat, leo eu accumsan vehicula, justo sem lobortis elit, ac sollicitudin ipsum neque nec ante.</p> <p>Aliquam elementum mauris id sem. Vivamus varius, est ut nonummy consectetuer, nulla quam bibendum velit, ac gravida nisi felis sit amet urna. Aliquam nec risus. Maecenas lacinia purus ut velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sit amet dui vitae lacus fermentum sodales. Donec varius dapibus nisl. Praesent at velit id risus convallis bibendum. Aliquam felis nibh, rutrum nec, blandit non, mattis sit amet, magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam varius dignissim nibh. Quisque id orci ac ante hendrerit molestie. Aliquam malesuada enim non neque.</p> </div> <div id="center1"> <p><b>Done reading me? Close me by clicking the X in the top right corner.</b></p> <p>Vestibulum semper. Nullam non odio. Aliquam quam. Mauris eu lectus non nunc auctor ullamcorper. Sed tincidunt molestie enim. Phasellus lobortis justo sit amet quam. Duis nulla erat, varius a, cursus in, tempor sollicitudin, mauris. Aliquam mi velit, consectetuer mattis, consequat tristique, pulvinar ac, nisl. Aliquam mattis vehicula elit. Proin quis leo sed tellus scelerisque molestie. Quisque luctus. Integer mattis. Donec id augue sed leo aliquam egestas. Quisque in sem. Donec dictum enim in dolor. Praesent non erat. Nulla ultrices vestibulum quam.</p> <p>Duis hendrerit, est vel lobortis sagittis, tortor erat scelerisque tortor, sed pellentesque sem enim id metus. Maecenas at pede. Nulla velit libero, dictum at, mattis quis, sagittis vel, ante. Phasellus faucibus rutrum dui. Cras mauris elit, bibendum at, feugiat non, porta id, neque. Nulla et felis nec odio mollis vehicula. Donec elementum tincidunt mauris. Duis vel dui. Fusce iaculis enim ac nulla. In risus.</p> <p>Donec gravida. Donec et enim. Morbi sollicitudin, lacus a facilisis pulvinar, odio turpis dapibus elit, in tincidunt turpis felis nec libero. Nam vestibulum tempus ipsum. In hac habitasse platea dictumst. Nulla facilisi. Donec semper ligula. Donec commodo tortor in quam. Etiam massa. Ut tempus ligula eget tellus. Curabitur id velit ut velit varius commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Fusce ornare pellentesque libero. Nunc rhoncus. Suspendisse potenti. Ut consequat, leo eu accumsan vehicula, justo sem lobortis elit, ac sollicitudin ipsum neque nec ante.</p> <p>Aliquam elementum mauris id sem. Vivamus varius, est ut nonummy consectetuer, nulla quam bibendum velit, ac gravida nisi felis sit amet urna. Aliquam nec risus. Maecenas lacinia purus ut velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sit amet dui vitae lacus fermentum sodales. Donec varius dapibus nisl. Praesent at velit id risus convallis bibendum. Aliquam felis nibh, rutrum nec, blandit non, mattis sit amet, magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam varius dignissim nibh. Quisque id orci ac ante hendrerit molestie. Aliquam malesuada enim non neque.</p> </div> <div id="props-panel" style="width:200px;height:200px;overflow:hidden;"> </div> <div id="south"> <p>south - generally for informational stuff, also could be for status bar</p> </div> </body> </html> |
9794
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
