1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    22
    Vote Rating
    0
    dee1 is on a distinguished road

      0  

    Default Bug workaround for many (eg 40) Accordions with Layout fill:true?

    Bug workaround for many (eg 40) Accordions with Layout fill:true?


    Trying to find a workaround for an IE9 Accordion bug.

    The bug relates to Accordions with "fill:false" not working in IE9 - but working fine for other browsers/ versions.
    Details here: http://www.sencha.com/forum/showthre...mpatability%29

    For the workaround we need to be able to get a large number (eg 40) Accordions working with "fill:true".
    However, "fill:true" for a large number of Accordions is unworkable as there is not enough viewable area for the Accordion content (eg trees) to be useable.

    Code example provided below.

    To fix this, are there any options that allow the Accordion viewable areas to be large enough, for large menus, with "fill:true"?

    Any help on this would be appreciated.


    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" type="text/css"     href="http://extjs.cachefly.net/ext-3.4.0/resources/css/ext-all.css" />
    <script type="text/javascript"     src="http://extjs.cachefly.net/ext-3.4.0/adapter/ext/ext-base.js"></script>
    <script type="text/javascript"     src="http://extjs.cachefly.net/ext-3.4.0/ext-all.js"></script>
    </head>
    <body>
    
    
    
    <script type="text/javascript">
    Ext.onReady(function() {
    
        var leafs = []
        for (i = 1; i <= 20; i++) {
            leafs.push({
                text : i  + ' test test test test test test test test test test test test test test ',
                leaf : true,
                checked : false
            });
        }
    
        var nodes = {
            rootVisible : false,
            autoScroll : true,
            title : 'Title',
            root : {
                children : leafs
            }
        }
    
        var trees = [];
        for (i = 0; i < 40; i++) {
            trees.push(new Ext.tree.TreePanel(nodes));
        }
    
     
    
        var accordionLayout = new Ext.Panel({
                    defaults : {
                        // applied to each contained panel
                        bodyStyle : 'padding:5px',
                        autoScroll : true
    
                    },
                    layoutConfig : {
                        fill : true
                    },
                    layout : 'accordion',
                    autoScroll : true,
                    items : [trees]
                });
    
           
        var borderLayout = new Ext.Panel({
                    layout : 'border',
                    autoscroll : true,
                    items : [{
                                layout : 'fit',
                                width : 250,
                                region : 'west',
                                autoscroll : true,
                                items : [accordionLayout]
                            }, {
                                region : 'center',
                                items : [{
                                            html : 'test'
                                        }]
                            }]
                });
    
        var win = new Ext.Viewport({
                    title : 'Layout Window',
                    layout : 'fit',
                    autoScroll : true,
                    items : [borderLayout]
                });
    
        win.show(this);
    });
    
    </script>
    
    </body>
    </html>

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    4,805
    Vote Rating
    167
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    Perhaps use a container with just the 'auto' layout and have an expand listener on the panels close any other open panel (and remove > insert at 0 the expanded panel if desired).

    Effectively that just allows you to create your own accordion fill: false setup (though with standard panel styling unless you manage the styling on a more granular level as well).
    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager: sheryl@sencha.com

    C
    heck out all of the 2013 SenchaCon presentations here:
    http://www.sencha.com/blog/senchacon...now-available/

  3. #3
    Sencha User
    Join Date
    Jan 2012
    Posts
    22
    Vote Rating
    0
    dee1 is on a distinguished road

      0  

    Default


    That sounds ideal - with the benefit of more flexibility with how we implement the accordion.
    Only problem - the original Accordion IE9 layout bug seems to also happen for containers with Auto layout, as follows:

    When the tree is wider than the containing Panel and AutoScroll=true, the overflow causes the panel to grow with blank space in IE9 until it's off the screen.

    Are there any ways the overflow issues can be prevented in a container (example code below)?
    Or other layout configurations that need to be set?

    Code:
     
        <!DOCTYPE html>
        <html>
        <head>
        <link rel="stylesheet" type="text/css"     href="http://extjs.cachefly.net/ext-3.4.0/resources/css/ext-all.css" />
        <script type="text/javascript"     src="http://extjs.cachefly.net/ext-3.4.0/adapter/ext/ext-base.js"></script>
        <script type="text/javascript"     src="http://extjs.cachefly.net/ext-3.4.0/ext-all.js"></script>
        </head>
        <body>
    
    
    
        <script type="text/javascript">
        Ext.onReady(function() {
    
            var leafs = []
            for (i = 1; i <= 5; i++) {
                leafs.push({text : i  + ' test test test test test test test test test test test test test test ',
                    leaf : false,
                    children:[
                    {
                    text : i  + ' test test test test test test test test test test test test test test ',
                    leaf : true,
                    checked : false
                },{
                    text : i  + ' test test test test test test test test test test test test test test ',
                    leaf : true,
                    checked : false
                }]});
            }
    
            var nodes = {
                rootVisible : false,
                autoScroll : true,
                title : 'Title',
                root : {
                    children : leafs
                }
            }
    
            var trees = [];
            for (i = 0; i < 50; i++) {
                trees.push(new Ext.tree.TreePanel(nodes));
            }
    
         
    
            var accordionLayout = new Ext.Panel({
                        defaults : {
                            autoScroll : true
                        },
                        autoScroll : true,
                        layout : 'auto',
    
                        items : [trees]
                    });
            
               
            var borderLayout = new Ext.Panel({
                        layout : 'border',
                        
                        items : [{
                                    layout : 'fit',
                                    width : 250,
                        
                                    region : 'west',
                                    items : [accordionLayout]
                                }, {
                                    region : 'center',
                                    items : [{
                                                html : 'test'
                                            }]
                                }]
                    });
    
            var win = new Ext.Viewport({
                        title : 'Layout Window',
                        layout : 'fit',
                       
                        items : [borderLayout]
                    });
    
            win.show(this);
        });
    
        </script>
    
        </body>
        </html>

  4. #4
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    4,805
    Vote Rating
    167
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    Have you tried with Anchor layout with each panel set with anchor: '100%'?
    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager: sheryl@sencha.com

    C
    heck out all of the 2013 SenchaCon presentations here:
    http://www.sencha.com/blog/senchacon...now-available/

  5. #5
    Sencha User
    Join Date
    Jan 2012
    Posts
    22
    Vote Rating
    0
    dee1 is on a distinguished road

      0  

    Default


    No luck unfortunately using the following:

    Code:
     var accordionLayout = new Ext.Panel({
                        defaults : {
                            autoScroll : true
                        },
                        autoScroll : true,
                        layout : 'anchor',
                        anchor: '100%',
    
                        items : [trees]
                    });
    It's starting to appear that there might not be a simple bug workaround for IE9.
    Thanks anyway for your suggestions/ help.

Thread Participants: 1