examples/layout-browser/layout-browser.js

   1 /*!
   2  * Ext JS Library 3.1.1
   3  * Copyright(c) 2006-2010 Ext JS, LLC
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7
   8 //
   9 // This is the main layout definition.
  10 //
  11 Ext.onReady(function(){
  12
  13         Ext.QuickTips.init();
  14
  15         // This is an inner body element within the Details panel created to provide a "slide in" effect
  16         // on the panel body without affecting the body's box itself.  This element is created on
  17         // initial use and cached in this var for subsequent access.
  18         var detailEl;
  19
  20         // This is the main content center region that will contain each example layout panel.
  21         // It will be implemented as a CardLayout since it will contain multiple panels with
  22         // only one being visible at any given time.
  23         var contentPanel = {
  24                 id: 'content-panel',
  25                 region: 'center', // this is what makes this panel into a region within the containing layout
  26                 layout: 'card',
  27                 margins: '2 5 5 0',
  28                 activeItem: 0,
  29                 border: false,
  30                 items: [
  31                         // from basic.js:
  32                         start, absolute, accordion, anchor, border, cardTabs, cardWizard, column, fit, form, table, vbox, hbox,
  33                         // from custom.js:
  34                         rowLayout, centerLayout,
  35                         // from combination.js:
  36                         absoluteForm, tabsNestedLayouts
  37                 ]
  38         };
  39
  40         // Go ahead and create the TreePanel now so that we can use it below
  41     var treePanel = new Ext.tree.TreePanel({
  42         id: 'tree-panel',
  43         title: 'Sample Layouts',
  44         region:'north',
  45         split: true,
  46         height: 300,
  47         minSize: 150,
  48         autoScroll: true,
  49
  50         // tree-specific configs:
  51         rootVisible: false,
  52         lines: false,
  53         singleExpand: true,
  54         useArrows: true,
  55
  56         loader: new Ext.tree.TreeLoader({
  57             dataUrl:'tree-data.json'
  58         }),
  59
  60         root: new Ext.tree.AsyncTreeNode()
  61     });
  62
  63         // Assign the changeLayout function to be called on tree node click.
  64     treePanel.on('click', function(n){
  65         var sn = this.selModel.selNode || {}; // selNode is null on initial selection
  66         if(n.leaf && n.id != sn.id){  // ignore clicks on folders and currently selected node
  67                 Ext.getCmp('content-panel').layout.setActiveItem(n.id + '-panel');
  68                 if(!detailEl){
  69                         var bd = Ext.getCmp('details-panel').body;
  70                         bd.update('').setStyle('background','#fff');
  71                         detailEl = bd.createChild(); //create default empty div
  72                 }
  73                 detailEl.hide().update(Ext.getDom(n.id+'-details').innerHTML).slideIn('l', {stopFx:true,duration:.2});
  74         }
  75     });
  76
  77         // This is the Details panel that contains the description for each example layout.
  78         var detailsPanel = {
  79                 id: 'details-panel',
  80         title: 'Details',
  81         region: 'center',
  82         bodyStyle: 'padding-bottom:15px;background:#eee;',
  83                 autoScroll: true,
  84                 html: '<p class="details-info">When you select a layout from the tree, additional details will display here.</p>'
  85     };
  86
  87         // Finally, build the main layout once all the pieces are ready.  This is also a good
  88         // example of putting together a full-screen BorderLayout within a Viewport.
  89     new Ext.Viewport({
  90                 layout: 'border',
  91                 title: 'Ext Layout Browser',
  92                 items: [{
  93                         xtype: 'box',
  94                         region: 'north',
  95                         applyTo: 'header',
  96                         height: 30
  97                 },{
  98                         layout: 'border',
  99                 id: 'layout-browser',
 100                 region:'west',
 101                 border: false,
 102                 split:true,
 103                         margins: '2 0 5 5',
 104                 width: 275,
 105                 minSize: 100,
 106                 maxSize: 500,
 107                         items: [treePanel, detailsPanel]
 108                 },
 109                         contentPanel
 110                 ],
 111         renderTo: Ext.getBody()
 112     });
 113 });