- 浏览: 219409 次
- 性别:
- 来自: 广州
文章分类
最新评论
-
zzhyq:
有没有后台是ASHX 的呀
Ext.tree.TreePanel -
693593336:
谢谢作者分享,正好用上
Ext.tree.TreePanel -
greatwqs:
提供一个下载的demo不是更好
基于servlet的 Freemarker Demo
转载:http://blog.csdn.net/tinyyys/archive/2009/03/2**027142.aspx
个人只是进行了测试,理解而已。原文中使用的数据库是SQL 2000的,而本人使用的是mysql,故做了一点点的更改。
【注意】:以下所有引用资源的路径都是根据自己的资源位置来配置的。
第一步:创建treePanel.html
Code:
- <!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
- <title>测试Ext.tree.TreePanel</title>
- <linkrel="stylesheet"type="text/css"href="../static/lib/ext/resources/css/ext-all.css"/>
- <scripttype="text/javascript"src="../static/lib/ext/adapter/ext/ext-base.js"></script>
- <scripttype="text/javascript"src="../static/lib/ext/ext-all.js"></script>
- <linkrel="stylesheet"type="text/css"href="../style/comment.css"/>
- <scripttype="text/javascript"src="../js/treePanel.js"charset="utf-8"></script>
- <linkrel="shortcuticon"href="x.ico"/>
- </head>
- <body>
- <divid="tree-panel"style="overflow:auto;height:600px;width:200px;border:2pxsolid#c3daf9;"></div>
- </body>
- </html>
第二步:创建含Ext.onRready函数的treePanel.js文件
Code:
- Ext.onReady(function(){
- Ext.QuickTips.init();//浮动信息提示
- Ext.BLANK_IMAGE_URL='../static/lib/ext/resources/images/default/s.gif';//替换图片文件地址为本地
- //创建一个简写
- var_Tree=Ext.tree;
- //定义根节点的Loader
- var_treeloader=new_Tree.TreeLoader({
- //dataUrl:'tree.jsp'//这里可以不需要指定URL,在加载前事件响应里面设置
- });
- //添加一个树形面板
- var_treepanel=new_Tree.TreePanel({
- //renderTo:"tree_div",//如果使用renderTo,则不能使用setRootNode()方法,需要在TreePanel中设置root属性。
- el:'tree-panel',//将树形添加到一个指定的div中,非常重要!
- region:'west',
- title:'功能菜单',
- width:200,//面板宽度
- minSize:180,
- maxSize:250,
- split:true,
- autoHeight:false,
- frame:true,//美化界面
- //title:'可编辑和拖动的异步树',//标题
- //autoScroll:true,//自动滚动
- enableDD:true,//是否支持拖拽效果
- containerScroll:true,//是否支持滚动条
- rootVisible:true,//是否隐藏根节点,很多情况下,我们选择隐藏根节点增加美观性
- border:true,//边框
- animate:true,//动画效果
- loader:_treeloader//树加载
- });
- //异步加载根节点
- var_rootnode=new_Tree.AsyncTreeNode({
- id:'0',
- text:'家电品牌总类',
- draggable:false,//根节点不容许拖动
- expanded:true
- });
- //为tree设置根节点
- _treepanel.setRootNode(_rootnode);
- //响应加载前事件,传递node参数
- _treepanel.on('beforeload',function(node){
- _treepanel.loader.dataUrl='tree.jsp?parentId='+node.id;//定义子节点的Loader
- });
- //渲染树形
- _treepanel.render();
- //展开节点,第一个参数表示是否级联展开子节点
- _rootnode.expand(false);
- //设置树的点击事件【测试点击事件不影响树的其他效果】
- var_treeClick=function(node,e){//contentPanel为定义的TabPanel
- if(node.isLeaf()){
- e.stopEvent();
- varn=contentPanel.getComponent(node.id);//通过node的id获取组件
- if(!n){//如果不存在则new一个出来
- varn=contentPanel.add({
- 'id':node.id,
- 'title':node.text,
- closable:true,
- autoLoad:{
- url:'tabFrame.jsp?url=grid.html',
- scripts:true
- }//通过autoLoad属性载入目标页,如果要用到脚本,必须加上scripts属性
- });
- }
- contentPanel.setActiveTab(n);
- }
- }
- //增加鼠标单击事件
- _treepanel.on('click',_treeClick);
- //定义右键菜单
- varrightClick=newExt.menu.Menu({
- id:'rightClickCont',
- items:[{
- id:'rMenu1',
- text:'添加节点',
- //增加菜单点击事件
- handler:function(){
- alert('添加节点的实现!');
- }
- },{
- id:'rMenu2',
- text:'编辑节点'
- },{
- id:'rMenu3',
- text:'删除节点'
- }]
- });
- //增加右键点击事件
- _treepanel.on('contextmenu',function(node,event){//声明菜单类型
- event.preventDefault();//阻止浏览器默认右键菜单显示
- rightClick.showAt(event.getXY());//取得鼠标点击坐标,展示菜单
- });
- /*
- *设置tree的节点放置函数此函数有一个很重要的参数对象ee对象有三个重要的属性,分别为dropNode,target,point
- *1.dropNode为在拖动时鼠标抓住的节点2.target为将要放置在某处的节点
- *3.point为被放置的状态,分别有append表示添加,above节点的上方,below节点的下方。
- *
- */
- _treepanel.on('nodedrop',function(e){
- if(e.point=='append'){
- alert('当前"'+e.dropNode.text+'"划到"'+e.target.text+'"里面!');
- }elseif(e.point=='above'){
- alert('当前"'+e.dropNode.text+'"放在了"'+e.target.text+'"上面!');
- }elseif(e.point=='below'){
- alert('当前"'+e.dropNode.text+'"放在了"'+e.target.text+'"下面!');
- }
- });
- //在原有的树形添加一个TreeEditor
- var_treeEditer=new_Tree.TreeEditor(_treepanel,{
- allowBlank:false
- });
- /*
- *为创建的treeEditer添加事件有两个事件最为常用,一个为beforestartedit另一个为complete
- *从名字就可以看出,beforestartedit事件是在编辑前的事件,因此可以通过它来判断那些节点可以编辑那些不可以。
- *complete为编辑之后的事件,在这里面可以添加很多事件,比如添加一个Ext.Ajax向后台传送修改的值等等。
- */
- _treeEditer.on("beforestartedit",function(_treeEditer){
- var_tempNode=_treeEditer.editNode;//将要编辑的节点
- if(_tempNode.isLeaf()){//这里设定叶子节点才容许编辑
- returntrue;
- }else{
- returnfalse;
- }
- });
- _treeEditer.on("complete",function(_treeEditer){
- Ext.Msg.alert("被修改为"+_treeEditer.editNode.text);
- });
- //(1)通过TabPanel控件的html属性配合<iframe>实现。该方法是利用
- //html属性中包含<iframe>的语法来调用另一个页面,具体见代码。
- //(2)通过TabPanel控件的autoLoad属性实现。该方法是利用autoLoad属性,它有很多参数,
- //其中有两个比较重要,url表示要载入的文件,scripts表示载入的文件是否含有脚本,该属性相当重要,
- //如果在新的页面中要创建Ext控件,必须指定该参数。该方法实现较前一个复杂,因为引入的文件不是一个完整的html文件,
- //有可能只是内容的一部分,但是资源占用较少,而且载入速度较快(它有一个载入指示)
- //添加第一个节点(html)
- _treepanel.root.appendChild(newExt.tree.TreeNode({
- id:'htmlPanel',
- text:'通过html打开',
- listeners:{
- 'click':function(node,event){
- event.stopEvent();
- varn=contentPanel.getComponent(node.id);
- if(!n){//判断是否已经打开该面板
- n=contentPanel.add({
- 'id':node.id,
- 'title':node.text,
- closable:true,//通过html载入目标页
- html:'<iframescrolling="auto"frameborder="0"width="100%"height="100%"src="grid.html"></iframe>'
- });
- }
- contentPanel.setActiveTab(n);
- }
- }
- }));
- //添加第二个节点(autoLoad)
- _treepanel.root.appendChild(newExt.tree.TreeNode({
- id:'autoLoadPanel',
- text:'通过autoLoad打开',
- listeners:{
- 'click':function(node,event){
- event.stopEvent();
- varn=contentPanel.getComponent(node.id);
- if(!n){////判断是否已经打开该面板
- n=contentPanel.add({
- 'id':node.id,
- 'title':node.text,
- closable:true,
- autoLoad:{
- url:'tabFrame.jsp?url=grid.html',
- scripts:true
- }//通过autoLoad属性载入目标页,如果要用到脚本,必须加上scripts属性
- });
- }
- contentPanel.setActiveTab(n);
- }
- }
- }));
- //右边具体功能面板区
- varcontentPanel=newExt.TabPanel({
- region:'center',
- enableTabScroll:true,
- activeTab:0,
- items:[{
- id:'homePage',
- title:'首页',
- autoScroll:true,
- //closable:true,
- html:'<divclass="tabPanel-treePanel">Tree控件和TabPanel控件结合功能演示</div>'
- }]
- });
- newExt.Viewport({
- layout:'border',//使用border布局
- defaults:{
- activeItem:0
- },
- items:[_treepanel,contentPanel]
- });
- });
其实这样子就可以运行了,只是动态加载的数据无法加载进去而已。以下是从后台数据库获取json格式数据的操作。
1)建立一个树节点的bean,封装一个树节点。
2)连接数据库,做相关操作之后,以json格式数据传回_treepanel.loader.dataUrl='tree.jsp?parentId='+node.id;//定义子节点的Loader。【实际上,就是一个字符串】
3)tree.jsp
Code:
- <%@pagelanguage="java"pageEncoding="utf-8"%>
- <jsp:useBeanclass="com.xxx.javabean.JSONTree"id="JSONTree"></jsp:useBean>
- <%
- StringparentId="";
- if(request.getParameter("parentId")!=null){
- parentId=request.getParameter("parentId").toString();
- }
- JSONTree.setparentId(parentId);
- %>
- <%=JSONTree.getJSONString()%>
Code:
- packagecom.xxx.javabean;
- /**
- *@authornothing2012
- *定义树节点的属性,包括节点ID、Text、图标、是否为叶子节点、是否展开等。
- */
- publicclassJSONTreeNode{
- privateStringid;//ID
- privateStringtext;//节点显示
- privateStringcls;//图标
- privatebooleanleaf;//是否叶子
- privateStringhref;//链接
- privateStringhrefTarget;//链接指向
- privatebooleanexpandable;//是否展开
- privateStringdescription;//描述信息
- publicStringgetId(){
- returnid;
- }
- publicvoidsetId(Stringid){
- this.id=id;
- }
- publicStringgetText(){
- returntext;
- }
- publicvoidsetText(Stringtext){
- this.text=text;
- }
- publicStringgetCls(){
- returncls;
- }
- publicvoidsetCls(Stringcls){
- this.cls=cls;
- }
- publicbooleanisLeaf(){
- returnleaf;
- }
- publicvoidsetLeaf(booleanleaf){
- this.leaf=leaf;
- }
- publicStringgetHref(){
- returnhref;
- }
- publicvoidsetHref(Stringhref){
- this.href=href;
- }
- publicStringgetHrefTarget(){
- returnhrefTarget;
- }
- publicvoidsetHrefTarget(StringhrefTarget){
- this.hrefTarget=hrefTarget;
- }
- publicbooleanisExpandable(){
- returnexpandable;
- }
- publicvoidsetExpandable(booleanexpandable){
- this.expandable=expandable;
- }
- publicStringgetDescription(){
- returndescription;
- }
- publicvoidsetDescription(Stringdescription){
- this.description=description;
- }
- }
Code:
- packagecom.xxx.javabean;
- importjava.sql.Connection;
- importjava.sql.DriverManager;
- importjava.sql.ResultSet;
- importjava.sql.SQLException;
- importjava.sql.Statement;
- importjava.util.ArrayList;
- importjava.util.List;
- importnet.sf.json.JSONArray;
- /*
- *@createbynothing2012
- */
- publicclassJSONTree{
- privateStringparentId;
- publicStringgetJSONString(){
- Connectioncon=null;
- Statementst=null;
- ResultSetrs=null;
- List<JSONTreeNode>treeNodeArray=null;
- //传一个父节点的ID过来
- StringSQLString="SELECT*FROMCategoriesWHEREparentId="
- +this.parentId+"ORDERBYcategoryId";
- try{
- Class.forName("com.mysql.jdbc.Driver");
- DriverManager.registerDriver(newcom.mysql.jdbc.Driver());
- StringDbConn="jdbc:mysql://localhost:3306/extjs";
- StringDbPass="root";
- con=DriverManager.getConnection(DbConn,"root",DbPass);
- st=con.createStatement();
- //查找所有拥有下级类别的类别ID//不同的记录属于同一个parentID,故使用groupby
- rs=st
- .executeQuery("SELECTparentIdFROMCategoriesWHEREparentId>0GroupByparentIdOrderByparentId");
- StringBufferparentIDBuffer=newStringBuffer();
- parentIDBuffer.append("|");
- while(rs.next()){
- parentIDBuffer.append(rs.getString("parentId"));
- parentIDBuffer.append("|");
- }
- //得到所有的parentcategoryId列表
- StringparentIDString=parentIDBuffer.toString();
- System.out.println(parentIDString);//测试|1|2|3|4|5|6|7|8|
- rs=st.executeQuery(SQLString);//第一次传进来的parentID是0
- treeNodeArray=newArrayList<JSONTreeNode>();
- while(rs.next()){
- JSONTreeNodetreeNode=newJSONTreeNode();
- StringcategoryId=rs.getString("categoryId");
- treeNode.setId(categoryId);
- treeNode.setText(rs.getString("categoryName"));
- treeNode.setDescription(rs.getString("description"));
- //treeNode.setHref("rightframe.jsp?categoryId="
- //+rs.getString("categoryId").toString());
- //treeNode.setHrefTarget("rightFrame");
- System.out.println(parentIDString.indexOf("|"+categoryId+"|"));//测试
- if(parentIDString.indexOf("|"+categoryId+"|")>=0)//父节点如果大于0说它在父节点中存在
- {
- treeNode.setCls("folder");
- treeNode.setLeaf(false);
- treeNode.setExpandable(false);
- }else//子节点
- {
- treeNode.setCls("file");
- treeNode.setLeaf(true);
- treeNode.setExpandable(false);
- }
- treeNodeArray.add(treeNode);
- }
- JSONArrayJsonArray=JSONArray.fromObject(treeNodeArray);//得到JSON数组
- System.out.println("返回的数据是:"+JsonArray.toString());
- returnJsonArray.toString();//返回JSON数据
- }catch(Exceptione){
- System.out.println("getJSONString()ofJSONTree.javathrows:"
- +e.toString());
- return"";
- }finally{
- try{
- if(con!=null&&!con.isClosed()){
- con.close();
- }
- }catch(SQLExceptione){
- //TODOAuto-generatedcatchblock
- e.printStackTrace();
- }
- }
- }
- publicStringgetparentId(){
- returnparentId;
- }
- publicvoidsetparentId(StringparentId){
- this.parentId=parentId;
- }
- }
效果图:
//需要导入的json-lib 包及其他包自行下载。测试完毕。
发表评论
-
Ext常用的方法
2011-06-28 10:26 786#1 Ext.extend方法是用来实现类的继承。 子类继 ... -
ExtJs Grid详解【转载】
2010-12-09 15:45 661首先,一个表格应该有列定义,即定义表头ColumnMod ... -
Ext Js 键盘事件触发的使用
2010-12-09 22:47 2650网上例子如下: Code: varmess ... -
Ext.data.xxxStore 数据解析的简单运用
2010-12-14 17:51 1125做任何的应用程序都少不了对数据的操作。在Extjs里面 ... -
【读】Ext.data.JsonStore
2010-12-14 18:14 3695简单的JSONSTORE var data = [ ... -
extjs_css a litter puzzle
2011-04-02 09:08 844Extjs 控件样式test: 控件Ext.list.Lis ... -
extjs+db
2011-04-07 20:13 1040Extjs部分: 1.ExtJS可 ...
相关推荐
var tree = new Ext.tree.TreePanel({ title: '我的树', width: 300, height: 300, rootVisible: false, useArrows: true, loader: new Ext.tree.TreeLoader({ url: 'tree_data.json', // JSON数据文件的URL ...
示例代码中,`treePanel.html`定义了HTML结构,`treePanel.js`包含了`TreePanel`的创建和配置。`TreeLoader`的`dataUrl`属性未设置,意味着需要在其他地方动态设置加载数据的URL。 总结,`Ext.Tree.Panel`是EXT JS...
var treePanel = Ext.create('Ext.tree.Panel', { title: '动态加载树数据', width: 400, height: 300, store: Ext.create('Ext.data.TreeStore', { model: 'TreeNode', proxy: { type: 'ajax', url: 'tree_...
FileTreePanel扩展至Ext.tree.TreePanel附带基本的文件/文件夹管理功能 其它还包括文件上传,重命名
`ext.tree` 是ExtJS中的TreePanel,它允许开发者创建可交互的树形结构,通常用于展示文件系统、组织架构或层级关系的数据。TreePanel包含一系列的TreeNode,每个TreeNode可以有子节点,形成一个可折叠和展开的层次...
在描述中提到的"Ext TreePanel Checked Ext复选框树"是指`TreePanel`的一种特殊形式,它扩展了基本的树视图,加入了复选框功能。 复选框树(Checked Tree)允许用户通过复选框来选择或取消选择树结构中的节点。这种...
【标题】"ext-tree.rar_ext_ext tr_ext tre_ext.tr_ext.tree" 暗示这是一个关于Ext JS库中TreePanel组件的实例,其中可能包含了用于创建和管理数据结构的树形视图,以及与数据库交互的功能。 【描述】"ext的树的...
var tree = new Ext.tree.TreePanel({ title: '分页树', width: 400, height: 400, root: { nodeType: 'async', loader: new Ext.ux.tree.PagingTreeLoader({ url: 'your_server_side_endpoint.php', ...
在本文中,我们将深入探讨`TreePanel`和`TabPanel`这两个重要的Ext JS组件,并讨论如何将它们结合在一起,以创建功能丰富的用户界面。`TreePanel`用于展示层次结构的数据,而`TabPanel`则提供了多标签页的功能,两者...
EXT TreePanel 和 DWR(Direct Web Remoting)是两种在Web开发中常用的技术。EXT TreePanel 是EXT JS库中的一个组件,它用于展示层次结构的数据,通常以树形结构显示,广泛应用于文件系统、组织结构或者菜单的展示。...
完美的Extjs4 treePanel节点刷新,函数为自动刷新选中的节点.API看得头疼才别出来的代码.截止我发之前,好像没有谁共享这个功能的函数吧.
var tree = Ext.getCmp('treeId'); // 监听checkchange事件 tree.on('checkchange', function(node) { // 在这里处理被选中的节点 }); ``` #### 2. 使用cascade方法遍历所有节点 `cascade`方法可以遍历TreePanel...
代码如下: var tree = new Ext.tree.TreePanel({ region:’west’, title:’站点树:’, width:200, minSize:150, maxSize:200, iconCls:’ux-auth-menu-header-icon’, split:true, autoScroll:true, autoHeight:...
**2.12 Tree Panel (Ext.tree.TreePanel)** - **xtype**: `treepanel` - **功能描述**:Tree Panel 是一个树形结构的组件,可以用来展示层次结构的数据。 - **主要用途**:适用于展示目录结构或组织架构图。 **...
ExtTree是Ext JS库中的一个组件,用于创建和展示树形结构的数据。它在Web应用程序中广泛使用,特别是在需要组织和导航层次结构信息时。在本案例中,“extTree例子点击出现界面”指的是用户在浏览ExtTree时,通过点击...
这篇博客文章“Rails中应用Ext.tree:以中国的省市地区三级联动选择为例”提供了一个实用的示例,教我们如何利用Ext.js库中的Tree组件来实现这种功能。 首先,让我们了解Rails和Ext.js的基本概念。Rails是基于Ruby...
this.ct = new Ext.tree.TreePanel({ autoScroll : true, height : 250, border : false, rootVisible : false, root : new Ext.tree.AsyncTreeNode({ draggable : false, expanded : true }), loader : ...
其中Ext.tree.TreeNode代表一个树节点,比较常用的属性包括text、id、icon、checked等、异步树Ext.tree.AsyncTreeNode、树加载器Ext.tree.TreeLoader。下面介绍Extjs 中的 Treepanel 实现菜单级联选中效果。 在 ...
首先,我们创建了一个新的Ext.tree.TreePanel实例,命名为Fpanel。在配置中,`id`设为'ptree',`region`设为'west',`layout`设为'anchor',`border`设为false以隐藏边框,`rootVisible`设为false不显示根节点,而`...
EXTJS 4的树组件不再直接继承自`Ext.tree.TreePanel`,而是使用`Ext.tree.Panel`,同时引入了`Ext.data.TreeStore`作为数据存储。 在EXTJS 3.x中,创建一个树形面板的示例如下: ```javascript var tree = new Ext...