- 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()
+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);
+ }
+ }
+ })