examples/layout-browser/layout-browser.js

   1 Ext.Loader.setConfig({enabled: true});
   2
   3 Ext.Loader.setPath('Ext.ux', '../ux');
   4
   5 Ext.require([
   6     'Ext.tip.QuickTipManager',
   7     'Ext.container.Viewport',
   8     'Ext.layout.*',
   9     'Ext.form.Panel',
  10     'Ext.form.Label',
  11     'Ext.grid.*',
  12     'Ext.data.*',
  13     'Ext.tree.*',
  14     'Ext.selection.*',
  15     'Ext.tab.Panel',
  16     'Ext.ux.layout.Center'
  17 ]);
  18
  19 //
  20 // This is the main layout definition.
  21 //
  22 Ext.onReady(function(){
  23
  24     Ext.tip.QuickTipManager.init();
  25
  26     // This is an inner body element within the Details panel created to provide a "slide in" effect
  27     // on the panel body without affecting the body's box itself.  This element is created on
  28     // initial use and cached in this var for subsequent access.
  29     var detailEl;
  30
  31     // Gets all layouts examples
  32     var layoutExamples = [];
  33     Ext.Object.each(getBasicLayouts(), function(name, example) {
  34         layoutExamples.push(example);
  35     });
  36
  37     Ext.Object.each(getCombinationLayouts(), function(name, example){
  38         layoutExamples.push(example);
  39     });
  40
  41     Ext.Object.each(getCustomLayouts(), function(name, example){
  42         layoutExamples.push(example);
  43     });
  44
  45     // This is the main content center region that will contain each example layout panel.
  46     // It will be implemented as a CardLayout since it will contain multiple panels with
  47     // only one being visible at any given time.
  48
  49     var contentPanel = {
  50          id: 'content-panel',
  51          region: 'center', // this is what makes this panel into a region within the containing layout
  52          layout: 'card',
  53          margins: '2 5 5 0',
  54          activeItem: 0,
  55          border: false,
  56          items: layoutExamples
  57     };
  58
  59     var store = Ext.create('Ext.data.TreeStore', {
  60         root: {
  61             expanded: true
  62         },
  63         proxy: {
  64             type: 'ajax',
  65             url: 'tree-data.json'
  66         }
  67     });
  68
  69     // Go ahead and create the TreePanel now so that we can use it below
  70      var treePanel = Ext.create('Ext.tree.Panel', {
  71         id: 'tree-panel',
  72         title: 'Sample Layouts',
  73         region:'north',
  74         split: true,
  75         height: 360,
  76         minSize: 150,
  77         rootVisible: false,
  78         autoScroll: true,
  79         store: store
  80     });
  81
  82     // Assign the changeLayout function to be called on tree node click.
  83     treePanel.getSelectionModel().on('select', function(selModel, record) {
  84         if (record.get('leaf')) {
  85             Ext.getCmp('content-panel').layout.setActiveItem(record.getId() + '-panel');
  86              if (!detailEl) {
  87                 var bd = Ext.getCmp('details-panel').body;
  88                 bd.update('').setStyle('background','#fff');
  89                 detailEl = bd.createChild(); //create default empty div
  90             }
  91             detailEl.hide().update(Ext.getDom(record.getId() + '-details').innerHTML).slideIn('l', {stopAnimation:true,duration: 200});
  92         }
  93     });
  94
  95     // This is the Details panel that contains the description for each example layout.
  96     var detailsPanel = {
  97         id: 'details-panel',
  98         title: 'Details',
  99         region: 'center',
 100         bodyStyle: 'padding-bottom:15px;background:#eee;',
 101         autoScroll: true,
 102         html: '<p class="details-info">When you select a layout from the tree, additional details will display here.</p>'
 103     };
 104
 105     // Finally, build the main layout once all the pieces are ready.  This is also a good
 106     // example of putting together a full-screen BorderLayout within a Viewport.
 107     Ext.create('Ext.Viewport', {
 108         layout: 'border',
 109         title: 'Ext Layout Browser',
 110         items: [{
 111             xtype: 'box',
 112             id: 'header',
 113             region: 'north',
 114             html: '<h1> Ext.Layout.Browser</h1>',
 115             height: 30
 116         },{
 117             layout: 'border',
 118             id: 'layout-browser',
 119             region:'west',
 120             border: false,
 121             split:true,
 122             margins: '2 0 5 5',
 123             width: 275,
 124             minSize: 100,
 125             maxSize: 500,
 126             items: [treePanel, detailsPanel]
 127         },
 128             contentPanel
 129         ],
 130         renderTo: Ext.getBody()
 131     });
 132 });