Upgrade to ExtJS 4.0.1 - Released 05/18/2011

[extjs.git] / examples / tabs / tabs-adv.js

diff --git a/examples/tabs/tabs-adv.js b/examples/tabs/tabs-adv.js
index 2b89fad..e473fc3 100644 (file)
--- a/examples/tabs/tabs-adv.js
+++ b/examples/tabs/tabs-adv.js
@@ -1,43 +1,87 @@
-/*\r
- * Ext JS Library 2.2.1\r
- * Copyright(c) 2006-2009, Ext JS, LLC.\r
- * licensing@extjs.com\r
- * \r
- * http://extjs.com/license\r
- */\r
-\r
-Ext.onReady(function(){\r
-\r
-    var tabs = new Ext.TabPanel({\r
-        renderTo:'tabs',\r
-        resizeTabs:true, // turn on tab resizing\r
-        minTabWidth: 115,\r
-        tabWidth:135,\r
-        enableTabScroll:true,\r
-        width:600,\r
-        height:250,\r
-        defaults: {autoScroll:true},\r
-        plugins: new Ext.ux.TabCloseMenu()\r
-    });\r
-\r
-    // tab generation code\r
-    var index = 0;\r
-    while(index < 7){\r
-        addTab();\r
-    }\r
-    function addTab(){\r
-        tabs.add({\r
-            title: 'New Tab ' + (++index),\r
-            iconCls: 'tabs',\r
-            html: 'Tab Body ' + (index) + '<br/><br/>'\r
-                    + Ext.example.bogusMarkup,\r
-            closable:true\r
-        }).show();\r
-    }\r
-\r
-    new Ext.Button({\r
-        text: 'Add Tab',\r
-        handler: addTab,\r
-        iconCls:'new-tab'\r
-    }).render(document.body, 'tabs');\r
-});
\ No newline at end of file
+Ext.Loader.setConfig({enabled: true});
+
+Ext.Loader.setPath('Ext.ux', '../ux/');
+
+Ext.require([
+    'Ext.tab.*',
+    'Ext.ux.TabCloseMenu'
+]);
+
+Ext.onReady(function() {
+    var currentItem;
+    var tabs = Ext.createWidget('tabpanel', {
+        renderTo: 'tabs',
+        resizeTabs: true,
+        enableTabScroll: true,
+        width: 600,
+        height: 250,
+        defaults: {
+            autoScroll:true,
+            bodyPadding: 10
+        },
+        items: [{
+            title: 'Tab 1',
+            iconCls: 'tabs',
+            html: 'Tab Body<br/><br/>' + Ext.example.bogusMarkup,
+            closable: true
+        }],
+        plugins: Ext.create('Ext.ux.TabCloseMenu', {
+            extraItemsTail: [
+                '-',
+                {
+                    text: 'Closable',
+                    checked: true,
+                    hideOnClick: true,
+                    handler: function (item) {
+                        currentItem.tab.setClosable(item.checked);
+                    }
+                }
+            ],
+            listeners: {
+                aftermenu: function () {
+                    currentItem = null;
+                },
+                beforemenu: function (menu, item) {
+                    var menuitem = menu.child('*[text="Closable"]');
+                    currentItem = item;
+                    menuitem.setChecked(item.closable);
+                }
+            }
+        })
+    });
+
+    // tab generation code
+    var index = 0;
+    while(index < 3){
+        addTab(index % 2);
+    }
+
+    function addTab (closable) {
+        ++index;
+        tabs.add({
+            title: 'New Tab ' + index,
+            iconCls: 'tabs',
+            html: 'Tab Body ' + index + '<br/><br/>' + Ext.example.bogusMarkup,
+            closable: !!closable
+        }).show();
+    }
+
+    Ext.createWidget('button', {
+        renderTo: 'addButtonCt',
+        text: 'Add Closable Tab',
+        handler: function () {
+            addTab(true);
+        },
+        iconCls:'new-tab'
+    });
+
+    Ext.createWidget('button', {
+        renderTo: 'addButtonCt',
+        text: 'Add Unclosable Tab',
+        handler: function () {
+            addTab(false);
+        },
+        iconCls:'new-tab',
+        style: 'margin-left: 8px;'
+    });
+});