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

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