Results 1 to 4 of 4

Thread: Sorting tabs in tabPanel using drag and drop

  1. #1
    Sencha Premium Member sencha-dev2's Avatar
    Join Date
    Jun 2012
    Location
    France
    Posts
    59
    Answers
    2
    Vote Rating
    0
      0  

    Question Answered: Sorting tabs in tabPanel using drag and drop

    Hi, I'd like to know if it is possible to let an user sort the tabs he opened by a drag and drop control ? Else, I think it can be done on tab insertion, but it would be smart for users to be able to sort their tabs quickly and easily.

    Does anyone know how to do it ?

  2. Using the code from the example Scott referred to you can do the following:

    Code:
    Ext.onReady(function () {
    	Ext.define('myTabPanel', {
    		extend: 'Ext.tab.Panel',
    		//require: ['Ext.ux.BoxReorderer'],
    		width: 400,
    		height: 400,
    		items: [{
    			title: 'Foo'
    		}, {
    			title: 'Bar',
    			tabConfig: {
    				title: 'Custom Title',
    				tooltip: 'A button tooltip'
    			}
    		}]
    	});
    
    
    	Ext.create('myTabPanel', {
    		renderTo: Ext.getBody(),
    		tabBar: {
    			plugins : Ext.create('Ext.ux.BoxReorderer', {})
    		}
    	});
    });
    I commented out the require since I'm running this one from my file system, not a webserver. In which case I just linked to the BoxReorderer.js file in the ux folder under the examples folder in the sdk.

  3. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,389
    Answers
    716
    Vote Rating
    498
      0  

    Default

    You can have a look at info on dragging buttons on toolbar
    http://dev.sencha.com/deploy/ext-4.1...orderable.html

    Here is a version for Ext3:
    http://www.sencha.com/forum/showthread.php?92033

    Scott.

  4. #3
    Ext JS Premium Member
    Join Date
    Oct 2007
    Posts
    89
    Answers
    1
    Vote Rating
    2
      0  

    Default

    Hope there is a version of DDTabPanel for EXT4 soon.

  5. #4
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,154
    Answers
    501
    Vote Rating
    249
      0  

    Default

    Using the code from the example Scott referred to you can do the following:

    Code:
    Ext.onReady(function () {
    	Ext.define('myTabPanel', {
    		extend: 'Ext.tab.Panel',
    		//require: ['Ext.ux.BoxReorderer'],
    		width: 400,
    		height: 400,
    		items: [{
    			title: 'Foo'
    		}, {
    			title: 'Bar',
    			tabConfig: {
    				title: 'Custom Title',
    				tooltip: 'A button tooltip'
    			}
    		}]
    	});
    
    
    	Ext.create('myTabPanel', {
    		renderTo: Ext.getBody(),
    		tabBar: {
    			plugins : Ext.create('Ext.ux.BoxReorderer', {})
    		}
    	});
    });
    I commented out the require since I'm running this one from my file system, not a webserver. In which case I just linked to the BoxReorderer.js file in the ux folder under the examples folder in the sdk.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •