docs/source/combination.html

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