+++ /dev/null
-<html>
-<head>
- <title>Test Case for Ext JS</title>
-
-<!--- Trunk --->
- <!---
- <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
- --->
-
-<!--- 3.0.3 --->
-
- <link rel="stylesheet" type="text/css" href="/ext-versions/ext-3.0.3/resources/css/ext-all.css" />
-
-
- <link rel="stylesheet" type="text/css" href="resources/bubble-f1eedd.css" />
-
-<!--- Trunk --->
- <!---
- <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
- <script type="text/javascript" src="../../ext-all-debug.js"></script>
- <script type="text/javascript" src="../../examples/ux/TabCloseMenu.js"></script>
- --->
-
- <!--- 3.0.3 --->
-
- <script type="text/javascript" src="/ext-versions/ext-3.0.3/adapter/ext/ext-base.js"></script>
- <script type="text/javascript" src="/ext-versions/ext-3.0.3/ext-all-debug.js"></script>
- <script type="text/javascript" src="/ext-versions/ext-3.0.3/examples/ux/TabCloseMenu.js"></script>
-
- <script type="text/javascript" src="resources/form-configs.js"></script>
- <script type="text/javascript" src="resources/grid-configs.js"></script>
-
- <script type="text/javascript">
- Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';
- Ext.form.HtmlEditor.override({
- getDoc : function(){
- debugger;
- return Ext.isIE ? this.getWin().document : (this.iframe.contentDocument || this.getWin().document);
- }
- })
- </script>
-
- <style type="text/css">
- body {
- background-color: #d9d9bd;
- font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
- font-size: 12px;
- }
- html, body {
- margin: 0; padding: 0; border: 0 none; overflow: hidden;
- height: 100%; width: 100%;
- }
- .x-btn, .x-btn button { font-size: 12px; }
- .x-border-layout-ct { background-color: #d9d9bd; }
- .tabs-onerow ul.x-tab-strip { width: 10000px !important; }
- .tabs-multirow ul.x-tab-strip { width: auto !important; }
-
- .h-bar {
- background-color: #c07c69;
- margin-top: 3px;
- line-height: 1px;
- font-size: 1px;
- height: 3px;
- }
- .tabs {
- background-image: url(resources/tabs.gif) !important;
- }
- .new-tab {
- background-image: url(resources/application_add.gif) !important;
- }
- #action-panel { background-color: #aabb69; color: #fff; }
- #action-panel h2 { font-size: 13px; }
- #content-panel { background-color: #f1eedd; }
-
- fieldset {
- border-radius: 5px;
- -moz-border-radius: 5px;
- -webkit-border-radius: 5px;
- }
- .content-class {
- font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
- font-size: 12px;
- }
- .content-class h3, .content-class h2 {
- white-space: nowrap;
- margin: 6px 0;
- color: #c07c69;
- }
- .content-class h3 {
- padding-bottom: 6px;
- font-style: italic;
- font-size: 14px;
- }
- .content-class h2 {
- padding-bottom: 5px;
- font-size: 13px;
- }
- .content-class p {
- margin: 10px 0px;
- font-size: 12px;
- line-height: 1.5;
- }
-
- </style>
-
- <script type="text/javascript">
-
- var contentPanel; // for quick access to the card content panel.
- var tabPanelOne; // reference to card one tab panel.
- var tabPanelTwo; // reference to card two tab panel.
-
- var newTabCount = 0;
-
- Ext.onReady(function() {
-
- // For creating a tab panel.
- function createTabPanel(config) {
-
- var tabPanel = new Ext.TabPanel({
-
- id: config.id,
- activeTab: 0,
- resizeTabs: true,
- minTabWidth: 160,
- tabWidth: 160,
- enableTabScroll: false,
- cls: 'tabs-multirow',
- plugins: new Ext.ux.TabCloseMenu(),
-
- layoutConfig: {
- deferredRender: true
- },
- defaults: {
- iconCls: 'tabs',
- autoScroll: true,
- baseCls: 'content-class',
- bodyStyle: {
- 'background': 'transparent', 'padding': '15px 20px'
- }
- },
- items: [{
- id: config.tabId,
- title: config.tabTitle
- }]
- });
- tabPanel.on('remove', function(tab){
- fixPanelHeight(tab);
- });
- tabPanel.getItem(0).on('afterrender', function(){
- this.body.update(Ext.getDom(this.id + '-content').innerHTML);
- });
- return tabPanel;
- };
-
- // Content Panel(s).
- contentPanel = new Ext.Panel({
-
- id: 'content-panel',
- region: 'center',
- margins: '3 3 3 0',
- border: true,
- layout: 'card',
- activeItem: 0,
-
- layoutConfig: {
- deferredRender: true
- },
- bodyStyle: {
- 'background': 'transparent'
- },
- defaults: {
- border: false,
- bodyStyle: { 'background': 'transparent' }
- },
- items: [
- createTabPanel({
- id: 'card-panel-one',
- tabId: 'card-panel-one-tab',
- tabTitle: 'Card tabPanel One'
- }),
- createTabPanel({
- id: 'card-panel-two',
- tabId: 'card-panel-two-tab',
- tabTitle: 'Card tabPanel Two'
- })
- ]
- });
-
- tabPanelOne = Ext.getCmp('card-panel-one');
- tabPanelTwo = Ext.getCmp('card-panel-two');
-
- // Action Items.
- var actionPanel = new Ext.Panel({
-
- id: 'action-panel',
- region: 'west',
- margins: '3 0 3 3',
- cmargins: '3 4 3 3',
- title: 'Action Items',
- border: true,
- split: true,
- width: 200,
- minSize: 200,
- maxSize: 200,
- collapsible: true,
- floatable: false,
- animCollapse: true,
- bodyStyle: {
- 'padding': '15px 20px',
- 'background': 'transparent'
- },
- items: [{
- xtype: 'box',
- html: [ '<h2>Card One</h2>', '<div class="h-bar"></div>' ]
- },{
- xtype: 'button', width: 158, text: 'Show Card One',
- handler: function(){ contentPanel.layout.setActiveItem(0); }
- },{
- xtype: 'box',
- html: [ '<div class="h-bar"></div>' ]
- },{
- xtype: 'button', width: 158, text: 'Add 1 Form',
- handler: function(){ addForm(0, tabPanelOne, 1); }
- },{
- xtype: 'button', width: 158, text: 'Add 5 Forms',
- handler: function(){ addForm(0, tabPanelOne, 5); }
- },{
- xtype: 'button', width: 158, text: 'Add 10 Forms',
- handler: function(){ addForm(0, tabPanelOne, 10); }
- },{
- xtype: 'button', width: 158, text: 'Add 1 Grid',
- handler: function(){ addGrid(0, tabPanelOne, 1); }
- },{
- xtype: 'button', width: 158, text: 'Add 5 Grids',
- handler: function(){ addGrid(0, tabPanelOne, 5); }
- },{
- xtype: 'button', width: 158, text: 'Add 10 Grids',
- handler: function(){ addGrid(0, tabPanelOne, 10); }
- },{
- xtype: 'box', height: 15
- },{
- xtype: 'box',
- html: [ '<h2>Card Two</h2>', '<div class="h-bar"></div>' ]
- },{
- xtype: 'button', width: 158, text: 'Show Card Two',
- handler: function(){ contentPanel.layout.setActiveItem(1); }
- },{
- xtype: 'box',
- html: [ '<div class="h-bar"></div>' ]
- },{
- xtype: 'button', width: 158, text: 'Add 1 Form',
- handler: function(){ addForm(1, tabPanelTwo, 1); }
- },{
- xtype: 'button', width: 158, text: 'Add 5 Forms',
- handler: function(){ addForm(1, tabPanelTwo, 5); }
- },{
- xtype: 'button', width: 158, text: 'Add 10 Forms',
- handler: function(){ addForm(1, tabPanelTwo, 10); }
- },{
- xtype: 'button', width: 158, text: 'Add 1 Grid',
- handler: function(){ addGrid(1, tabPanelTwo, 1); }
- },{
- xtype: 'button', width: 158, text: 'Add 5 Grids',
- handler: function(){ addGrid(1, tabPanelTwo, 5); }
- },{
- xtype: 'button', width: 158, text: 'Add 10 Grids',
- handler: function(){ addGrid(1, tabPanelTwo, 10); }
- }]
- });
-
- // Build the layout.
- var viewPort = new Ext.Viewport({
- layout: 'border',
- renderTo: 'body-viewport',
- items: [ actionPanel, contentPanel ]
- });
-
- });
-
- function fixPanelHeight(tab) {
-
- // This is needed when a multi-tab row is added or removed
- // to fix the underlying tab container height.
-
- if (tab.container) {
- if (Math.abs(tab.container.getHeight() - tab.getHeight()) > 2) {
- // tab.lastSize = null; // forces recalc
- tab.setHeight(tab.container.getHeight() - 1);
- tab.setHeight(tab.container.getHeight() - 2);
- }
- }
- };
-
- function addForm(cardIndex, tabPanel, limit) {
-
- contentPanel.layout.setActiveItem(cardIndex);
- var n = 0;
-
- function loop() {
-
- if (n++ < limit) {
- var tab = tabPanel.add({
- id: 'new-form-' + (++newTabCount),
- title: 'New Form #' + newTabCount,
- iconCls: 'new-tab',
- closable: true
- });
-
- fixPanelHeight(tabPanel);
- tab.show();
-
- // Below is something one can have in server side scripting
- // and adding via load or the autoLoad method. Just past the
- // the id via params.
- //
- // The key thing here is to use the actual tab's add method
- // to populate the tab body area. Everything added here
- // should be destroyed automatically when the tab is closed.
-
- var c = Ext.getCmp('new-form-' + newTabCount);
-
- c.add({
- xtype: 'box',
- html: '<h3>New Form #' + newTabCount + '</h3>'
- });
- // c.add(formConfigs[newTabCount % 2]);
- c.add(formConfigs[cardIndex]);
- c.doLayout();
-
- setTimeout(loop, 1);
- }
- }
- loop();
- }
-
- function addGrid(cardIndex, tabPanel, limit) {
-
- contentPanel.layout.setActiveItem(cardIndex);
- var n = 0;
-
- function loop() {
-
- if (n++ < limit) {
- var tab = tabPanel.add({
- id: 'new-grid-' + (++newTabCount),
- title: 'New Grid #' + newTabCount,
- iconCls: 'new-tab',
- closable: true
- });
-
- fixPanelHeight(tabPanel);
- tab.show();
-
- var c = Ext.getCmp('new-grid-' + newTabCount);
-
- c.add({
- xtype: 'box',
- html: '<h3>New Grid #' + newTabCount + '</h3>'
- });
- // c.add(gridConfigs[newTabCount % 2]);
- c.add(gridConfigs[0]);
-
- c.doLayout();
-
- setTimeout(loop, 1);
- }
- }
- loop();
- }
-
- </script>
-</head>
-<body>
- <div id="body-viewport"></div>
- <div id="card-panel-one-tab-content" class="x-hidden">
- <h3>This is tabPanel One</h3>
- <p>Click a button under Action Items.</p>
- </div>
- <div id="card-panel-two-tab-content" class="x-hidden">
- <h3>This is tabPanel Two</h3>
- <p>Click a button under Action Items.</p>
- </div>
-</body>
-</html>
git.ithinksw.org / extjs.git / blobdiff