X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/c930e9176a5a85509c5b0230e2bff5c22a591432..25ef3491bd9ae007ff1fc2b0d7943e6eaaccf775:/docs/source/layout-browser.html?ds=sidebyside diff --git a/docs/source/layout-browser.html b/docs/source/layout-browser.html deleted file mode 100644 index 998844fa..00000000 --- a/docs/source/layout-browser.html +++ /dev/null @@ -1,117 +0,0 @@ - -
--// -// This is the main layout definition. -// -Ext.onReady(function(){ - - Ext.QuickTips.init(); - - // This is an inner body element within the Details panel created to provide a "slide in" effect - // on the panel body without affecting the body's box itself. This element is created on - // initial use and cached in this var for subsequent access. - var detailEl; - - // This is the main content center region that will contain each example layout panel. - // It will be implemented as a CardLayout since it will contain multiple panels with - // only one being visible at any given time. - var contentPanel = { - id: 'content-panel', - region: 'center', // this is what makes this panel into a region within the containing layout - layout: 'card', - margins: '2 5 5 0', - activeItem: 0, - border: false, - items: [ - // from basic.js: - start, absolute, accordion, anchor, border, cardTabs, cardWizard, column, fit, form, table, vbox, hbox, - // from custom.js: - rowLayout, centerLayout, - // from combination.js: - absoluteForm, tabsNestedLayouts - ] - }; - - // Go ahead and create the TreePanel now so that we can use it below - var treePanel = new Ext.tree.TreePanel({ - id: 'tree-panel', - title: 'Sample Layouts', - region:'north', - split: true, - height: 300, - minSize: 150, - autoScroll: true, - - // tree-specific configs: - rootVisible: false, - lines: false, - singleExpand: true, - useArrows: true, - - loader: new Ext.tree.TreeLoader({ - dataUrl:'tree-data.json' - }), - - root: new Ext.tree.AsyncTreeNode() - }); - - // Assign the changeLayout function to be called on tree node click. - treePanel.on('click', function(n){ - var sn = this.selModel.selNode || {}; // selNode is null on initial selection - if(n.leaf && n.id != sn.id){ // ignore clicks on folders and currently selected node - Ext.getCmp('content-panel').layout.setActiveItem(n.id + '-panel'); - if(!detailEl){ - var bd = Ext.getCmp('details-panel').body; - bd.update('').setStyle('background','#fff'); - detailEl = bd.createChild(); //create default empty div - } - detailEl.hide().update(Ext.getDom(n.id+'-details').innerHTML).slideIn('l', {stopFx:true,duration:.2}); - } - }); - - // This is the Details panel that contains the description for each example layout. - var detailsPanel = { - id: 'details-panel', - title: 'Details', - region: 'center', - bodyStyle: 'padding-bottom:15px;background:#eee;', - autoScroll: true, - html: '- - \ No newline at end of fileWhen you select a layout from the tree, additional details will display here.
' - }; - - // Finally, build the main layout once all the pieces are ready. This is also a good - // example of putting together a full-screen BorderLayout within a Viewport. - new Ext.Viewport({ - layout: 'border', - title: 'Ext Layout Browser', - items: [{ - xtype: 'box', - region: 'north', - applyTo: 'header', - height: 30 - },{ - layout: 'border', - id: 'layout-browser', - region:'west', - border: false, - split:true, - margins: '2 0 5 5', - width: 275, - minSize: 100, - maxSize: 500, - items: [treePanel, detailsPanel] - }, - contentPanel - ], - renderTo: Ext.getBody() - }); -}); -