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 @@ - - - The source code - - - - -
-//
-// 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: '

When 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() - }); -}); -
- - \ No newline at end of file