Page 1 of 3 123 LastLast
Results 1 to 10 of 29

Thread: How to use Dialog ......

  1. #1
    Ext User
    Join Date
    Mar 2007
    Posts
    13

    Default How to use Dialog ......

    I am using a Splitted layout having N,W,E,C and center again Splitted. I want call a Dialog inside the center region. let me know How a dialoge can be called. What method using for this ?

  2. #2
    Sencha User
    Join Date
    Apr 2012
    Location
    Austin, Texas
    Posts
    4

    Default

    There is plenty of info in the documentation about how to call a dialog. http://www.yui-ext.com/deploy/yui-ext/docs/

    Look under YAHOO.ext.BasicDialog -- the very first thing you'll see is an example constructor with all config options. If you can't get it working, please post your code here for review.

  3. #3
    Ext User
    Join Date
    Mar 2007
    Posts
    13

    Default

    I tried this way. I dont kno wher to place div for Dialog. Can u tell wher i can add the markup and how to call it using javascript function?


    my code //

    <script type="text/javascript">
    Example = function(){
    var layout; var innerLayout; var newwest;
    return {
    init : function(){
    layout = new YAHOO.ext.BorderLayout(document.body, {
    modal:true,
    north: {
    split:false,
    initialSize: 35
    },
    south: {
    split:false,
    initialSize: 20
    },


    center: {
    modal:true,
    autoScroll:true,
    titlebar: true,
    minSize: 1,
    collapsible:true
    }
    }
    );
    layout.beginUpdate();
    layout.add('north', new YAHOO.ext.ContentPanel('header', {fitToFrame:true}));
    layout.add('south', new YAHOO.ext.ContentPanel('footer', {fitToFrame:true}));
    layout.add('center', new YAHOO.ext.ContentPanel('inner1', {fitToFrame:true}));
    layout.endUpdate();
    },


    }

    }();
    YAHOO.ext.EventManager.onDocumentReady(Example.init, Example, true);
    </script>




    </head>
    <body>

    <div id ="container">
    <div id="header" class="ylayout-inactive-content">

    <input type="button" id="show-dialog-btn" value="Dialog 1" /></P> </div>
    <div id="footer" class="ylayout-inactive-content"></div>
    <div id="inner1" class="ylayout-inactive-content">
    <div id="hello-dlg" style="visibility:hidden;position:absolute;top:0px;">
    <div class="ydlg-hd">Dialog 2</div>
    <div class="ydlg-bd">
    <input type="text"/>
    </div>
    </div>
    </div>

    </div>
    </body>
    </html>[/code]

  4. #4
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    If you just want an empty dialog, and plan to put content in it programatically, do not build it from existing markup. Instead use config option autoCreate:true

  5. #5
    Ext User
    Join Date
    Mar 2007
    Posts
    13

    Default

    thnks for your Reply
    config option autoCreate:true !!!
    Can u specify wher can i modif it? is it in dialod script?i tried here to put a command butten in header and all in in cetral region. so where i should add div for dialog ?

  6. #6
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    Did you read the documentation as suggested above?

  7. #7
    Ext User
    Join Date
    Mar 2007
    Posts
    13

    Default

    thnks
    I modified BasicDialog.js as u said. I included hello.js in which dialog script r wiritten .and i want call dialog in center layout . So i spified dialog markup in center div. and i called de dialog from header by a command button. still im facing problem .And i want to kno by passing id="show-dialog-btn" method will work or not ?

    center layout markup !!
    ---------------------------
    <div id="center" class="ylayout-inactive-content">
    <div id="hello-dlg" style="visibility:hidden;position:absolute;top:0px;">
    <div class="ydlg-hd">Dialog 2</div>
    <div class="ydlg-bd">
    <input type="text"/>
    </div>
    </div>
    </div>

    hello.js
    ---------------------
    var HelloWorld = function(){
    var dialog, showBtn;
    var toggleTheme = function(){
    getEl(document.body, true).toggleClass('ytheme-gray');
    };
    return {
    init : function(){
    showBtn = getEl('show-dialog-btn');
    attach to click event
    showBtn.on('click', this.showDialog, this, true);
    getEl('theme-btn').on('click', toggleTheme);
    },

    showDialog : function(){
    if(!dialog){ // lazy initialize the dialog and only create it once
    dialog = new YAHOO.ext.BasicDialog("hello-dlg", {
    modal:true,
    autoTabs:true,
    width:500,
    height:300,
    shadow:true,
    minWidth:300,
    minHeight:250,
    proxyDrag: true
    });
    dialog.addKeyListener(27, dialog.hide, dialog);
    //dialog.addButton('Close', dialog.hide, dialog);
    dialog.addButton('Submit', dialog.hide, dialog);//.disable();
    }
    dialog.show(showBtn.dom);
    }
    };
    }();
    YAHOO.ext.EventManager.onDocumentReady(HelloWorld.init, HelloWorld, true);

    I passed id like:
    -----------------------
    <input type="button" id="show-dialog-btn" value="Dialog 1" />

  8. #8
    Sencha Premium Member
    Join Date
    Mar 2007
    Posts
    31

    Default

    Quote Originally Posted by tom
    Code:
    <div id="center" class="ylayout-inactive-content">
      <div id="hello-dlg" style="visibility:hidden;position:absolute;top:0px;"> 
        <div class="ydlg-hd">Dialog 2</div>            
        <div class="ydlg-bd">
          <input type="text"/>
        </div>
      </div>
    </div>
    According to http://www.yui-ext.com/manual/faq#i_...an_t_access_it all dialog tags should be a direct child of the body tag, e.g.

    Code:
    <body>
      ...
      <div id="center" class="ylayout-inactive-content">
      </div>
      <div id="hello-dlg" style="visibility:hidden;position:absolute;top:0px;"> 
        <div class="ydlg-hd">Dialog 2</div>            
        <div class="ydlg-bd">
          <input type="text"/>
        </div>
      </div>
      ...
    <body>

  9. #9
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    That's correct - that's the way to create a dialog from markup.

    But in this case (as far as he's taken the code anyway...) it's empty markup.

    If this is what he wants, and he's intending to fill the dialog programatically, then he might as well not write that markup, and use autoCreate:true, as doumented in the BasicDialog documentation:

    http://www.yui-ext.com/deploy/yui-ex...sicDialog.html

  10. #10
    Ext User
    Join Date
    Mar 2007
    Posts
    13

    Default

    Hi friend
    I modified the code as Condor70 said. Let me say wt all i done. am using content panel for craeting layout. And my div comes inside the container. I writtem Dialog markup inside de container and is a direct child of the body tag. And called dialog scrpt from outside. still am facing probln. i just want to load a dialog just having only one text field and dat is having autocomplwtw property .

Page 1 of 3 123 LastLast

Posting Permissions

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