1. #31
    Sencha User
    Join Date
    Apr 2007
    Posts
    66
    Vote Rating
    0
    cgi-bin is on a distinguished road

      0  

    Default


    Quote Originally Posted by joeri View Post
    No, I still haven't made the leap to ExtJS 4. Our whole team is dug in building two huge modules on top of our ExtJS 3 codebase so we don't have the manpower to move to ExtJS 4 without incurring huge delays. Maybe in fall after the systems are built we'll have an opportunity to make the switch. Ofcourse, by then we'll have several hundred thousand lines of ExtJS code to port, so that's going to be a lot of fun
    I certainly understand that. My current code is still "stuck" in 3.4 as well, partially because 4 was released right in the middle of our development cycle. I took a quick attempt to convert to 4, but even using the compatibility/conversion tools, it really didn't work the same. And I am the only one on my team with really any JS (let alone ExtJS) experience to try to update our front-end UI. Since then the other member of my team had left, so I'm juggling both sides of the code, with no time to dedicate to upgrade. And as time goes by, I keep digging myself further and further in the hole by adding more code that will eventually need to be upgraded.

    I'm not sure if I posted this anywhere before, but if anyone is interested, I did manage to implement having the collapsed region fly-out on hover (doesn't need to be a treePanel, any panel should work):
    Code:
    navPanel = new Ext.tree.TreePanel
    ({
        id:'nav-tree'
        ,region:'west'
        ,header:true
        ,title:'Navigation'
        ,collapsible:true
        ,singleExpand:true
        ,width:200
        ,lines:false
        ,autoScroll:true
        ,margins:'0 3 3 3'
        ,loader:new Ext.tree.TreeLoader() // config removed for brevity
        ,rootVisible:false
        ,root:new Ext.tree.AsyncTreeNode() // config removed for brevity
        ,toggleTip:
        {
            text:'Collapse'
        }
        ,listeners:
        {
            afterlayout:
            {
                fn:function(c, l)
                {
                    var region = c.ownerCt.layout[c.region];
    
                    // have to call this so that the dom elements are created!
                    var ce = region.getCollapsedEl();
    
                    // enable the Collapse/Expand tool tips
                    c.toggleTip.target =
                    [
                        c.tools['toggle']
                        ,region.expandToolEl
                        ,region.miniSplitEl
                        ,region.miniCollapsedEl
                    ];
                    Ext.QuickTips.register(c.toggleTip);
    
                    // enable the slide-out on hover over collapsed area
                    ce.on
                    (
                        'mouseenter'
                        ,function(e, t)
                        {
                            if (c.collapsed)
                            {
                                region.slideOut();
                            }
                        }
                    );
                }
                ,single:true
            }
            ,expand:function(p)
            {
                p.toggleTip.text = 'Collapse';
            }
            ,collapse:function(p)
            {
                p.toggleTip.text = 'Expand';
            }
            ,click:function(node, e)
            {
                // Hide the slide-out nav panel once we click on something within it
                if (this.collapsed)
                {
                    this.ownerCt.layout[this.region].slideIn();
                }
           }
        }
        ,plugins:[Ext.ux.PanelCollapsedTitle]
    });

  2. #32