Page 1 of 8 123 ... LastLast
Results 1 to 10 of 80

Thread: Sliding Tabs - Google Chrome Style - Ext.ux.SlidingTabPanel

  1. #1
    Sencha User scipio's Avatar
    Join Date
    Nov 2007
    Posts
    38
    Vote Rating
    0
      0  

    Default Sliding Tabs - Google Chrome Style - Ext.ux.SlidingTabPanel

    Hi All,

    I finally got around to starting a blog and giving back to the community.

    Ext.ux.SlidingTabPanel, Version 1.0 - 1/14/2010

    This extension creates a standard TabPanel and alters it so that the user can re-order the tabs, similar to the Google Chrome Browser.

    • Works in IE 6+, FF, Webkit
    • Works in Ext JS 3.1, 3.0, 2.3 (these are all the versions of Ext JS I tested)


    License: GPL v3... I wish I could release it under the MIT but I am not sure if I can comply with the FLOSS requirements.

    You can demo it here.

    Download the source at the demo site.

    More extensions to come...
    Attached Images Attached Images

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,607
    Vote Rating
    59
      0  

    Default

    That's very sexy!

    Can you make it a plugin of TabPanel rather than a subclass?

  3. #3
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,607
    Vote Rating
    59
      0  

    Default

    Can I suggest that demo code be droppable into an examples directory, on anyone's machnie so

    Code:
    <html>
    	<head>
    		<title>Chrome Style Sliding Tabs</title>
    		<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
    		<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
     		<script type="text/javascript" src="../../ext-all.js"></script>
    		
    		<script type="text/javascript" src="slidingtabs.js"></script>
    		<script type="text/javascript" src="../ux/TabCloseMenu.js"></script>
    		
    		<script type="text/javascript">
    			
    			Ext.onReady(function(){
    				
    				window.loaded = true;
    				
    				var tabs = new Ext.ux.SlidingTabPanel({
    			        renderTo:'tabs',
    			        resizeTabs:true, // turn on tab resizing
    			        tabWidth:135,
    			        enableTabScroll:false,
    			        width:645,
    			        height:250,
                                    slideDuration: .15,
                                    defaults:{bodyStyle:'padding:10px;'},
    			        plugins: new Ext.ux.TabCloseMenu()
    			    });
    			
    			    // Tab generation code
    			    var index = 0;
    			    while(index < 4){
    			        addTab();
    			    }
    			    function addTab(){
    			        tabs.add({
    			            title: 'New Tab ' + (++index),
    			            html: 'Tab Body ' + (index) + '<br/><br/><div>Bogus Markup</div>',
    			            closable:true
    			        }).show();
    			    }
    			
    			    new Ext.Button({
    			        text: 'Add A New Tab',
    			        handler: addTab
    			    }).render(document.body, 'tabs');
    				
    			});
    			
    		</script>
    	</head>
    	<body> 
    		<div id="tabs" style="margin:15px 0;"></div> 
    	</body>
    </html>

  4. #4
    Sencha User scipio's Avatar
    Join Date
    Nov 2007
    Posts
    38
    Vote Rating
    0
      0  

    Default

    Thanks Animal for the compliment and the suggestions.

    I should look into creating a plugin version, makes sense.

  5. #5
    Ext JS Premium Member veenvliet.morion's Avatar
    Join Date
    Oct 2009
    Location
    Netherlands
    Posts
    24
    Vote Rating
    0
      0  

    Default

    Looking sharp!!!

    One suggestion to make it more work like google chrome like explained here:
    http://www.theinvisibl.com/news/2009...google-chrome/

    The tabs don't move (get bigger) when a tab is closed, but when the mouse moves outside the tabbar area.

  6. #6
    Sencha User makana's Avatar
    Join Date
    Apr 2008
    Location
    Dresden, Germany
    Posts
    527
    Vote Rating
    21
      0  

    Default

    whohoo! that rocks!
    Thanks for sharing!!
    Programming today is a race between software engineers striving to build bigger and better ?diot-proof programs, and the universe striving to produce bigger and better idiots. So far, the universe is winning. (Rick Cook)

    Enhanced ExtJS adapter for Adobe AIR

  7. #7
    Sencha - Ext JS Dev Team mschwartz's Avatar
    Join Date
    Nov 2008
    Location
    San Diego, Peoples' Republic of California
    Posts
    2,056
    Vote Rating
    19
      0  

    Default

    Quite awesome.

    Extra credit if you go the whole 9 yards and make it so you can tear off the tab and drag it to your desktop!

    (I kid, I kid)

  8. #8
    Sencha User scipio's Avatar
    Join Date
    Nov 2007
    Posts
    38
    Vote Rating
    0
      0  

    Default

    Thanks guys, the compliments are really appreciated.

    veenvliet.morion - Thanks for the link, I'll check that out.

    mschwartz - Could be done using adobe AIR, would be an immense pain in the arse though. Would be easier to design it so that a user could tear off a tab to a floated Ext.Panel in the browser. In fact, that is a good idea. Thanks.

  9. #9
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,326
    Vote Rating
    1297
      0  

    Default

    Quote Originally Posted by scipio View Post
    mschwartz - Could be done using adobe AIR, would be an immense pain in the arse though. Would be easier to design it so that a user could tear off a tab to a floated Ext.Panel in the browser.
    Using AIR, you could have a tabpanel at the top (or anywhere) and when you tear off a tab you could open another AIR window.

  10. #10
    Ext User
    Join Date
    Jul 2007
    Posts
    24
    Vote Rating
    -1
      0  

    Default

    That is cool !! thanks for sharing !!

    I encounter some problems when i put tabpanel into portal ,the tabpane's DD come into collision with the portal's. I change the code like this:

    Code:
    handleMouseDown function: 
    
    if (this.clickValidator(e)) {
    	this.setStartPosition(); // Set the initial element position
    	this.b4MouseDown(e);
    	this.onMouseDown(e);
    	this.DDM.handleMouseDown(e, this);
    				
    	this.tabpanel.onStripMouseDown(e);//active the click tab
    	
    	this.DDM.stopEvent(e); // Must remove this event swallower for the tabpanel to work
    }
    
    endDrag function:
    
    Ext.dd.DDM.useCache = true;
    Ext.dd.DDM.mode = 0;//set the mode
    hope this is userful

Page 1 of 8 123 ... LastLast

Posting Permissions

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