/ext-4.1.0_b3/examples/tabs/reorderable-tabs.js
https://bitbucket.org/srogerf/javascript · JavaScript · 87 lines · 78 code · 8 blank · 1 comment · 4 complexity · 0c5a611cba9fdeb9c647ec0c6aeced2a MD5 · raw file
- Ext.Loader.setConfig({enabled: true});
- Ext.Loader.setPath('Ext.ux', '../ux/');
- Ext.require([
- 'Ext.tab.*',
- 'Ext.ux.TabReorderer'
- ]);
- Ext.onReady(function() {
- var tabCount = 4;
- var tabPanel = Ext.create('Ext.tab.Panel', {
- renderTo: Ext.getBody(),
- width: 600,
- height: 400,
- //plain: true,
- bodyStyle: 'padding:5px',
- plugins: Ext.create('Ext.ux.TabReorderer'),
- items: [{
- xtype: 'panel',
- title: 'Tab 1',
- html : 'Test 1',
- closable: true
- }, {
- xtype: 'panel',
- title: 'Tab 2',
- html : 'Test 2',
- closable: true
- }, {
- xtype: 'panel',
- title: 'Tab 3',
- html : 'Test 3',
- closable: true
- }, {
- xtype: 'panel',
- title: 'Non Reorderable',
- html : "I can't be moved",
- reorderable: false,
- closable: true
-
- },{
- xtype: 'panel',
- title: 'Tab 4',
- html : 'Test 4',
- closable: true
- }],
- dockedItems: {
- dock: 'bottom',
- xtype: 'toolbar',
- items: [{
- text : 'Add an item',
- handler: function() {
- tabCount++;
- tabPanel.add({
- xtype: 'panel',
- title: 'Tab ' + tabCount,
- html : 'Content for tab ' + tabCount,
- closable: true
- });
- }
- }, {
- text: 'Toggle tabs enabled',
- handler: function() {
- tabPanel.tabBar.items.each(function(tab) {
- if (tab.disabled) {
- tab.enable();
- } else {
- tab.disable();
- }
- });
- }
- }, {
- text: 'Remove 2nd item',
- handler: function() {
- var item = tabPanel.items.items[1];
- if (item) {
- tabPanel.remove(item);
- }
- }
- }]
- }
- });
- });