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

      0  

    Question Answered: Sorting tabs in tabPanel using drag and drop

    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,080
    Answers
    674
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      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
    83
    Vote Rating
    2
    miti is on a distinguished road

      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
    5,387
    Answers
    434
    Vote Rating
    201
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      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.

Thread Participants: 3

Tags for this Thread