1. #1
    Ext User
    Join Date
    May 2007
    Posts
    39
    Vote Rating
    0
    jexxi is on a distinguished road

      0  

    Question Accordion + Infopanel, Pin problem

    Accordion + Infopanel, Pin problem


    Hi,
    I'm using user Accordion+Infopanel created by Saki.
    Here are the code:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    <head>
        <link rel="Stylesheet" type="text/css" href="../lib/ext/resources/css/ext-all.css" />
        <link rel="stylesheet" type="text/css" href="../lib/ext/resources/css/ext-ux-accordion.css">
        <link rel="stylesheet" type="text/css" href="../lib/ext/resources/css/ext-ux-highlight.css">
        <!--<script type="text/javascript" src="../lib/ext/adapter/ext/ext-base.js"></script>-->
        
        <script type="text/javascript" src="../lib/ext/adapter/yui/yui-utilities.js"></script>
        <script type="text/javascript" src="../lib/ext/adapter/yui/ext-yui-adapter.js"></script>
        <script type="text/javascript" src="../lib/ext/ext-all.js"></script>    
        
    
        <script type="text/javascript" src="../lib/ext/Ext.ux.InfoPanel.js"></script>
        <script type="text/javascript" src="../lib/ext/Ext.ux.Accordion.js"></script>
            
        <script type="text/javascript">
        test = function() {
            return {
                init: function() {
    
                    // create accordion
                    var acc = new Ext.ux.Accordion('div-west', {
                        fitContainer: true,
                        fitToFrame: true,
                        body: 'acc-sports'
                    })            
                    
                    var panel1 = acc.add(new Ext.ux.InfoPanel({
                        title: 'Panel 1',
                        id: 'panel-1',
                        showPin: 'true',
                        autoCreate: {
                            tag: 'div'
                        }
                    }));
                    panel1.update(
                        '<div class="text-content">This panel has configuration option <b>autoScroll:true</b> which means that when it is undocked and resized to size smaller than the content the croll bars appear. This option is off by default.</div>'
                    );
                    
                    var panel2 = acc.add(new Ext.ux.InfoPanel({
                        title: 'Panel 2',
                        id: 'panel-2',
                        showPin: 'true',
                        autoCreate: {
                            tag: 'div'
                        }
                    }));
                    panel2.update(
                        '<div class="text-content">asdfasdfasdfasdfsdf<br>adfasdfssdfsdfds<br>adasdfdfs</div>'
                    );   
    
                    var panel7 = acc.add(new Ext.ux.InfoPanel('panel-7', {
                        title: 'Panel 7',
                        showPin: 'true', 
                        collapseOnUnpin: false
                    }));             
                }
            }
        }();
        Ext.onReady(test.init,test, true);
        </script>    
    <title>test</title>
    </head>
    <body>
    <div id="div-west">
            <div id="acc-sports">
                <div id="panel-7">
                    <div>7. Theme selector</div>
                    <div>
                        <div class="text-content">Select the theme you like:
                            <select id="theme-combo" name="theme-combo">
                                <option value="xtheme-default.css" selected="selected">Ext Blue</option>
                                <option value="xtheme-gray.css">Gray Theme</option>
                                <option value="xtheme-aero.css">Aero Glass Theme</option>
                                <option value="xtheme-vista.css">Vista Dark Theme</option>
                            </select>
                        </div>
                    </div>
                </div>              
            </div> 
        </div>
    </body>
    </html>
    Then I pin the third infopanel. The problem is, when I expand first / second infopanel, content of the third infopanel do not pushed down. As the result content of 3rd panel is overlap over content of 1st/2nd panel. Only happens with IE 6/7.
    This condition also true when I pin 2nd panel, and I expand 1st panel, content of 2nd panel is overlap over content of 1st panel.

    Currently I use accordion v.1.0.1. Ext 1.1 RC1.
    Anyone can point me, what do I miss here?

    Thanks,
    JOhan
    Last edited by jexxi; 22 Jul 2007 at 9:52 PM. Reason: Change Doctype from xhtml to 4.01 transitional

  2. #2
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,538
    Vote Rating
    380
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    I guess I've read this post somewhere else too...

    Can you change doc type to html 4.01 transitional to see if it helps? I'm not sure how IE handles xhtml.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  3. #3
    Ext User
    Join Date
    May 2007
    Posts
    39
    Vote Rating
    0
    jexxi is on a distinguished road

      0  

    Question


    I've change it to doc type 4.01 transitional, but no luck .
    I'm sure that I do miss something but don't know what it is.
    And it also wonders me that when I access your sample page http://aariadne.com/accordion/accord...?showGrid=true, the pin works just fine.
    So could you please check on my source code I posted earlier?

    Thanks,
    Johan

  4. #4
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,538
    Vote Rating
    380
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    Give you "acc-sports" css "zoom:1" and it will work. For further reading see To help with IE rendering issues.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  5. #5
    Ext User
    Join Date
    May 2007
    Posts
    39
    Vote Rating
    0
    jexxi is on a distinguished road

      0  

    Thumbs up


    Yes, it works accordingly.
    I'll keep it in mind if things like that happens.

    Thanks a lot,
    Johan

Thread Participants: 1