oqapi/webgui
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

- Replaced color picker form control with a more robust version.

Browse source
This commit is contained in:
JT Smith 2007-07-09 09:03:56 +00:00
parent 6fe068e42d
commit 6e0470771e
1193 changed files with 342 additions and 223 deletions
Download patch file Download diff file Expand all files Collapse all files

81
www/extras/extjs/examples/dialog/blog.html vendored Normal file
View file

@ -0,0 +1,81 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Comment Dialog Example</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<!-- GC --> <!-- LIBS --> <script type="text/javascript" src="../../adapter/yui/yui-utilities.js"></script> <script type="text/javascript" src="../../adapter/yui/ext-yui-adapter.js"></script> <!-- ENDLIBS -->
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="post.js"></script>
<link rel="stylesheet" type="text/css" href="post.css" />
</head>
<body>
<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
<div class="post">
<h2>Comment Dialog Example</h2>
<div id="comment-box">
<ul>
<li><a id="post-comment" href="#">Post Comment</a></li>
<li><a id="view-comments" href="#">View Comments</a></li>
</ul>
</div>
<p>This is a more complex example that shows how to implement a comment dialog similar to the one on <a href="http://www.jackslocum.com/yui/" target="_blank">my blog<a/>.
The dialog retrieves the comments in JSON format and renders them to the "View Comments" tab. The "Post Comment" tab posts the comment
to a file on the server that just returns a dummy response (not what you type in) in JSON format. The reason for the dummy response
is so the example can easily be dropped in whatever your environment is and work.</p>
<p>Note that the js is not minified so it is readable. See <a href="post.js">post.js</a> for the full source code.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit. Quisque dolor magna, ornare sed, elementum porta, luctus in, leo.</p>
<p>Donec quis dui. Sed imperdiet. Nunc consequat, est eu sollicitudin gravida, mauris ligula lacinia mauris, eu porta dui nisl in velit. Nam congue, odio id auctor nonummy, augue lectus euismod nunc, in tristique turpis dolor sed urna. Donec sit amet quam eget diam fermentum pharetra. Integer tincidunt arcu ut purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla blandit malesuada odio. Nam augue. Aenean molestie sapien in mi. Suspendisse tincidunt. Pellentesque tempus dui vitae sapien. Donec aliquam ipsum sit amet pede. Sed scelerisque mi a erat. Curabitur rutrum ullamcorper risus. Maecenas et lorem ut felis dictum viverra. Fusce sem. Donec pharetra nibh sit amet sapien.</p>
<p>Aenean ut orci sed ligula consectetuer pretium. Aliquam odio. Nam pellentesque enim. Nam tincidunt condimentum nisi. Maecenas convallis luctus ligula. Donec accumsan ornare risus. Vestibulum id magna a nunc posuere laoreet. Integer iaculis leo vitae nibh. Nam vulputate, mauris vitae luctus pharetra, pede neque bibendum tellus, facilisis commodo diam nisi eget lacus. Duis consectetuer pulvinar nisi. Cras interdum ultricies sem. Nullam tristique. Suspendisse elementum purus eu nisl. Nulla facilisi. Phasellus ultricies ullamcorper lorem. Sed euismod ante vitae lacus. Nam nunc leo, congue vehicula, luctus ac, tempus non, ante. Morbi suscipit purus a nulla. Sed eu diam.</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras imperdiet felis id velit. Ut non quam at sem dictum ullamcorper. Vestibulum pharetra purus sed pede. Aliquam ultrices, nunc in varius mattis, felis justo pretium magna, eget laoreet justo eros id eros. Aliquam elementum diam fringilla nulla. Praesent laoreet sapien vel metus. Cras tempus, sapien condimentum dictum dapibus, lorem augue fringilla orci, ut tincidunt eros nisi eget turpis. Nullam nunc nunc, eleifend et, dictum et, pharetra a, neque. Ut feugiat. Aliquam erat volutpat. Donec pretium odio nec felis. Phasellus sagittis lacus eget sapien. Donec est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
<p>Vestibulum semper. Nullam non odio. Aliquam quam. Mauris eu lectus non nunc auctor ullamcorper. Sed tincidunt molestie enim. Phasellus lobortis justo sit amet quam. Duis nulla erat, varius a, cursus in, tempor sollicitudin, mauris. Aliquam mi velit, consectetuer mattis, consequat tristique, pulvinar ac, nisl. Aliquam mattis vehicula elit. Proin quis leo sed tellus scelerisque molestie. Quisque luctus. Integer mattis. Donec id augue sed leo aliquam egestas. Quisque in sem. Donec dictum enim in dolor. Praesent non erat. Nulla ultrices vestibulum quam.</p>
<p>Duis hendrerit, est vel lobortis sagittis, tortor erat scelerisque tortor, sed pellentesque sem enim id metus. Maecenas at pede. Nulla velit libero, dictum at, mattis quis, sagittis vel, ante. Phasellus faucibus rutrum dui. Cras mauris elit, bibendum at, feugiat non, porta id, neque. Nulla et felis nec odio mollis vehicula. Donec elementum tincidunt mauris. Duis vel dui. Fusce iaculis enim ac nulla. In risus.</p>
<p>Donec gravida. Donec et enim. Morbi sollicitudin, lacus a facilisis pulvinar, odio turpis dapibus elit, in tincidunt turpis felis nec libero. Nam vestibulum tempus ipsum. In hac habitasse platea dictumst. Nulla facilisi. Donec semper ligula. Donec commodo tortor in quam. Etiam massa. Ut tempus ligula eget tellus. Curabitur id velit ut velit varius commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Fusce ornare pellentesque libero. Nunc rhoncus. Suspendisse potenti. Ut consequat, leo eu accumsan vehicula, justo sem lobortis elit, ac sollicitudin ipsum neque nec ante.</p>
<p>Aliquam elementum mauris id sem. Vivamus varius, est ut nonummy consectetuer, nulla quam bibendum velit, ac gravida nisi felis sit amet urna. Aliquam nec risus. Maecenas lacinia purus ut velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sit amet dui vitae lacus fermentum sodales. Donec varius dapibus nisl. Praesent at velit id risus convallis bibendum. Aliquam felis nibh, rutrum nec, blandit non, mattis sit amet, magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam varius dignissim nibh. Quisque id orci ac ante hendrerit molestie. Aliquam malesuada enim non neque.</p>
</div>
<!-- comments dialog -->
<div id="comments-dlg" style="visibility:hidden;">
<div class="x-dlg-hd">Comments</div>
<div class="x-dlg-bd">
<div id="post-tab" class="x-dlg-tab" title="Post Comment">
<div class="inner-tab">
<form action="" method="post" id="comment-form" onsubmit="return false;">
<input id="postId" type="hidden" name="postId" value="1" />
<p>
<label for="author"><small>Name</small></label>
<input class="textinput" type="text" name="author" id="author" value="" size="22" tabindex="1" />
</p>
<p><label for="email"><small>E-mail (will not be published)</small></label>
<input class="textinput" type="text" name="email" id="email" value="" size="22" tabindex="2" />
</p>
<p><label for="url"><small>Website</small></label>
<input class="textinput" type="text" name="url" id="url" value="" size="22" tabindex="3" />
</p>
<p>
<label for="comment"><small>Comment</small></label>
<textarea name="comment" id="comment" tabindex="4" cols="40" rows="10"></textarea>
</p>
</form>
</div>
</div>
<div id="view-tab" class="x-dlg-tab" title="View Comments">
<ul id="comments-list" class="inner-tab">
</ul>
</div>
</div>
<div class="x-dlg-ft">
<div id="dlg-msg">
<span id="post-error" class="posting-msg"><img src="images/warning.gif" width="16" height="16" align="absmiddle" />&nbsp;<span id="post-error-msg"></span></span>
<span id="post-wait" class="posting-msg"><img src="../../images/grid/loading.gif" width="16" height="16" align="absmiddle" />&nbsp;Posting Comment...</span>
</div>
</div>
</div>
</body>
</html>

