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代表菜单栏显示的位置,通常为一个层
分享到:
相关推荐
NULL 博文链接:https://luhai1992.iteye.com/blog/628040
NULL 博文链接:https://luhai1992.iteye.com/blog/629600
ext定制:搜索框 Ext.app.SearchField的应用,效果比较好看
目录 前 言 第一部分 Ext Core 第1章 Ext Core重要概念 2 1.1 Ext.Element 2 1.1.1 获取HTMLElement节点的Ext.Element实例 2 1.1.2 CSS样式操作 3 1.1.3 DOM查询与遍历 4 1.1.4 DOM操作 6 ...14.14 本章小结 483
【ASP.NET编程知识】Ext.Net学习笔记之button小结.docx
最近在网上看见很多关于EXT下载的东西!我把个人在各个网站收集到的东西和经典的例子整理一块与大家一起分享!
1.6 本章小结 / 33 .第2章 从“hello world”开始 / 34 2.1 获取ext js 4 / 34 2.2 配置使用ext js库 / 35 2.3 编写“hello world”程序 / 37 2.4 关于ext.onready / 38 2.5 关于ext.blank_image_url / 40 ...
Ext 表单提交数据的三种方法小结,方便利用ext提交数据的朋友
Ext.Net学习笔记之button小结,需要的朋友可以参考一下
11.20 本章小结.............................................. 316 第12 章 一个完整的EXT 应用......................... 317 12.1 确定整体布局........................................ 317 12.2 使用HTML和...
ssh-orcale-ext 实现ext的分页,grid的编辑并异步保存...以及viewport等一些ext的基础知识,算是学了两个星期的小结吧。 对新手应该会有帮助。一个完整的工程, 带有.sql文件,导入表和数据,修改数据库连接就能运行。
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别小结,需要的朋友可以参考下。
ExtJS 是一个很不错的 Ajax 框架,可以用来开发带有华丽外观的富客户端应用,使得 我 们的 b/s 应用更加具有...ExtJS 的一些心得及小结,希望能帮助正在学习或准备学习 ExtJS 的朋友们快速走进 ExtJS2 .0 的精彩世界。
ExtJS是一个很不错的Ajax框架,可以用来开发带有华丽外观的富客户端应用,使得我们的b...本教程记录了前段时间本人学习ExtJS的一些心得及小结,希望能帮助正在学习或准备学习ExtJS的朋友们快速走进ExtJS2.0的精彩世界。
这是我花费数月写的关于Extjs的原创教程,共29个章节。下面是目录: 目 录 1 第一章:序 6 第二章:准备与资源 9 一、下载 9 二、拦路虎 9 三、布署环境 11 四、SpketIDE 12 五、资源 16 ...十二、小结 262
ExtJS是一个很不错的Ajax框架,可以用来开发带有华丽外观的富客户端应用,使得我们的b...本教程记录了前段时间本人学习ExtJS的一些心得及小结,希望能帮助正在学习或准备学习ExtJS的朋友们快速走进ExtJS2.0的精彩世界。