examples/layout-browser/layouts/combination.js

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