Ext小结2
Ext小结2一、树形菜单实例1
1、 前台界面采用div层存放树形菜单
<div id="tree" style="width: 200;height: 300;border: 1px solid #0000ff;overflow: auto;"></div>
解析：overflowe代表若div层不能全部显示内容时，采用滚动条显示
2、 js文件中采用读取外部文件的方式加载树形菜单
Ext.onReady(function(){
var tree = new Ext.tree.TreePanel({
el:'tree',
border:false,
loader:new Ext.tree.TreeLoader({dataUrl:'tree.txt'})
//tree.txt为文件路径
});
var root = new Ext.tree.AsyncTreeNode({text:'school'});
tree.setRootNode(root);
tree.render();
})
3、 外部文件
[
{
text:'class1',
children:[
{text:'stu1',leaf:true},
{text:'stu2',leaf:true}
]
},
{
text:'class2',
leaf:true
}
]
解析：
Text为节点名，children代表子节点，leaf代表是否是叶节点
二、树形菜单实例2
（调用jsp页面实现树形菜单）
1、 前台界面采用div层存放树形菜单
<div id="tree" style="width: 200;height: 300;border: 1px solid #0000ff;overflow: auto;"></div>
解析：overflowe代表若div层不能全部显示内容时，采用滚动条显示
2、 Js文件
Ext.onReady(function(){
var tree = new Ext.tree.TreePanel({
el:'tree',
border:false,
loader:new Ext.tree.TreeLoader({dataUrl:'tree.jsp'})
});
var root = new Ext.tree.AsyncTreeNode({text:'school',id:'0'});
tree.setRootNode(root);
tree.render();
})
解析：
loader:new Ext.tree.TreeLoader({dataUrl:'tree.jsp'})
tree.jsp为要调用的jsp文件
var root = new Ext.tree.AsyncTreeNode({text:'school',id:'0'});
若节点中有id则可以实现延时加载，当加载时前台默认将id传到调用的jsp页面中，jsp页面将返回的json数据加载到相应节点
3、 Jsp页面：
<%
String nodestr = request.getParameter("node");
int node = Integer.parseInt(nodestr);
String json="";
switch(node){
case 0:
json+="[{text:'class1',id:'1',leaf:false},{text:'class2',id:'2',leaf:true,href:'1.html',hrefTarget:'_blank'}]";
break;
case 1:
json+="[{text:'stu1',id:'3',leaf:true,href:'2.html',hrefTarget:'_blank'},{text:'stu2',id:'4',leaf:true,href:'3.html',hrefTarget:'_blank'}]";
break;
default:
break;
}
out.print(json);
%>
解析：
request.getParameter("node");
jsp页面调用时会自动向jsp页面传入一个名为node的参数即为显示的相应节点id
三、菜单栏实例
1、前台：
<div id="tool" style="border: 1px solid #0000ff;"></div>
2、js页面
Ext.onReady(function(){
var tb = new Ext.Toolbar();
var menu1 = new Ext.menu.Menu({
items:[
{text:'add',icon:'images/save.gif',handler:function(){alert("add")}},
{text:'edit',handler:function(){alert("edit")}},
{text:'delete',handler:function(){alert("delete")}}
]
});
解析：
Text为选项值，icon为图标路径，hander为对应方法
var menu2 = new Ext.menu.DateMenu({
handler:function(pd,date){
Ext.Msg.alert("date",date.format('Y-m-d'));
}
});
解析：
为时间控件的选项，可以在hander中调用相应方法取出所选时间，且可以规定时间格式
var menu3 = new Ext.menu.ColorMenu({
handler:function(cm,color){
Ext.Msg.alert("color",color);
document.bgColor=color;
}
});
解析：为颜色控件的选项，可以在hander中调用相应方法取出颜色值
tb.add([
{text:'manage',menu:menu1,icon:'images/rate_good.gif'},
{text:'search',icon:'images/report.gif',handler:function(){alert("search")}},
{text:'date',menu:menu2},
{text:'color',menu:menu3}
]);
tb.render("tool");
})
以上是菜单栏的主界面内容
解析：
tb.render("tool");
tool代表菜单栏显示的位置，通常为一个层
页:
[1]