examples/layout-browser/layouts/combination.js

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