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