44
www/extras/extjs/examples/dialog/comments.txt vendored Normal file
View file

@ -0,0 +1,44 @@
{"comments": [{
id: "1",
author: "Jack Slocum",
link: "http://www.jackslocum.com/",
date: "October 29th, 2006 9:21pm",
text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa."
},{
id: "2",
author: "Jack Slocum",
link: "http://www.jackslocum.com/",
date: "October 29th, 2006 9:21pm",
text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa."
},{
id: "3",
author: "Jack Slocum",
link: "http://www.jackslocum.com/",
date: "October 29th, 2006 9:21pm",
text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa."
},{
id: "4",
author: "Jack Slocum",
link: "http://www.jackslocum.com/",
date: "October 29th, 2006 9:21pm",
text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa."
},{
id: "5",
author: "Jack Slocum",
link: "http://www.jackslocum.com/",
date: "October 29th, 2006 9:21pm",
text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa."
},{
id: "6",
author: "Jack Slocum",
link: "http://www.jackslocum.com/",
date: "October 29th, 2006 9:21pm",
text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa."
},{
id: "7",
author: "Jack Slocum",
link: "http://www.jackslocum.com/",
date: "October 29th, 2006 9:21pm",
text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa."
}
]}

64
www/extras/extjs/examples/dialog/hello.html vendored Normal file
View file

