Results 1 to 10 of 10

Thread: Problem occurred while using dialog in layout complex layout

  1. #1
    Sencha User
    Join Date
    Mar 2007
    Posts
    40
    Vote Rating
    0
      0  

    Default 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
    1
      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
      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
    1
      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
      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,608
    Vote Rating
    59
      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
    1
      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
      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,608
    Vote Rating
    59
      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
      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

Posting Permissions

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