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 ?
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 ?
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.
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]
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
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 ?
Did you read the documentation as suggested above?
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" />
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.Originally Posted by tom
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>
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
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 .
Posting Permissions
