Skip to content

Instantly share code, notes, and snippets.

@aek

aek/index.htm

Created November 21, 2011 22:31
Show Gist options
  • Save aek/1384181 to your computer and use it in GitHub Desktop.
Save aek/1384181 to your computer and use it in GitHub Desktop.
Download ZIP
example of jxlib-b2
Raw
index.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>ArcheType</title>
<!-- include the jx delicious skin -->
<link rel="stylesheet" href="../js/mootools/jxlib/themes/delicious/jxtheme.css" type="text/css" media="screen" charset="utf-8">
<!-- IE specific style sheets -->
<!--[if LTE IE 6]>
<link rel="stylesheet" href="../js/mootools/jxlib/themes/delicious/ie6.css" type="text/css" media="screen" charset="utf-8">
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" href="../js/mootools/jxlib/themes/delicious/ie7.css" type="text/css" media="screen" charset="utf-8">
<![endif]-->
<link rel="shortcut icon" href="../img/common/favicon.png" type="image/x-icon">
<script type="text/javascript" src="../js/mootools/mootools-core.js"></script>
<script type="text/javascript" src="../js/mootools/mootools-more.js"></script>
<!-- include the jx library -->
<script type="text/javascript" src="../js/mootools/jxlib/jxlib.uncompressed.js" charset="utf-8"></script>
<script type="text/javascript" src="../js/mootools/jxlib/Jx.JsonStore.js" charset="utf-8"></script>
<script type="text/javascript" src="../js/mootools/jxlib/Jx.Charts.js" charset="utf-8"></script>
<script type="text/javascript" src="../js/mootools/jxlib/common.js" charset="utf-8"></script>
<script type="text/javascript" src="../js/rsh.js" charset="utf-8"></script>
</head>
<body>
<div id="thePage">
<div id="ventana" style="display: none;"></div>
<div id="Headerx" style="display: none;">
<div id="header">
<img style="float:left" src="../img/common/banner.png" width="100%" height="90">
</div>
</div>
<iframe id="iframe" name="iframe" style="display: none;"></iframe>
<form id="dform" method="post" target="iframe" action="">
<input type="text" name="query" style="display: none;">
</form>
</div>
<script type="text/javascript">
window.addEvent('domready',function(){
//I'm using the new class Jx.Adaptor.Tree.Object in the 3.1
var treeMenuAdaptor = new Jx.Adaptor.Tree.Object({
protocol: new Jx.Store.Protocol.Ajax({
urls: {
read: '../common/menu.htm'
},
parser: new Jx.Store.Parser.JSON(),
dataProperty: 'items'
}),
folderOptions: {
open: true
},
/*
labelProperty is a change similar to dataProperty in Jx.Store.Protocol.Ajax
to configure the property of the label in the objects of the response data
*/
labelProperty: 'text'
});
new Jx.Container({
items:[
//others panels that don't matters here.
{
class: Jx.Panel,
id: 'menuPanel',
label: 'Menu',
collapse: false,
width: 200,
content: new Jx.Tree({
plugins: [
treeMenuAdaptor
],
onSelect: function(item){
//I modify a little Jx.Adaptor.Tree.Object to pass an attributes option
//with the attributes property of the data objects, only to store in the options
var attr = item.options.attributes;
if(attr!== null && attr!=='undefined' && attr.url){
//send a Request to load a view in the workView
archetype.loadView(attr.url);
}
}
}),
layoutOpts: {
top: 120,
width: 300
}
},
{
class: Jx.Panel,
id: 'workView',
hideTitle: true,
layoutOpts: {
top: 120,
left: 205
}
}]
}).addTo('thePage');
treeMenuAdaptor.load();
new Jx.Layout('thePage');
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment