X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/d41dc04ad17d1d9125fb2cf72db2b4782dbe3a8c..3789b528d8dd8aad4558e38e22d775bcab1cbd36:/examples/tabs/tabs-adv.js

diff --git a/examples/tabs/tabs-adv.js b/examples/tabs/tabs-adv.js
index 2b89fadb..e473fc3a 100644
--- a/examples/tabs/tabs-adv.js
+++ b/examples/tabs/tabs-adv.js
@@ -1,43 +1,87 @@
-/*
- * Ext JS Library 2.2.1
- * Copyright(c) 2006-2009, Ext JS, LLC.
- * licensing@extjs.com
- * 
- * http://extjs.com/license
- */
-
-Ext.onReady(function(){
-
-    var tabs = new Ext.TabPanel({
-        renderTo:'tabs',
-        resizeTabs:true, // turn on tab resizing
-        minTabWidth: 115,
-        tabWidth:135,
-        enableTabScroll:true,
-        width:600,
-        height:250,
-        defaults: {autoScroll:true},
-        plugins: new Ext.ux.TabCloseMenu()
-    });
-
-    // tab generation code
-    var index = 0;
-    while(index < 7){
-        addTab();
-    }
-    function addTab(){
-        tabs.add({
-            title: 'New Tab ' + (++index),
-            iconCls: 'tabs',
-            html: 'Tab Body ' + (index) + '<br/><br/>'
-                    + Ext.example.bogusMarkup,
-            closable:true
-        }).show();
-    }
-
-    new Ext.Button({
-        text: 'Add Tab',
-        handler: addTab,
-        iconCls:'new-tab'
-    }).render(document.body, 'tabs');
-});
\ 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;'
+    });
+});