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,133
    Vote Rating
    322
    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.

  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,133
    Vote Rating
    322
    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.

  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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar