1. #1
    Sencha User
    Join Date
    Mar 2007
    Posts
    40
    Vote Rating
    0
    davy_wei is on a distinguished road

      0  

    Default Problem occurred while using dialog in layout complex layout

    Problem occurred while using dialog in layout complex layout


    Hi, I am trying to use a dialog modal in YUI-ext complex layout(which contains header, left collapsed menu, center content area, and footer. I modify the example code of HelloWorld dialog and put it in the content area.

    The dialog is set as:
    dialog = new YAHOO.ext.BasicDialog("hello-dlg", {
    //modal:true,
    autoTabs:true,
    width:500,
    height:300,
    shadow:true,
    minWidth:300,
    minHeight:250,
    proxyDrag: true
    });

    When the dialog modal pops up, the shadow area is always on the top and blocks me to do anything in the popup window. It looks like the z-index of shadow is greater than the z-index of the dialog modal.

    After I change the shadow to false, I met another problem. The dialog windows pops up ok, but when I moving the dialog to the header and footer areas, the header, and footer are always on the top and blocks the dialog modal partially.

    I check all the examples on the site, but didn't find any ones that use dialog modals in the complex layout. Anyone ever met the problem like this? Please help me to solve it if you know how. I appreciate it.

  2. #2
    Ext JS Premium Member
    Join Date
    Mar 2007
    Location
    Virginia, USA
    Posts
    504
    Vote Rating
    0
    vtswingkid is on a distinguished road

      0  

    Default


    I am seeing the same problem. Am trying to use a modal dialog inside the center panel of border layout. I'll have to sneak a peak at the documentation content window. Seems to work there fine. What is the secret?

    ... I looked at the documentation...
    He uses an iframe when loading his dialog examples that use a modal screen.
    It only affects the iframe. May have to do something similar.

  3. #3
    Ext User
    Join Date
    Mar 2007
    Posts
    28
    Vote Rating
    0
    Tym is on a distinguished road

      0  

    Default


    Funny, I just posted this problem as well. The response I got from Jack helped to fix it. You need to set the zindex above 15000 and make sure the panel renders in the document body, as seen below:

    panel_one = new YAHOO.widget.Panel("panel_one",
    {
    close:true,
    visible:false,
    draggable:true,
    constraintoviewport:true,
    fixedcenter:true,
    effect:{effect:YAHOO.widget.ContainerEffect.FADE, duration: 0.5},
    zIndex:15000
    }
    );
    panel_one.render(document.body);

  4. #4
    Ext JS Premium Member
    Join Date
    Mar 2007
    Location
    Virginia, USA
    Posts
    504
    Vote Rating
    0
    vtswingkid is on a distinguished road

      0  

    Default


    I am using borderlayout and am trying to open a modal dialog in the center panel.
    This is not the YUI panel. So I cannot control that it opens in the body. Is there a solution for this. Do I create an iframe using the createShim function?

  5. #5
    Sencha User
    Join Date
    Mar 2007
    Posts
    40
    Vote Rating
    0
    davy_wei is on a distinguished road

      0  

    Default


    I am not using YUI panel. I use YUI-ext dialog.

    http://www.yr-tech.com:8023/home.php

    You will see the problem when you click the "Show Dialog" button.

    I changed "modal:false" to "modal:true", the dialog box is still under the shadow.

    http://www.yr-tech.com:8023/test1.html

  6. #6
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,546
    Vote Rating
    62
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    The dialog should be in document.body.

  7. #7
    Ext JS Premium Member
    Join Date
    Mar 2007
    Location
    Virginia, USA
    Posts
    504
    Vote Rating
    0
    vtswingkid is on a distinguished road

      0  

    Default


    So I assume yui-ext modal dialogs were only intended to be loaded into the body? Hence the mask blocks the entire screen. I suppose we need to use the up and coming element.mask if we want to instead disable one of the panels under the dialog instead of the entire screen? If I am wrong about that please let me know. Otherwise I am going to start playing with this element.mask function.

  8. #8
    Sencha User
    Join Date
    Mar 2007
    Posts
    40
    Vote Rating
    0
    davy_wei is on a distinguished road

      0  

    Default


    I did that. I moved the dialog <div> out of the panel. It is still not showing properly.

    See http://www.yr-tech.com:8023/test2.html

    This is the code

    <div id="inner2" class="ylayout-inactive-content">
    <input type="button" id="show-dialog-btn" value="Show Dialog" />




    Note that the js is not minified so it is readable. See layout.js for the full source code.</p>

    </div>



    <div id="hello-dlg" style="visibility:hidden;">
    <div class="ydlg-hd">Layout Dialog</div>
    <div class="ydlg-bd">
    <div id="west" class="ylayout-inactive-content">
    West
    </div>
    <div id="center" class="ylayout-inactive-content">


    <input type="button" id="theme-btn" value="Toggle Theme" />
    </div>

    </div>
    </div>


    <div id="footer" class="ylayout-inactive-content">
    <span id="footname">footer</span>
    </div>


    Now the dialog <div> is in the document.body dom tree. The problem might be in the BorderyLayout, because when init the doc, the header, footer, menu and content are added into the north, south, west and center area. There are no action in Layout init for the dialog modal. What do you think?

  9. #9
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,546
    Vote Rating
    62
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Use Firebug to check your doc structure.

    You are not closing your "header" div, and the dialog is ending up in that

    Code:
    	<div id="header" class="ylayout-inactive-content">
    		<div id="slogan" style="padding-top:3px;"><div>header</div>
    	</div>
    	<div id="classes" class="ylayout-inactive-content">
    See the problem?

  10. #10
    Sencha User
    Join Date
    Mar 2007
    Posts
    40
    Vote Rating
    0
    davy_wei is on a distinguished road

      0  

    Default


    Thanks man!!!!!
    It's fixed. Your help is so big. I appreciate it and Happy New Year!

    Quote Originally Posted by Animal
    Use Firebug to check your doc structure.

    You are not closing your "header" div, and the dialog is ending up in that

    Code:
    	<div id="header" class="ylayout-inactive-content">
    		<div id="slogan" style="padding-top:3px;"><div>header</div>
    	</div>
    	<div id="classes" class="ylayout-inactive-content">
    See the problem?

Similar Threads

  1. Complex Layout Example + Adding new Tabs
    By q_no in forum Ext 1.x: Help & Discussion
    Replies: 3
    Last Post: 29 Mar 2007, 1:48 PM
  2. how to add a gridpanel to complex layout
    By humpdi in forum Ext 1.x: Help & Discussion
    Replies: 8
    Last Post: 23 Mar 2007, 5:54 AM
  3. Layout dialog visual problem
    By galdaka in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 12 Mar 2007, 5:05 AM
  4. Complex Layout
    By hcervantes in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 9 Mar 2007, 7:02 AM
  5. Using dialog in layout complex layout, please help me, jack!
    By davy_wei in forum Ext 1.x: Help & Discussion
    Replies: 3
    Last Post: 3 Jan 2007, 9:31 PM

Thread Participants: 3