@ -0,0 +1,64 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Hello World Dialog Example</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<!-- GC --> <!-- LIBS -->
<script type="text/javascript" src="../../adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="../../adapter/yui/ext-yui-adapter.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="../../ext-all.js"></script>
<script language="javascript" src="hello.js"></script>
<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../examples.css" />
</head>
<body>
<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
<h1>Hello World Dialog</h1>
<p>This example shows how to create a very simple modal BasicDialog with "autoTabs".</p>
<input type="button" id="show-dialog-btn" value="Hello World" /><br /><br />
<p>Note that the js is not minified so it is readable. See <a href="hello.js">hellos.js</a> for the full source code.</p>
Here's snapshot of the code that creates the dialog:
<pre class="code"><code>dialog = new Ext.BasicDialog("hello-dlg", {
modal:true,
autoTabs:true,
width:500,
height:300,
shadow:true,
minWidth:300,
minHeight:300
});
dialog.addKeyListener(27, dialog.hide, dialog);
dialog.addButton('Close', dialog.hide, dialog);
dialog.addButton('Submit', dialog.hide, dialog).disable();
</code></pre>
<!-- The dialog is created from existing markup.
The inline styles just hide it until it created and should be in a stylesheet -->
<div id="hello-dlg" style="visibility:hidden;position:absolute;top:0px;">
<div class="x-dlg-hd">Hello Dialog</div>
<div class="x-dlg-bd">
<!-- Auto create tab 1 -->
<div class="x-dlg-tab" title="Hello World 1">
<!-- Nested "inner-tab" to safely add padding -->
<div class="inner-tab">
Hello...<br><br><br>
</div>
</div>
<!-- Auto create tab 2 -->
<div class="x-dlg-tab" title="Hello World 2">
<div class="inner-tab">
... World!
</div>
</div>
</div>
</div>
</div>
</body>
</html>

46
www/extras/extjs/examples/dialog/hello.js vendored Normal file
View file

@ -0,0 +1,46 @@
/*
* Ext JS Library 1.0.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* licensing@extjs.com
*
* http://www.extjs.com/license
*/
// create the HelloWorld application (single instance)
var HelloWorld = function(){
// everything in this space is private and only accessible in the HelloWorld block
// define some private variables
var dialog, showBtn;
// return a public interface
return {
init : function(){
showBtn = Ext.get('show-dialog-btn');
// attach to click event
showBtn.on('click', this.showDialog, this);
},
showDialog : function(){
if(!dialog){ // lazy initialize the dialog and only create it once
dialog = new Ext.BasicDialog("hello-dlg", {
autoTabs:true,
width:500,
height:300,
shadow:true,
minWidth:300,
minHeight:250,
proxyDrag: true
});
dialog.addKeyListener(27, dialog.hide, dialog);
dialog.addButton('Submit', dialog.hide, dialog).disable();
dialog.addButton('Close', dialog.hide, dialog);
}
dialog.show(showBtn.dom);
}
};
}();
// using onDocumentReady instead of window.onload initializes the application
// when the DOM is ready, without waiting for images and other resources to load
Ext.onReady(HelloWorld.init, HelloWorld, true);

BIN
www/extras/extjs/examples/dialog/images/comment-bg.gif vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 838 B

BIN
www/extras/extjs/examples/dialog/images/comment.gif vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 595 B

BIN
www/extras/extjs/examples/dialog/images/warning.gif vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 960 B

39
www/extras/extjs/examples/dialog/layout.html vendored Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Layout Dialog Example</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<!-- GC --> <!-- LIBS --> <script type="text/javascript" src="../../adapter/yui/yui-utilities.js"></script> <script type="text/javascript" src="../../adapter/yui/ext-yui-adapter.js"></script> <!-- ENDLIBS -->
<script type="text/javascript" src="../../ext-all.js"></script>
<script language="javascript" src="layout.js"></script>
<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../examples.css" />
</head>
<body>
<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
<h1>Layout Dialog Example</h1>
<p>This example shows how to create a modal dialog with an embedded BorderLayout using LayoutDialog.</p>
<input type="button" id="show-dialog-btn" value="Show Dialog" /><br /><br />
<p>Note that the js is not minified so it is readable. See <a href="layout.js">layout.js</a> for the full source code.</p>
<!-- dialog is created from existing markup -->
<div id="hello-dlg" style="visibility:hidden;">
<div class="x-dlg-hd">Layout Dialog</div>
<div class="x-dlg-bd">
<div id="west" class="x-layout-inactive-content">
West
</div>
<div id="center" class="x-layout-inactive-content" style="padding:10px;">
<p>This dialog has the Vista theme applied.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit. Quisque dolor magna, ornare sed, elementum porta, luctus in, leo.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit. Quisque dolor magna, ornare sed, elementum porta, luctus in, leo.</p>
</div>
</div>
</div>
</body>
</html>

77
www/extras/extjs/examples/dialog/layout.js vendored Normal file
View file

@ -0,0 +1,77 @@
/*
* Ext JS Library 1.0.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* licensing@extjs.com
*
* http://www.extjs.com/license
*/
// create the LayoutExample application (single instance)
var LayoutExample = function(){
// everything in this space is private and only accessible in the HelloWorld block
// define some private variables
var dialog, showBtn;
var toggleTheme = function(){
Ext.get(document.body, true).toggleClass('ytheme-gray');
};
// return a public interface
return {
init : function(){
showBtn = Ext.get('show-dialog-btn');
// attach to click event
showBtn.on('click', this.showDialog, this);
},
showDialog : function(){
if(!dialog){ // lazy initialize the dialog and only create it once
dialog = new Ext.LayoutDialog("hello-dlg", {
modal:true,
width:600,
height:400,
shadow:true,
minWidth:300,
minHeight:300,
proxyDrag: true,
west: {
split:true,
initialSize: 150,
minSize: 100,
maxSize: 250,
titlebar: true,
collapsible: true,
animate: true
},
center: {
autoScroll:true,
tabPosition: 'top',
closeOnTab: true,
alwaysShowTabs: true
}
});
dialog.addKeyListener(27, dialog.hide, dialog);
dialog.addButton('Submit', dialog.hide, dialog);
dialog.addButton('Close', dialog.hide, dialog);
var layout = dialog.getLayout();
layout.beginUpdate();
layout.add('west', new Ext.ContentPanel('west', {title: 'West'}));
layout.add('center', new Ext.ContentPanel('center', {title: 'The First Tab'}));
// generate some other tabs
layout.add('center', new Ext.ContentPanel(Ext.id(), {
autoCreate:true, title: 'Another Tab', background:true}));
layout.add('center', new Ext.ContentPanel(Ext.id(), {
autoCreate:true, title: 'Third Tab', closable:true, background:true}));
layout.endUpdate();
}
dialog.show(showBtn.dom);
}
};
}();
// using onDocumentReady instead of window.onload initializes the application
// when the DOM is ready, without waiting for images and other resources to load
Ext.EventManager.onDocumentReady(LayoutExample.init, LayoutExample, true);

