EXT学习日记1-Viewport
??? 最近由于公司项目前端人员紧缺，也有幸的被从java开发转到Web端开发，并使用ext这个最流行的AJAX框架。对于前段时间的学习，今天领导叫做一个项目的主界面，经过讨论，界面的主要布局直接用extjs提供的布局borderLayout，而Ext提供的布局经常跟Viewport容器结合起来用
? Viewport不需要指定renderTo，因为它直接渲染到body ，所以在一个页面中只能有一个Viewport,下面给出Viewport的例子：
?????
new Ext.Viewport({ layout: 'border', items: [{ region: 'north', //顶部面板 html: '<h1 name="code"> Ext.onReady(function(){ // NOTE: This is an example showing simple state management. During development, // it is generally best to disable state management as dynamically-generated ids // can change across page loads, leading to unpredictable results. The developer // should ensure that stable state ids are set for stateful components in real apps. Ext.state.Manager.setProvider(new Ext.state.CookieProvider()); var viewport = new Ext.Viewport({ layout: 'border', items: [ // create instance immediately new Ext.BoxComponent({ region: 'north', height: 32, // give north and south regions a height autoEl: { tag: 'div', html:'<p>north - generally for menus, toolbars and/or advertisements</p>' } }), { // lazily created panel (xtype:'panel' is default) region: 'south', contentEl: 'south', // 渲染到html的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, // give east and west regions a width minSize: 175, maxSize: 400, margins: '0 5 0 0', layout: 'fit', // specify layout manager for items items: // this TabPanel is wrapped by another Panel so the title will be applied new Ext.TabPanel({ border: false, // already wrapped so don't add another border activeTab: 1, // second tab initially active tabPosition: 'bottom', items: [{ html: '<p>A TabPanel component can be a region.</p>', title: 'A Tab', autoScroll: true }, new Ext.grid.PropertyGrid({ title: 'Property Grid', closable: true, source: { "(name)": "Properties Grid", "grouping": false, "autoFitColumns": true, "productionQuality": false, "created": new Date(Date.parse('10/15/2006')), "tested": false, "version": 0.01, "borderWidth": 1 } })] }) }, { region: 'west', //左部面板 id: 'west-panel', // see Ext.getCmp() below title: 'West', split: true, width: 200, minSize: 175, maxSize: 400, collapsible: true, margins: '0 0 0 5', layout: { type: 'accordion', animate: true }, items: [{ contentEl: 'west', // 渲染到html的west title: 'Navigation', border: false, iconCls: 'nav' // see the HEAD section for style used }, { title: 'Settings', html: '<p>Some settings in here.</p>', border: false, iconCls: 'settings' }] }, // in this instance the TabPanel is not wrapped by another panel // since no title is needed, this Panel is added directly // as a Container new Ext.TabPanel({ region: 'center', // a center region is ALWAYS required for border layout deferredRender: false, activeTab: 0, // first tab initially active items: [{ contentEl: 'center1', title: 'Close Me', closable: true, autoScroll: true }, { contentEl: 'center2', title: 'Center Panel', autoScroll: true }] })] }); // get a reference to the HTML element with id "hideit" and add a click listener to it Ext.get("hideit").on('click', function(){ // get a reference to the Panel that was created with id = 'west-panel' var w = Ext.getCmp('west-panel'); // expand or collapse that Panel based on its collapsed property state w.collapsed ? w.expand() : w.collapse(); }); });??
<div id="west" 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> </div> <div id="center1" style="width:200px;height:200px;overflow:hidden;"> </div> <div id="south" class="x-hide-display"> <p>south - generally for informational stuff, also could be for status bar</p> </div>
?
当然，通过其他组件与Viewport结合还可以开发各种各样炫的界面！
?
?