examples/test-case-2b/index.html

   1 <html>
   2 <head>
   3  <title>Test Case for Ext JS</title>
   4
   5 <!--- Trunk --->
   6  <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
   7
   8 <!--- 3.0.3 --->
   9  <!---
  10  <link rel="stylesheet" type="text/css" href="/ext-versions/ext-3.0.3/resources/css/ext-all.css" />
  11   --->
  12
  13  <link rel="stylesheet" type="text/css" href="resources/bubble-f1eedd.css" />
  14
  15 <!--- Trunk --->
  16  <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
  17  <script type="text/javascript" src="../../ext-all-debug.js"></script>
  18  <script type="text/javascript" src="../../examples/ux/TabCloseMenu.js"></script>
  19  <!--- 3.0.3 --->
  20  <!---
  21  <script type="text/javascript" src="/ext-versions/ext-3.0.3/adapter/ext/ext-base.js"></script>
  22  <script type="text/javascript" src="/ext-versions/ext-3.0.3/ext-all.js"></script>
  23  <script type="text/javascript" src="/ext-versions/ext-3.0.3/examples/ux/TabCloseMenu.js"></script>
  24  --->
  25
  26  <script type="text/javascript" src="resources/form-configs.js"></script>
  27  <script type="text/javascript" src="resources/grid-configs.js"></script>
  28
  29  <script type="text/javascript">
  30     Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';
  31  </script>
  32
  33  <style type="text/css">
  34     body {
  35        background-color: #d9d9bd;
  36        font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
  37        font-size: 12px;
  38     }
  39     html, body {
  40        margin: 0; padding: 0; border: 0 none; overflow: hidden;
  41        height: 100%; width: 100%;
  42     }
  43     .x-btn, .x-btn button { font-size: 12px; }
  44     .x-border-layout-ct { background-color: #d9d9bd; }
  45     .tabs-onerow ul.x-tab-strip { width: 10000px !important; }
  46     .tabs-multirow ul.x-tab-strip { width: auto !important; }
  47
  48     .h-bar {
  49        background-color: #c07c69;
  50        margin-top: 3px;
  51        line-height: 1px;
  52        font-size: 1px;
  53        height: 3px;
  54     }
  55     .tabs {
  56        background-image: url(resources/tabs.gif) !important;
  57     }
  58     .new-tab {
  59        background-image: url(resources/application_add.gif) !important;
  60     }
  61     #action-panel { background-color: #aabb69; color: #fff; }
  62     #action-panel h2 { font-size: 13px; }
  63     #content-panel { background-color: #f1eedd; }
  64
  65     fieldset {
  66        border-radius: 5px;
  67        -moz-border-radius: 5px;
  68        -webkit-border-radius: 5px;
  69     }
  70     .content-class {
  71        font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
  72        font-size: 12px;
  73     }
  74     .content-class h3, .content-class h2 {
  75        white-space: nowrap;
  76        margin: 6px 0;
  77        color: #c07c69;
  78     }
  79     .content-class h3 {
  80        padding-bottom: 6px;
  81        font-style: italic;
  82        font-size: 14px;
  83     }
  84     .content-class h2 {
  85        padding-bottom: 5px;
  86        font-size: 13px;
  87     }
  88     .content-class p {
  89        margin: 10px 0px;
  90        font-size: 12px;
  91        line-height: 1.5;
  92     }
  93
  94  </style>
  95
  96  <script type="text/javascript">
  97
  98     var contentPanel;  // for quick access to the card content panel.
  99     var tabPanelOne;   // reference to card one tab panel.
 100     var tabPanelTwo;   // reference to card two tab panel.
 101
 102     var newTabCount = 0;
 103
 104     Ext.onReady(function() {
 105
 106        // For creating a tab panel.
 107        function createTabPanel(config) {
 108
 109           var tabPanel = new Ext.TabPanel({
 110
 111              id: config.id,
 112              activeTab: 0,
 113              resizeTabs: true,
 114              minTabWidth: 160,
 115              tabWidth: 160,
 116              enableTabScroll: false,
 117              cls: 'tabs-multirow',
 118              plugins: new Ext.ux.TabCloseMenu(),
 119
 120              layoutConfig: {
 121                 deferredRender: true
 122              },
 123              defaults: {
 124                 iconCls: 'tabs',
 125                 autoScroll: true,
 126                 baseCls: 'content-class',
 127                 bodyStyle: {
 128                    'background': 'transparent', 'padding': '15px 20px'
 129                 }
 130              },
 131              items: [{
 132                 id: config.tabId,
 133                 title: config.tabTitle
 134              }]
 135           });
 136           tabPanel.on('remove', function(tab){
 137              fixPanelHeight(tab);
 138           });
 139           tabPanel.getItem(0).on('afterrender', function(){
 140              this.body.update(Ext.getDom(this.id + '-content').innerHTML);
 141           });
 142           return tabPanel;
 143        };
 144
 145        // Content Panel(s).
 146        contentPanel = new Ext.Panel({
 147
 148           id: 'content-panel',
 149           region: 'center',
 150           margins: '3 3 3 0',
 151           border: true,
 152           layout: 'card',
 153           activeItem: 0,
 154
 155           layoutConfig: {
 156              deferredRender: true
 157           },
 158           bodyStyle: {
 159              'background': 'transparent'
 160           },
 161           defaults: {
 162              border: false,
 163              bodyStyle: { 'background': 'transparent' }
 164           },
 165           items: [
 166              createTabPanel({
 167                 id: 'card-panel-one',
 168                 tabId: 'card-panel-one-tab',
 169                 tabTitle: 'Card tabPanel One'
 170              }),
 171              createTabPanel({
 172                 id: 'card-panel-two',
 173                 tabId: 'card-panel-two-tab',
 174                 tabTitle: 'Card tabPanel Two'
 175              })
 176            ]
 177        });
 178
 179        tabPanelOne = Ext.getCmp('card-panel-one');
 180        tabPanelTwo = Ext.getCmp('card-panel-two');
 181
 182        // Action Items.
 183        var actionPanel = new Ext.Panel({
 184
 185           id: 'action-panel',
 186           region: 'west',
 187           margins: '3 0 3 3',
 188           cmargins: '3 4 3 3',
 189           title: 'Action Items',
 190           border: true,
 191           split: true,
 192           width: 200,
 193           minSize: 200,
 194           maxSize: 200,
 195           collapsible: true,
 196           floatable: false,
 197           animCollapse: true,
 198           bodyStyle: {
 199              'padding': '15px 20px',
 200              'background': 'transparent'
 201           },
 202           items: [{
 203              xtype: 'box',
 204              html: [ '<h2>Card One</h2>', '<div class="h-bar"></div>' ]
 205           },{
 206              xtype: 'button', width: 158, text: 'Show Card One',
 207              handler: function(){ contentPanel.layout.setActiveItem(0); }
 208           },{
 209              xtype: 'box',
 210              html: [ '<div class="h-bar"></div>' ]
 211           },{
 212              xtype: 'button', width: 158, text: 'Add 1 Form',
 213              handler: function(){ addForm(0, tabPanelOne, 1); }
 214           },{
 215              xtype: 'button', width: 158, text: 'Add 5 Forms',
 216              handler: function(){ addForm(0, tabPanelOne, 5); }
 217           },{
 218              xtype: 'button', width: 158, text: 'Add 10 Forms',
 219              handler: function(){ addForm(0, tabPanelOne, 10); }
 220           },{
 221              xtype: 'button', width: 158, text: 'Add 1 Grid',
 222              handler: function(){ addGrid(0, tabPanelOne, 1); }
 223           },{
 224              xtype: 'button', width: 158, text: 'Add 5 Grids',
 225              handler: function(){ addGrid(0, tabPanelOne, 5); }
 226           },{
 227              xtype: 'button', width: 158, text: 'Add 10 Grids',
 228              handler: function(){ addGrid(0, tabPanelOne, 10); }
 229           },{
 230              xtype: 'box', height: 15
 231           },{
 232              xtype: 'box',
 233              html: [ '<h2>Card Two</h2>', '<div class="h-bar"></div>' ]
 234           },{
 235              xtype: 'button', width: 158, text: 'Show Card Two',
 236              handler: function(){ contentPanel.layout.setActiveItem(1); }
 237           },{
 238              xtype: 'box',
 239              html: [ '<div class="h-bar"></div>' ]
 240           },{
 241              xtype: 'button', width: 158, text: 'Add 1 Form',
 242              handler: function(){ addForm(1, tabPanelTwo, 1); }
 243           },{
 244              xtype: 'button', width: 158, text: 'Add 5 Forms',
 245              handler: function(){ addForm(1, tabPanelTwo, 5); }
 246           },{
 247              xtype: 'button', width: 158, text: 'Add 10 Forms',
 248              handler: function(){ addForm(1, tabPanelTwo, 10); }
 249           },{
 250              xtype: 'button', width: 158, text: 'Add 1 Grid',
 251              handler: function(){ addGrid(1, tabPanelTwo, 1); }
 252           },{
 253              xtype: 'button', width: 158, text: 'Add 5 Grids',
 254              handler: function(){ addGrid(1, tabPanelTwo, 5); }
 255           },{
 256              xtype: 'button', width: 158, text: 'Add 10 Grids',
 257              handler: function(){ addGrid(1, tabPanelTwo, 10); }
 258           }]
 259        });
 260
 261        // Build the layout.
 262        var viewPort = new Ext.Viewport({
 263           layout: 'border',
 264           renderTo: 'body-viewport',
 265           items: [ actionPanel, contentPanel ]
 266        });
 267
 268     });
 269
 270     function fixPanelHeight(tab) {
 271
 272        // This is needed when a multi-tab row is added or removed
 273        // to fix the underlying tab container height.
 274
 275        if (tab.container) {
 276           if (Math.abs(tab.container.getHeight() - tab.getHeight()) > 2) {
 277           // tab.lastSize = null;  // forces recalc
 278              tab.setHeight(tab.container.getHeight() - 1);
 279              tab.setHeight(tab.container.getHeight() - 2);
 280           }
 281        }
 282     };
 283
 284     function addForm(cardIndex, tabPanel, limit) {
 285
 286        contentPanel.layout.setActiveItem(cardIndex);
 287        var n = 0;
 288
 289        function loop() {
 290
 291           if (n++ < limit) {
 292              var tab = tabPanel.add({
 293                 id: 'new-form-' + (++newTabCount),
 294                 title: 'New Form #' + newTabCount,
 295                 iconCls: 'new-tab',
 296                 closable: true
 297              });
 298
 299              fixPanelHeight(tabPanel);
 300              tab.show();
 301
 302              // Below is something one can have in server side scripting
 303              // and adding via load or the autoLoad method. Just past the
 304              // the id via params.
 305              //
 306              // The key thing here is to use the actual tab's add method
 307              // to populate the tab body area.  Everything added here
 308              // should be destroyed automatically when the tab is closed.
 309
 310              var c = Ext.getCmp('new-form-' + newTabCount);
 311
 312              c.add({
 313                 xtype: 'box',
 314                 html: '<h3>New Form #' + newTabCount + '</h3>'
 315              });
 316           // c.add(formConfigs[newTabCount % 2]);
 317              c.add(formConfigs[cardIndex]);
 318              c.doLayout();
 319
 320              setTimeout(loop, 1);
 321           }
 322        }
 323        loop();
 324     }
 325
 326     function addGrid(cardIndex, tabPanel, limit) {
 327
 328        contentPanel.layout.setActiveItem(cardIndex);
 329        var n = 0;
 330
 331        function loop() {
 332
 333           if (n++ < limit) {
 334              var tab = tabPanel.add({
 335                 id: 'new-grid-' + (++newTabCount),
 336                 title: 'New Grid #' + newTabCount,
 337                 iconCls: 'new-tab',
 338                 closable: true
 339              });
 340
 341              fixPanelHeight(tabPanel);
 342              tab.show();
 343
 344              var c = Ext.getCmp('new-grid-' + newTabCount);
 345
 346              c.add({
 347                 xtype: 'box',
 348                 html: '<h3>New Grid #' + newTabCount + '</h3>'
 349              });
 350           // c.add(gridConfigs[newTabCount % 2]);
 351              c.add(gridConfigs[0]);
 352
 353              c.doLayout();
 354
 355              setTimeout(loop, 1);
 356           }
 357        }
 358        loop();
 359     }
 360
 361  </script>
 362 </head>
 363 <body>
 364  <div id="body-viewport"></div>
 365  <div id="card-panel-one-tab-content" class="x-hidden">
 366    <h3>This is tabPanel One</h3>
 367    <p>Click a button under Action Items.</p>
 368  </div>
 369  <div id="card-panel-two-tab-content" class="x-hidden">
 370    <h3>This is tabPanel Two</h3>
 371    <p>Click a button under Action Items.</p>
 372  </div>
 373 </body>
 374 </html>