1. #21
    Sencha User scipio's Avatar
    Join Date
    Nov 2007
    Posts
    38
    Vote Rating
    0
    scipio is on a distinguished road

      0  

    Default


    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.

  2. #22
    Sencha Premium Member
    Join Date
    Jun 2008
    Posts
    321
    Vote Rating
    3
    Scorpie is on a distinguished road

      0  

    Default


    Simply beautiful.
    I`m from Holland!

  3. #23
    Ext User Ytorres's Avatar
    Join Date
    Jun 2007
    Location
    Rennes, France
    Posts
    285
    Vote Rating
    0
    Ytorres is on a distinguished road

      0  

    Default


    Greats ux scipio ! beautifull

    Could I suggest you to add some events ?

    ~line 14
    Code:
    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
    Code:
    ......
    	,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
    Code:
    ......
    		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
    "Software is like sex: it's better when it's free" - Linus Torvald
    https://edit.php.net - A tool written with ExtJs for translated Php documentation

  4. #24
    Ext User Ytorres's Avatar
    Join Date
    Jun 2007
    Location
    Rennes, France
    Posts
    285
    Vote Rating
    0
    Ytorres is on a distinguished road

      0  

    Default


    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 :

    Code:
            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 :

    Code:
    		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
    "Software is like sex: it's better when it's free" - Linus Torvald
    https://edit.php.net - A tool written with ExtJs for translated Php documentation

  5. #25
    Sencha User scipio's Avatar
    Join Date
    Nov 2007
    Posts
    38
    Vote Rating
    0
    scipio is on a distinguished road

      0  

    Default


    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.

  6. #26
    Sencha User
    Join Date
    Aug 2007
    Posts
    44
    Vote Rating
    0
    cherbert is on a distinguished road

      0  

    Default


    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.

  7. #27
    Ext JS Premium Member stever's Avatar
    Join Date
    Mar 2007
    Posts
    1,406
    Vote Rating
    6
    stever will become famous soon enough stever will become famous soon enough

      0  

    Default


    Quote Originally Posted by scipio View Post
    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!

  8. #28
    Sencha User
    Join Date
    Sep 2009
    Posts
    13
    Vote Rating
    0
    NateWorcester is on a distinguished road

      0  

    Default


    Quote Originally Posted by stever View Post
    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.

  9. #29
    Sencha User scipio's Avatar
    Join Date
    Nov 2007
    Posts
    38
    Vote Rating
    0
    scipio is on a distinguished road

      0  

    Default


    Quote Originally Posted by stever View Post
    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.

  10. #30
    Sencha User
    Join Date
    Sep 2009
    Posts
    13
    Vote Rating
    0
    NateWorcester is on a distinguished road

      0  

    Default


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

    Code:
    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
    		});
    	}
    });