1. #11
    Sencha - Services Team arthurakay's Avatar
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,366
    Vote Rating
    33
    arthurakay is a jewel in the rough arthurakay is a jewel in the rough arthurakay is a jewel in the rough

      0  

    Default


    I noticed that the demo page only worked if I enabled debugging in Firebug. I was convinced the page wasn't working until I started to write this comment and went back to look for an error.

    That being said, I'm excited by this extension and I'm going to try it out.
    Arthur Kay
    Developer Relations Manager, Sencha Inc.

    Twitter | Sencha Chicago User Group

  2. #12
    Sencha - Services Team arthurakay's Avatar
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,366
    Vote Rating
    33
    arthurakay is a jewel in the rough arthurakay is a jewel in the rough arthurakay is a jewel in the rough

      0  

    Default


    I'm actually getting some funkiness with the DD tabs... I'm going to post my code in hopes that someone can help me figure this out.

    The problem that I'm seeing is that the tabs don't drop where the arrow is pointing. If I have fewer than 5 tabs open, I can only drag/drop tabs to the left... and even then the tab gets dropped one or two tabs further to the left of the arrow. Going to the right (when I have 5 or more tabs open) is just as frustrating.

    Code:
    Ext.onReady(function(){
    /* ************************************
        Default Tabs
    ************************************ */
        var homeTab = new Ext.Panel({
            allowDrag: false,
            cls: 'container',
            title: 'Home',
            closable: false,
            autoScroll: true
        });
    
    /* ************************************
        Tab Panel Area
    ************************************ */
        tabPanelRegion = new Ext.ux.panel.DDTabPanel({ //or Ext.TabPanel
            activeTab: 0,
            deferredRender: false,
            enableTabScroll: true,
            margins: '5 5 5 0',
            minTabWidth: 150,
            region: 'center',
            resizeTabs: true,
            stateful: true,
            tabMargin: 5,
            plugins: new Ext.ux.TabCloseMenu(),
            items: [ homeTab ]
        });
    
    /* ************************************
        Create the Page
    ************************************ */
        var viewport = new Ext.Viewport({
            layout: 'border',
            items:
            [
                westRegion, //I'm not including the code for this
                tabPanelRegion
            ]
        });
    
    });//end onReady()
    I add new tabs via this code:
    Code:
                    //add new tab to tab panel
                    var newTab = tabPanelRegion.add(new Ext.Panel(
                        {
                            cls: 'container',
                            title: tabTitle,
                            closable: true,
                            autoScroll: true
                        })
                    );
                    
                    //focus on the new tab
                    tabPanelRegion.setActiveTab(newTab.getId());
                    
                    //load the new tab's content
                    newTab.load({
                        url: urlLocation,
                        text: 'Loading data...',
                        timeout: 30,
                        scripts: true
                    });
    What am I doing wrong? I'm wondering if I'm just missing some silly (yet important) config setting...
    Arthur Kay
    Developer Relations Manager, Sencha Inc.

    Twitter | Sencha Chicago User Group

  3. #13
    Ext User
    Join Date
    Mar 2008
    Location
    Poland
    Posts
    17
    Vote Rating
    0
    mholyszko is on a distinguished road

      0  

    Default


    Quote Originally Posted by arthurakay View Post
    (...) What am I doing wrong? I'm wondering if I'm just missing some silly (yet important) config setting...
    The problem is caused by items in west region. I have the same problem - see my post above.

  4. #14
    Sencha - Services Team arthurakay's Avatar
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,366
    Vote Rating
    33
    arthurakay is a jewel in the rough arthurakay is a jewel in the rough arthurakay is a jewel in the rough

      0  

    Default


    Interesting... any idea if a fix or update is planned?
    Arthur Kay
    Developer Relations Manager, Sencha Inc.

    Twitter | Sencha Chicago User Group

  5. #15
    Sencha User
    Join Date
    Apr 2007
    Posts
    90
    Vote Rating
    0
    marcing is on a distinguished road

      0  

    Default


    Hi!
    Firstly thanks for this wonderful extension!, Secondly...I'm having the same issue as mentioned above - tab drops in wrong place when west region is enabled. I hope You fix it soon, thanks

  6. #16
    Ext User
    Join Date
    Apr 2007
    Posts
    13
    Vote Rating
    0
    ifnot is on a distinguished road

      0  

    Default


    My code is ugly,but it seems work fine.
    Code:
    Ext.namespace('Ext.ux.panel');
    
    Ext.ux.panel.DDTabPanel = Ext.extend(Ext.TabPanel, {
        /**
         * @cfg {Number} arrowOffsetX The horizontal offset for the drop arrow indicator, in pixels (defaults to -9).
         */
        arrowOffsetX: -9,
        /**
         * @cfg {Number} arrowOffsetY The vertical offset for the drop arrow indicator, in pixels (defaults to -8).
         */
        arrowOffsetY: -8,
    
        // Overwritten: assign the drag and drop group id
        /** @private */
        initComponent: function(){
            Ext.ux.panel.DDTabPanel.superclass.initComponent.call(this);
            this.ddGroupId = 'dd-tabpanel-group-' + Ext.ux.panel.DDTabPanel.superclass.getId.call(this);
        },
    
        // Overwritten: declare the tab panel as a drop target
        /** @private */
        initEvents: function(){
            Ext.ux.panel.DDTabPanel.superclass.initEvents.call(this);
            // Create a drop target for this tab panel
            var tabsDDGroup = this.ddGroupId;
            this.dd = new Ext.ux.panel.DDTabPanel.DropTarget(this, {
                ddGroup: tabsDDGroup
            });
            // Create a drop arrow indicator
            this.arrow = Ext.DomHelper.append(
                Ext.getBody(),
                '<div class="dd-arrow-down"></div>',
                true
            );
            this.arrow.hide();
        },
    
        // Overwritten: init the drag source after (!) rendering the tab
        /** @private */
        initTab: function(tab, index){
            Ext.ux.panel.DDTabPanel.superclass.initTab.call(this, tab, index);
            // Set the initial tab position
            tab.position = (index + 1) * 2; // 2, 4, 6, 8, ... (2n)
            // Make this tab a drag source
            var id = this.id + '__' + tab.id;
            var tabsDDGroup = this.ddGroupId;
            Ext.applyIf(tab, { allowDrag: true });
            tab.ds = new Ext.dd.DragSource(id, {
                ddGroup: tabsDDGroup,
                dropEl: tab,
                dropElHeader: Ext.get(id, true)
            });
            // Activate this tab before starting the drag action
            tab.ds.beforeDragEnter = function(target, event, id){
                target.tabpanel.activate(this.dropEl);
            };
            // Activate this tab on mouse down
            // Fixed bug which prevents a tab from being activated by clicking it
            tab.ds.onMouseDown = (function(event){
                this.activate(tab);
            }).createDelegate(this);
            // Method to enable dragging
            tab.enableDrag = function(){
                this.allowDrag = true;
                return this.ds.unlock();
            }
            // Method to disable dragging
            tab.disableDrag = function(){
                this.allowDrag = false;
                return this.ds.lock();
            }
            // Initial dragging state
            if(tab.allowDrag){
                tab.enableDrag();
            }else{
                tab.disableDrag();
            }
        }
    });
    
    // Ext.ux.panel.DDTabPanel.DropTarget
    // Implements the drop behavior of the tab panel
    /** @private */
    Ext.ux.panel.DDTabPanel.DropTarget = Ext.extend(Ext.dd.DropTarget, {
        constructor: function(tabpanel, config){
            this.tabpanel = tabpanel;
            // The drop target is the header area of the given tab panel
            var target = Ext.select('div.x-tab-panel-header', false, tabpanel.getEl().dom).elements[0];
            Ext.ux.panel.DDTabPanel.DropTarget.superclass.constructor.call(this, target, config);
        },
    
        notifyOver: function(dd, e, data){
            this.tabpanel = dd.dropEl.ownerCt;
            var tabs = this.tabpanel.items;
            var last = tabs.length;
            if (last < 2) {
                return 'x-dd-drop-nodrop';
            }
            var larrow = this.tabpanel.arrow;
    
            var panelDom = new Ext.Element(this.el.dom);
            var tabPanelTop = panelDom.getY();
    
            var left;
            try {
                if (e.target.innerHTML != '' && e.target.innerHTML.indexOf('</') == -1 && e.target.innerHTML.indexOf('>') == -1)
                    left = new Ext.Element(e.target.parentNode.parentNode.parentNode.parentNode).getX();
                larrow.setTop(tabPanelTop + this.tabpanel.arrowOffsetY);
                larrow.setLeft(left + this.tabpanel.arrowOffsetX);
                larrow.show();
            } catch(ex) {
            }
            return 'x-dd-drop-ok';
        },
    
        notifyDrop: function(dd, e, data){
            this.tabpanel = dd.dropEl.ownerCt;
            this.tabpanel.arrow.hide();
            dd.proxy.hide();
            try {
                if (e.target.innerHTML != '' && e.target.innerHTML.indexOf('</') == -1 && e.target.innerHTML.indexOf('>') == -1)
                    dd.el.dom.parentNode.insertBefore(dd.el.dom, e.target.parentNode.parentNode.parentNode.parentNode);
            } catch(ex) {
            }
            return true;
        },
        
        notifyOut: function(dd, e, data){
            dd.proxy.hide();
            this.tabpanel = dd.dropEl.ownerCt;
            this.tabpanel.arrow.hide();
        }
    });
    Ext.reg('ddtabpanel', Ext.ux.panel.DDTabPanel);
    Last edited by mystix; 25 Dec 2008 at 9:37 AM. Reason: VERY ugly indeed. post code in [code][/code] tags. see http://extjs.com/forum/misc.php?do=bbcode#code

  7. #17
    Ext User Matti's Avatar
    Join Date
    Jul 2008
    Location
    Belgium
    Posts
    9
    Vote Rating
    0
    Matti is on a distinguished road

      0  

    Default


    Woah! I didn't expect so many replies... well, let me try to keep up!

    Yes, the demo page only worked with Firebug. Seems like I missed a debugging line (console.log calls), my mistake. Fixed now.

    As for the problem with the west region: that's very odd indeed. I use the DDTabPanel in a project and it functions properly, with a west region. However, I have the tab panel inside another panel in my layout, maybe that helps?
    Code:
    {
        region: "center",
        layout: "fit",
        border: false,
        autoHeight: true,
        items: new Ext.ux.panel.DDTabPanel({
            /* ... */
        })
    }
    The code suggested by ifnot doesn't look too great either, with so many try..catch blocks and dirty tricks. I believe there has to be a better solution, although I'm afraid you'll have to fit your tab panels in another panel for the moment...

    If anyone could help finding a proper solution for this "west region bug", please don't hesitate to share!

  8. #18
    Ext User Matti's Avatar
    Join Date
    Jul 2008
    Location
    Belgium
    Posts
    9
    Vote Rating
    0
    Matti is on a distinguished road

      0  

    Default


    Good news! I managed to fix the west region bug!

    For some reason, the original authors used two different approaches to get the coordinates of the tab elements: one by using DOM properties, the other by using Ext methods. The Ext version has proven to always give correct results (what did you expect? ) and after implementing this change, everything functioned flawlessly!

    What can I say? Get the new version from the trunk, forget about encapsulating your precious tab panels in dirty containers and enjoy!

  9. #19
    Ext User
    Join Date
    Mar 2008
    Location
    Poland
    Posts
    17
    Vote Rating
    0
    mholyszko is on a distinguished road

      0  

    Default


    Thank you very much, Matti, tabs d&d works correctly now!

    Now if you could just look on the "tab with icon" issue, which I described in my post above: http://extjs.com/forum/showthread.ph...810#post265810

    Once again I would like to thank you for this great extension and effort you put in making it even better.

  10. #20
    Sencha - Services Team arthurakay's Avatar
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,366
    Vote Rating
    33
    arthurakay is a jewel in the rough arthurakay is a jewel in the rough arthurakay is a jewel in the rough

      0  

    Default


    That latest fix appears to fix all of the problems I was seeing... great job!
    Arthur Kay
    Developer Relations Manager, Sencha Inc.

    Twitter | Sencha Chicago User Group