57
www/extras/extjs/examples/dialog/msg-box.html vendored Normal file
View file

@ -0,0 +1,57 @@
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>MessageBox</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<!-- GC --> <!-- LIBS --> <script type="text/javascript" src="../../adapter/yui/yui-utilities.js"></script> <script type="text/javascript" src="../../adapter/yui/ext-yui-adapter.js"></script> <!-- ENDLIBS -->
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="msg-box.js"></script>
<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../examples.css" />
</head>
<body>
<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
<h1>MessageBox Dialogs</h1>
<p>The example shows how to use the MessageBox class. Some of the buttons have animations, some are normal.</p>
<p>The js is not minified so it is readable. See <a href="msg-box.js">msg-box.js</a>.</p>
<p>
<b>Confirm</b><br />
Standard Yes/No dialog.
<button id="mb1">Show Me</button>
</p>
<p>
<b>Prompt</b><br />
Standard prompt dialog.
<button id="mb2">Show Me</button>
</p>
<p>
<b>Multi-line Prompt</b><br />
A multi-line prompt dialog.
<button id="mb3">Show Me</button>
</p>
<p>
<b>Yes/No/Cancel</b><br />
Standard Yes/No/Cancel dialog.
<button id="mb4">Show Me</button>
</p>
<p>
<b>Progress Dialog</b><br />
You can set a progress on a progress MessageBox.
<button id="mb6">Show Me</button>
</p>
<p>
<b>Alert</b><br />
Standard alert message dialog.
<button id="mb7">Show Me</button>
</p>
</body>
</html>

77
www/extras/extjs/examples/dialog/msg-box.js vendored Normal file
View file

@ -0,0 +1,77 @@
/*
* Ext JS Library 1.0.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* licensing@extjs.com
*
* http://www.extjs.com/license
*/
Ext.onReady(function(){
Ext.get('mb1').on('click', function(e){
Ext.MessageBox.confirm('Confirm', 'Are you sure you want to do that?', showResult);
});
Ext.get('mb2').on('click', function(e){
Ext.MessageBox.prompt('Name', 'Please enter your name:', showResultText);
});
Ext.get('mb3').on('click', function(e){
Ext.MessageBox.show({
title: 'Address',
msg: 'Please enter your address:',
width:300,
buttons: Ext.MessageBox.OKCANCEL,
multiline: true,
fn: showResultText,
animEl: 'mb3'
});
});
Ext.get('mb4').on('click', function(e){
Ext.MessageBox.show({
title:'Save Changes?',
msg: 'Your are closing a tab that has unsaved changes. Would you like to save your changes?',
buttons: Ext.MessageBox.YESNOCANCEL,
fn: showResult,
animEl: 'mb4'
});
});
Ext.get('mb6').on('click', function(){
Ext.MessageBox.show({
title: 'Please wait...',
msg: 'Initializing...',
width:240,
progress:true,
closable:false,
animEl: 'mb6'
});
// this hideous block creates the bogus progress
var f = function(v){
return function(){
if(v == 11){
Ext.MessageBox.hide();
}else{
Ext.MessageBox.updateProgress(v/10, 'Loading item ' + v + ' of 10...');
}
};
};
for(var i = 1; i < 12; i++){
setTimeout(f(i), i*1000);
}
});
Ext.get('mb7').on('click', function(){
Ext.MessageBox.alert('Status', 'Changes saved successfully.', showResult);
});
function showResult(btn){
Ext.example.msg('Button Click', 'You clicked the {0} button', btn);
};
function showResultText(btn, text){
Ext.example.msg('Button Click', 'You clicked the {0} button and entered the text "{1}".', btn, text);
};
});

