Results 1 to 5 of 5

Thread: [CLOSED][3.0r5386] Ext.tree.TreePanel + accordeon layout problems

    You found a bug! We've classified it as a bug in our system. We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Ext JS Premium Member
    Join Date
    Mar 2008
    Location
    Moscow
    Posts
    137

    Default [CLOSED][3.0r5386] Ext.tree.TreePanel + accordeon layout problems

    Ext version tested:

    • Ext 3.0.x rev 5386



    Adapter used:

    • ext



    css used:

    • only default ext-all.css



    Browser versions tested against:

    • IE8
    • FF3.5.3 (firebug 1.5X.0a24 installed)
    • Safari 4.0.3
    • Google Chrome 3.0.195.21
    • Opera 9.64



    Operating System:

    • Windows Server 2008



    Description:

    • When TreePanel placed into accordion layout, there is a problem in IE. If you place a very long string, the horizontal scrollbar doesn't show, and all the contents slides to the left on click.



    Test Case:

    Take ExtJS Desktop Sample App (examples/desktop/desktop.html), open sample.js jn the line 256 and set some very long text there into the element of the treeview. Or use this code, to override MyDesktop.AccordionWindow.createWindow
    Code:
        createWindow : function(){
            var desktop = this.app.getDesktop();
            var win = desktop.getWindow('acc-win');
            if(!win){
                win = desktop.createWindow({
                    id: 'acc-win',
                    title: 'Accordion Window',
                    width:250,
                    height:400,
                    iconCls: 'accordion',
                    shim:false,
                    animCollapse:false,
                    constrainHeader:true,
    
                    tbar:[{
                        tooltip:{title:'Rich Tooltips', text:'Let your users know what they can do!'},
                        iconCls:'connect'
                    },'-',{
                        tooltip:'Add a new user',
                        iconCls:'user-add'
                    },' ',{
                        tooltip:'Remove the selected user',
                        iconCls:'user-delete'
                    }],
    
                    layout:'accordion',
                    border:false,
                    layoutConfig: {
                        animate:false
                    },
    
                    items: [
                        new Ext.tree.TreePanel({
                            id:'im-tree',
                            title: 'Online Users',
                            loader: new Ext.tree.TreeLoader(),
                            rootVisible:false,
                            lines:false,
                            autoScroll:true,
                            tools:[{
                                id:'refresh',
                                on:{
                                    click: function(){
                                        var tree = Ext.getCmp('im-tree');
                                        tree.body.mask('Loading', 'x-mask-loading');
                                        tree.root.reload();
                                        tree.root.collapse(true, false);
                                        setTimeout(function(){ // mimic a server call
                                            tree.body.unmask();
                                            tree.root.expand(true, true);
                                        }, 1000);
                                    }
                                }
                            }],
                            root: new Ext.tree.AsyncTreeNode({
                                text:'Online',
                                children:[{
                                    text:'Friends',
                                    expanded:true,
                                    children:[{
                                        text:'Something useful would be in here.',
                                        iconCls:'user',
                                        leaf:true
                                    },{
                                        text:'Very long long long long long long long long long long long long long long long text',
                                        iconCls:'user',
                                        leaf:true
                                    },{
                                        text:'Jon',
                                        iconCls:'user',
                                        leaf:true
                                    },{
                                        text:'Tim',
                                        iconCls:'user',
                                        leaf:true
                                    },{
                                        text:'Nige',
                                        iconCls:'user',
                                        leaf:true
                                    },{
                                        text:'Fred',
                                        iconCls:'user',
                                        leaf:true
                                    },{
                                        text:'Bob',
                                        iconCls:'user',
                                        leaf:true
                                    }]
                                },{
                                    text:'Family',
                                    expanded:true,
                                    children:[{
                                        text:'Kelly',
                                        iconCls:'user-girl',
                                        leaf:true
                                    },{
                                        text:'Sara',
                                        iconCls:'user-girl',
                                        leaf:true
                                    },{
                                        text:'Zack',
                                        iconCls:'user-kid',
                                        leaf:true
                                    },{
                                        text:'John',
                                        iconCls:'user-kid',
                                        leaf:true
                                    }]
                                }]
                            })
                        }), {
                            title: 'Settings',
                            html:'<p>Something useful would be in here.</p>',
                            autoScroll:true
                        },{
                            title: 'Even More Stuff',
                            html : '<p>Something useful would be in here.</p>'
                        },{
                            title: 'My Stuff',
                            html : '<p>Something useful would be in here.</p>'
                        }
                    ]
                });
            }
            win.show();
        }
    Steps to reproduce the problem:

    • After correcting sample.js - open destop app and click on "Accordion window" shortcut.
    • When accordion window opens - there will be no scrollbar, try to click the very long item.



    The result that was expected:

    • Horizontal scrollbar must show.



    The result that occurs instead:

    • Horizontal scrollbar doesn't occur.



    Screenshot or Video:

    • MustBe.jpg - how it should work.
    • Problem.jpg - how it works in IE8
    Attached Images Attached Images

  2. #2
    Ext JS Premium Member
    Join Date
    Mar 2008
    Location
    Moscow
    Posts
    137

    Default

    That's a very bad bug, will someone look at it anyway???

  3. #3
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,257

    Default

    Set autoWidth: false on the accordion layout.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  4. #4
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

  5. #5
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,257

    Default

    Closed, since these dupes are already listed.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

Posting Permissions

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