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

[scipio]

I read on Ed Spencer's blog that Ext is planning on an Ext Marketplace in the future. My suspicion is that once the marketplace is up and running, commercial licenses to extensions will become available for developers.

Bottom line is that I am unsure of what is or isn't permissible with extensions, except that extensions can be released GPL.

[Scorpie]

Simply beautiful.

[Ytorres]

Greats ux scipio ! beautifull

Could I suggest you to add some events ?

~line 14

Ext.ux.SlidingTabPanel = Ext.extend(Ext.TabPanel, {
	
	initTab: function(item, index){
		Ext.ux.SlidingTabPanel.superclass.initTab.call(this, item, index);

        this.addEvents({
            startDrag : true,
            endDrag   : true
        });
......

~line 62

......
	,startDrag: function(x, y) {

                // Fire the startDrag event - panel & currentTab will be pass into it
                this.tabpanel.fireEvent('startDrag', this.tabpanel, this.tabpanel.getActiveTab());

		Ext.dd.DDM.useCache = false; // Disable caching of element location
		Ext.dd.DDM.mode = 1; // Point mode
......

~line 173, at the end of endDrag method

......
		Ext.dd.DDM.useCache = true;

                // Fire the endDrag event - panel & currentTab will be pass into it
                this.tabpanel.fireEvent('endDrag', this.tabpanel, this.tabpanel.getActiveTab());
......

Like this, we can monitor the drag process.

Best,
Yannick

[Ytorres]

Another's suggestions,

Once the drag is done, the panel don't have the representation of this move (e.g. items elements are not in the same order as in the DOM).

So, when we want to now the current tab order, we get the order before the drag & drop.

I have added a new method to achieve this :

        reorderTab: function() {

            var tabsEl = this.tabpanel.header.child('ul').dom.children,
                tabsId = [],
                tabsOrigin = [];

            for ( var i=0; i < tabsEl.length; i++ ) {
                if( tabsEl[i].id.substr(0, this.tabpanel.id.length) == this.tabpanel.id ) {
                    tabsId.push( tabsEl[i].id.substr((this.tabpanel.id.length+2), tabsEl[i].id.length ) );
                }
            }

            // Now, tabsId is the real list ordered of the tab's id
            // We put this order into parent element

            // We get the original reference of this tabs
            for( var i=0; i < this.tabpanel.items.items.length; i++ ) {
                tabsOrigin[this.tabpanel.items.items[i].id] = this.tabpanel.items.items[i];
            }

            for( var i=0; i < tabsId.length; i++ ) {
                // order the keys
                this.tabpanel.items.keys[i] = tabsId[i];
                // order the elements
                this.tabpanel.items.items[i] = tabsOrigin[tabsId[i]];
            }

        }

and the call of this new method at the end of endDrag method :

		Ext.dd.DDM.useCache = true;

                // Reorder all tabs to reflect this change
                this.reorderTab();

                // Fire the startDrag event
                this.tabpanel.fireEvent('endDrag', this.tabpanel, this.tabpanel.getActiveTab());

To explain why I need this : Into each tab of my tabPanel, I have 2 buttons to go to the next and previous tab. Before this change, I can't know who is the next/previous tab after a tabs drag&drop. Now, I can

Best,
Yannick

[scipio]

Yannick,

Thanks for your suggestions, they are both good additions to the code.

I was surprised when I checked the API that the default dragDrop implementation doesn't have any drag events associated with it. Maybe the default DD should have events added to it.

[cherbert]

Is it stateful? Your demo doesn't appear to be and this feature would be far easier than having to write database code to save the layout when the user resumes his or her session.

[stever]

I read on Ed Spencer's blog that Ext is planning on an Ext Marketplace in the future. My suspicion is that once the marketplace is up and running, commercial licenses to extensions will become available for developers.

Bottom line is that I am unsure of what is or isn't permissible with extensions, except that extensions can be released GPL.

No, there is an explicit UX exception:

We want people building extensions, developer toolkits and frameworks, language packs and themes for Ext libraries to be able to publicly distribute them under less restrictive license terms despite the fact that version 3 of the GNU General Public License (the "GPL") may require them to be licensed under the GPL.

From http://www.extjs.com/products/ux-exception.php


It also mentions how you can use the MIT license...

PS: Nice work!

[NateWorcester]

No, there is an explicit UX exception

Wow! That's exactly what I needed to read! It would make sense that there should be an exception for UXs for the exact reasons i stated above. Thanks for that link.

That being said, it would be easy to convert this into a plugin which contains no library code or modified library code.

[scipio]

No, there is an explicit UX exception:



From http://www.extjs.com/products/ux-exception.php


It also mentions how you can use the MIT license...

PS: Nice work!

Read my earlier posts on this subject in the thread, specifically #17. I was quoting the exception you cite in that post but I don't think it is available to me because this extension uses modified code from the library. See section 2(a) of the FLOSS exception.

[NateWorcester]

Is the only modified code what you have in the initTab method? Because you could easily refactor it like so:

Ext.ux.SlidingTabPanelPlugin = Ext.extend(Object, {
	
	init: function(tabpanel){
		tabpanel.initTab = tabpanel.initTab.createSequence(this.initTab,tabpanel);
	}
	
	,initTab: function(item, index){
		
		var p = this.getTemplateArgs(item);
		if(!this.slidingTabsID) this.slidingTabsID = Ext.id(); // Create a unique ID for this tabpanel
		new Ext.ux.DDSlidingTab(p, this.slidingTabsID, {
			tabpanel:this // Pass a reference to the tabpanel for each dragObject
		});
	}
});