examples/layout-browser/layouts/combination.js

   1 /*!
   2  * Ext JS Library 3.0.3
   3  * Copyright(c) 2006-2009 Ext JS, LLC
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 /*
   8  * ================  TabPanel with nested layouts  =======================
   9  */
  10 // fake grid data used below in the tabsNestedLayouts config
  11 var myData = [
  12     ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
  13     ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
  14     ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
  15     ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
  16     ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
  17     ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
  18     ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
  19     ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
  20     ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
  21     ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
  22     ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
  23     ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
  24     ['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
  25     ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
  26     ['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
  27     ['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
  28     ['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
  29     ['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
  30     ['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
  31     ['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
  32     ['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
  33     ['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
  34     ['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
  35     ['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
  36     ['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
  37     ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
  38     ['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
  39     ['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
  40     ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
  41 ];
  42
  43 var tabsNestedLayouts = {
  44         xtype: 'tabpanel',
  45         id: 'tabs-nested-layouts-panel',
  46         title: 'TabPanel with Nested Layouts',
  47         activeTab: 0,
  48         items:[{
  49                 title: 'Foo',
  50                 layout: 'border',
  51                 items: [{
  52                         region: 'north',
  53                         title: 'North',
  54                         height: 75,
  55                         maxSize: 150,
  56                         margins: '5 5 0 5',
  57                         bodyStyle: 'padding:10px;',
  58                         split: true,
  59                         html: 'Some content'
  60                 },{
  61                         xtype: 'tabpanel',
  62                         plain: true,
  63                         region: 'center',
  64                         margins: '0 5 5 5',
  65                         activeTab: 0,
  66                         items: [{
  67                                 title: 'Inner Tab 1',
  68                                 bodyStyle: 'padding:10px;',
  69                                 html: 'See Inner Tab 2 for another nested BorderLayout.'
  70                         },{
  71                                 title: 'Inner Tab 2',
  72                                 cls: 'inner-tab-custom', // custom styles in layout-browser.css
  73                                 layout: 'border',
  74                 // Make sure IE can still calculate dimensions after a resize when the tab is not active.
  75                 // With display mode, if the tab is rendered but hidden, IE will mess up the layout on show:
  76                 hideMode: Ext.isIE ? 'offsets' : 'display',
  77                                 items: [{
  78                                         title: 'West',
  79                                         region: 'west',
  80                                         collapsible: true,
  81                                         width: 150,
  82                                         minSize: 100,
  83                                         maxSize: 350,
  84                                         margins: '5 0 5 5',
  85                                         cmargins: '5 5 5 5',
  86                                         html: 'Hello',
  87                                         bodyStyle:'padding:10px;',
  88                                         split: true
  89                                 },{
  90                                         xtype: 'tabpanel',
  91                                         region: 'center',
  92                                         margins: '5 5 5 0',
  93                                         tabPosition: 'bottom',
  94                                         activeTab: 0,
  95                                         items: [{
  96                                                 // Panels that are used as tabs do not have title bars since the tab
  97                                                 // itself is the title container.  If you want to have a full title
  98                                                 // bar within a tab, you can easily nest another panel within the tab
  99                                                 // with layout:'fit' to acheive that:
 100                                                 title: 'Bottom Tab',
 101                                                 layout: 'fit',
 102                                                 items: {
 103                                                         title: 'Interior Content',
 104                                                         bodyStyle:'padding:10px;',
 105                                                         border: false,
 106                                                         html: 'See the next tab for a nested grid. The grid is not rendered until its tab is first accessed.'
 107                                                 }
 108                                         },{
 109                                                 // A common mistake when adding grids to a layout is creating a panel first,
 110                                                 // then adding the grid to it.  GridPanel (xtype:'grid') is a Panel subclass,
 111                                                 // so you can add it directly as an item into a container.  Typically you will
 112                                                 // want to specify layout:'fit' on GridPanels so that they'll size along with
 113                                                 // their container and take up the available space.
 114                                                 title: 'Nested Grid',
 115                                                 xtype: 'grid',
 116                                                 layout: 'fit',
 117                                         store: new Ext.data.ArrayStore({
 118                                                 fields: [
 119                                                    {name: 'company'},
 120                                                    {name: 'price', type: 'float'},
 121                                                    {name: 'change', type: 'float'},
 122                                                    {name: 'pctChange', type: 'float'},
 123                                                    {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
 124                                                 ]
 125                                             }),
 126                                         columns: [
 127                                             {id:'company',header: 'Company', width: 160, sortable: true, dataIndex: 'company'},
 128                                             {header: 'Price', width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
 129                                             {header: 'Change', width: 75, sortable: true, dataIndex: 'change'},
 130                                             {header: '% Change', width: 75, sortable: true, dataIndex: 'pctChange'},
 131                                             {header: 'Last Updated', width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
 132                                         ],
 133                                         stripeRows: true,
 134                                         autoExpandColumn: 'company',
 135
 136                                         // Add a listener to load the data only after the grid is rendered:
 137                                         listeners: {
 138                                                 render: function(){
 139                                                         this.store.loadData(myData);
 140                                                 }
 141                                         }
 142                                         }]
 143                                 }]
 144                         }]
 145                 }]
 146         },{
 147                 title: 'Bar',
 148                 bodyStyle: 'padding:10px;',
 149                 html: 'Nothing to see here.'
 150         }]
 151 };
 152
 153 /*
 154  * ================  Absolute Layout Form  =======================
 155  */
 156 var absform = new Ext.form.FormPanel({
 157     baseCls: 'x-plain',
 158     layout:'absolute',
 159     url:'save-form.php',
 160     border: true,
 161     defaultType: 'textfield',
 162
 163     items: [{
 164         x: 0,
 165         y: 5,
 166         xtype: 'label',
 167         text: 'From:'
 168     },{
 169         x: 55,
 170         y: 0,
 171         name: 'from',
 172         anchor:'100%'  // anchor width by %
 173     },{
 174         x: 0,
 175         y: 32,
 176         xtype: 'label',
 177         text: 'To:'
 178     },{
 179         // The button is not a Field subclass, so it must be
 180         // wrapped in a panel for proper positioning to work
 181         xtype: 'panel',
 182         x: 55,
 183         y: 27,
 184         items: {
 185                 xtype: 'button',
 186                 text: 'Contacts...'
 187         }
 188     },{
 189         x: 135,
 190         y: 27,
 191         name: 'to',
 192         anchor: '100%'  // anchor width by %
 193     },{
 194         x: 0,
 195         y: 59,
 196         xtype: 'label',
 197         text: 'Subject:'
 198     },{
 199         x: 55,
 200         y: 54,
 201         name: 'subject',
 202         anchor: '100%'  // anchor width by %
 203     },{
 204         x:0,
 205         y: 81,
 206         xtype: 'textarea',
 207         name: 'msg',
 208         anchor: '100% 100%'  // anchor width and height
 209     }]
 210 });
 211
 212 var absoluteForm = {
 213     title: 'Absolute Layout Form',
 214     id: 'abs-form-panel',
 215     layout: 'fit',
 216     bodyStyle: 'padding:15px;',
 217     items: {
 218         title: 'New Email',
 219         cls: 'email-form',
 220             layout: 'fit',
 221             frame: true,
 222             bodyStyle: 'padding:10px 5px 5px;',
 223             items: absform,
 224
 225             tbar: [{
 226                 text: 'Send',
 227                 iconCls: 'icon-send'
 228             },'-',{
 229                 text: 'Save',
 230                 iconCls: 'icon-save'
 231             },{
 232                 text: 'Check Spelling',
 233                 iconCls: 'icon-spell'
 234             },'-',{
 235                 text: 'Print',
 236                 iconCls: 'icon-print'
 237             },'->',{
 238                 text: 'Attach a File',
 239                 iconCls: 'icon-attach'
 240             }]
 241     }
 242 };