132
www/extras/extjs/examples/dialog/post.css vendored Normal file
View file

@ -0,0 +1,132 @@
/*
* Ext JS Library 1.0.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* licensing@extjs.com
*
* http://www.extjs.com/license
*/
body{
font: normal 9pt verdana,tahoma,arial,helvetica;
}
.post{
padding:15px;
}
.post h2{
font:normal 22px times;
margin-bottom:10px;
}
.post p{
margin-bottom:10px;
line-height:18px;
}
.loading-indicator {
font-size:8pt;
background-image: url('../../images/grid/loading.gif');
background-repeat: no-repeat;
background-position: left;
padding-left:20px;
margin:5px;
}
/** Posting messages */
.x-dlg-ft{
position:relative;
}
#dlg-msg {
position:absolute;
left:0px;
top:0px;
width:40%;
}
.posting-msg{
display:none;
font:normal 8pt tahoma, arial;
color:black;
}
#post-error-msg{
color:red;
}
.active-msg{
display:block;
}
/** Comment Box (with links) */
#comment-box{
float:right;
clear:none;
border:2px solid #aca899;
background-color:#f3f2e7;
padding:10px;
margin:15px;
}
#comment-box li{
margin:4px;
}
#comment-box a{
text-decoration:none;
}
#comments-list{
margin:0px;
padding:0px;
}
/** Comment Post Form */
#post-tab .inner-tab{
margin:10px;
margin-top:5px;
}
#comment-form label {
margin:4px;
margin-left:0px;
display:block;
color:#333333;
font:normal 10px arial,helvetica;
line-height:14px;
}
#comment-form .textinput{
border:1px solid #6593cf;
width:98%;
padding:1px;
margin-bottom:2px;
font:normal 11px tahoma, arial;
}
#comment {
width:480px;
height:205px;
font:normal 11px tahoma, arial;
}
/** Comment List */
.commentmetadata {
margin: 0;
display: block;
font-size: 9px;
font-weight:normal;
color:gray;
margin-bottom:10px;
float:right;
clear:none;
}
.cuser{
float:left;
clear:none;
font:bold 12px tahoma, arial;
padding-left:21px;
background: url(images/comment.gif) no-repeat;
}
.cuser a{
font:bold 12px tahoma, arial;
}
.cheader{
height:20px;
}
#comments-list li {
display:block;
background: url(images/comment-bg.gif) repeat-x;
background-position:0px -5px;
padding:15px;
padding-bottom:18px;
font-size:12px;
}

162
www/extras/extjs/examples/dialog/post.js vendored Normal file
View file

@ -0,0 +1,162 @@
/*
* Ext JS Library 1.0.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* licensing@extjs.com
*
* http://www.extjs.com/license
*/
var Comments = function(){
var dialog, postLink, viewLink, txtComment;
var tabs, commentsList, postBtn, renderer;
var wait, error, errorMsg;
var posting = false;
return {
init : function(){
// cache some elements for quick access
txtComment = Ext.get('comment');
commentsList = Ext.get('comments-list');
postLink = Ext.get('post-comment');
viewLink = Ext.get('view-comments');
wait = Ext.get('post-wait');
error = Ext.get('post-error');
errorMsg = Ext.get('post-error-msg');
this.createDialog();
postLink.on('click', function(e){
e.stopEvent();
tabs.activate('post-tab');
dialog.show(postLink);
});
viewLink.on('click', function(e){
e.stopEvent();
tabs.activate('view-tab');
dialog.show(viewLink);
});
},
// submit the comment to the server
submitComment : function(){
postBtn.disable();
wait.radioClass('active-msg');
var commentSuccess = function(o){
postBtn.enable();
var data = renderer.parse(o.responseText);
// if we got a comment back
if(data){
wait.removeClass('active-msg');
renderer.append(data.comments[0]);
dialog.hide();
}else{
error.radioClass('active-msg');
errorMsg.update(o.responseText);
}
};
var commentFailure = function(o){
postBtn.enable();
error.radioClass('active-msg');
errorMsg.update('Unable to connect.');
};
Ext.lib.Ajax.formRequest('comment-form', 'post.php',
{success: commentSuccess, failure: commentFailure});
},
createDialog : function(){
dialog = new Ext.BasicDialog("comments-dlg", {
autoTabs:true,
width:500,
height:300,
shadow:true,
minWidth:300,
minHeight:300
});
dialog.addKeyListener(27, dialog.hide, dialog);
postBtn = dialog.addButton('Post', this.submitComment, this);
dialog.addButton('Close', dialog.hide, dialog);
// clear any messages and indicators when the dialog is closed
dialog.on('hide', function(){
wait.removeClass('active-msg');
error.removeClass('active-msg');
txtComment.dom.value = '';
});
// stoe a refeence to the tabs
tabs = dialog.getTabs();
// auto fit the comment box to the dialog size
var sizeTextBox = function(){
txtComment.setSize(dialog.size.width-44, dialog.size.height-264);
};
sizeTextBox();
dialog.on('resize', sizeTextBox);
// hide the post button if not on Post tab
tabs.on('tabchange', function(panel, tab){
postBtn.setVisible(tab.id == 'post-tab');
});
// set up the comment renderer, all ajax requests for commentsList
// go through this render
renderer = new CommentRenderer(commentsList);
var um = commentsList.getUpdateManager();
um.setRenderer(renderer);
// lazy load the comments when the view tab is activated
var commentsLoaded = false;
tabs.getTab('view-tab').on('activate', function(){
if(!commentsLoaded){
um.update('comments.txt');
commentsLoaded = true;
}
});
}
};
}();
// This class handles rendering JSON into comments
var CommentRenderer = function(list){
// create a template for each JSON object
var tpl = new Ext.DomHelper.Template(
'<li id="comment-{id}">' +
'<div class="cheader">' +
'<div class="cuser">{author}:</div>' +
'<div class="commentmetadata">{date}</div>' +
'</div>{text}</li>'
);
this.parse = function(json){
try{
return eval('(' + json + ')');
}catch(e){}
return null;
};
// public render function for use with UpdateManager
this.render = function(el, response){
var data = this.parse(response.responseText);
if(!data || !data.comments || data.comments.length < 1){
el.update('There are no comments for this post.');
return;
}
// clear loading
el.update('');
for(var i = 0, len = data.comments.length; i < len; i++){
this.append(data.comments[i]);
}
};
// appends a comment
this.append = function(data){
tpl.append(list.dom, data);
};
};
Ext.EventManager.onDocumentReady(Comments.init, Comments, true);

10
www/extras/extjs/examples/dialog/post.php vendored Normal file
View file

@ -0,0 +1,10 @@
<?
//This file does nothing. All it does is kick out a bogus new comment in JSON format.
?>{"comments": [{
id: "10",
author: "Jack Slocum",
link: "http://www.jackslocum.com/",
date: "October 29th, 2006 9:21pm",
text: "New posted comment. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa."
}
]}