【原】提高篇:第七篇,制作树形菜单之一

源代码下载

制作树形菜单的原理是:首先连接数据库,将数据按照树的结构形式返回,在客户端遍历数据时,将每条记录生成一个treepanel,然后在每个treepanel都包含在一个Panel组件里面,最后在将每个Panel组件都添加到一个上级Panel组件里面,最后在将这个上级Panel添加到Viewport里面.这里用到三个Ext组件,分别是:Viewport ; Panel ; TreePanel.

这里先简单介绍下这三个组件:

1,Panel 是Ext控件的基础,它可以用来创建非常漂亮的界面,是一个功能强大,使用却非常简单的容器组件.像面板的展开与关闭功能就非常不错.

2,TreePanel,看名字就知道树的组件就是继承自Panel 组件,在以前如果要在客户端实现一个树是很麻烦的,要处理样式,写很多的脚本,并且还要考虑Ajax.但是现在就方便多了,你要做的就是设置几个属性而已,唯一要注意的是,在显示一棵树时,必须为它指定一个根节点,不过,这更简单.

3,Viewport 代表整个浏览器的显示区域,并会随着显示区域的大小而自动改变,一个页面有且只能够有一个Viewport .

下面在将代码复制出来之前,先看看效果图,因为效果图很精美,能够增加你的胃口:

按顺序将效果图依次展开,包括面板关闭,面板展开,树菜单展开,树菜单依次展开等

 

    

 源代码下载 

posted @ 2008-10-27 16:15 殷良胜 阅读(8435) 评论(53) 编辑 收藏

　回复　引用　查看　  
#1楼[楼主]2008-10-30 13:04 | 殷良胜      
欢迎访问Ext小组:
http://space.cnblogs.com/group/ext

　回复　引用　  
#2楼2008-11-25 11:02 | david weil1[未注册用户]
非常感谢楼主的帮助
　回复　引用　  
#3楼2008-12-03 21:25 | 不落传说[未注册用户]
您好，能不能麻烦你把这个EXT系列的示例数据库发一份，总是搞不清楚树形控件的父子节点的设置，加载的树父子节点都并列的显示，实在搞不清是什么原因，能不能麻烦您发个数据库备份？
junelee1211@qq.com
不胜感激！
　回复　引用　查看　  
#4楼[楼主]2008-12-04 08:46 | 殷良胜      
@不落传说
以前没有想到这方面
谢谢你的提醒
现在已经将数据库提供下载
详情请查看 本博客示例相关下载区
　回复　引用　查看　  
#5楼2008-12-04 13:20 | woaibaobao      
也能把能把这段带数据库的一起发来一份呢！
10940215@163.com
　回复　引用　查看　  
#6楼[楼主]2008-12-04 14:51 | 殷良胜      
@woaibaobao
老弟
要勤动手哦
后台组件也提供下载了
只要自己新建一个项目
该复制的就复制下
如果 把整个源代码都给你
即使你可以浏览效果了
那还有什么欣喜和成就感呢
你说呢
　回复　引用　查看　  
#7楼2008-12-11 13:58 | jasonoiu      
LZ，这个例子中的Newtonsoft.Json命名空间从哪来的，没交待啊？？？

DataBusiness这个也是没说明清楚从哪来的，能不能说清楚点？？？
　回复　引用　查看　  
#8楼2008-12-11 14:00 | jasonoiu      
LZ，我对EXT以前可是一点不知道啊，多亏有了你的基础篇和提高篇，我是一路看过来，收获非常多，能告诉我你的邮箱或者是MSN吗，有时间多向你请教！！！


我的MSN是jasonoiu@live.cn
邮箱vsajax@gmail.com
　回复　引用　查看　  
#9楼[楼主]2008-12-12 08:40 | 殷良胜      
hehe
我的MSN是yinliangsheng8mchina@hotmail.com
邮箱yinliangsheng8mchina@hotmail.com
　回复　引用　查看　  
#10楼[楼主]2008-12-12 08:41 | 殷良胜      
@jasonoiu
查看首页的下载区域吧
　回复　引用　查看　  
#11楼2009-03-11 13:45 | 展翅翱翔      
兄弟 我按照你的代码做的，怎么连接不到数据库啊？？ 树节点读不出来啊 ？？ 不知道怎么回事？
谢谢指教！
　回复　引用　查看　  
#12楼[楼主]2009-03-15 09:33 | 殷良胜      
@展翅翱翔
呵呵
请问更改你本地的数据库连接地址了吗？
我已经提供源代码下载，请留意。

　回复　引用　查看　  
#13楼2009-03-17 16:34 | 展翅翱翔      
兄弟 数据现在读出来了！可是读出来的树结构不是我想要的那种！ 郁闷中！
希望老兄给留个QQ好吗 ？ 有时间交流一下！ 加我的QQ还可以：253786232 谢谢了老兄！
　回复　引用　查看　  
#14楼[楼主]2009-03-17 23:01 | 殷良胜      
--引用--------------------------------------------------
展翅翱翔: 兄弟 数据现在读出来了！可是读出来的树结构不是我想要的那种！ 郁闷中！
希望老兄给留个QQ好吗 ？ 有时间交流一下！ 加我的QQ还可以：253786232 谢谢了老兄！
--------------------------------------------------------
呵呵
很抱歉 我没有qq 你有msn吗？
　回复　引用　查看　  
#15楼2009-03-25 14:12 | 展翅翱翔      
我的 MSN：bj2008_zhoubo@hotmail.com 谢谢兄弟
　回复　引用　查看　  
#16楼[楼主]2009-03-26 09:56 | 殷良胜      
--引用--------------------------------------------------
展翅翱翔: 我的 MSN：bj2008_zhoubo@hotmail.com 谢谢兄弟
--------------------------------------------------------
好，过几天装msn后 我加你
　回复　引用　  
#17楼2009-03-29 23:26 | hushawn[未注册用户]
您好！

调试了您的代码，出现了问题，请帮忙
1。树每个节点左边的图标没出来，有一点点，没完整
2。我把您的树当作左边导航，加了伸缩属性，就是左边可以伸缩了，当我点了缩到左边后，那展开按钮就没了，导致我不能展开，我调试了下，我把您文章里的panWestMenu.add(mp); 这句注释掉就没问题。但是菜单树就出不来了
3。另外有个我自己在尝试的时候碰到了一个问题，就是屏幕中间部门是tabpanel，点左边菜单中间部分动态 添加TAB，问题是当打开第一个TAB或关闭最后一个TAB的时候中间部分会撑到底部去，把south部分都遮掉掉，有时候是往上缩，但是我把真个IE改变大小后又正常，就是双击IE标题拦。
请帮忙看看这几个问题，我是刚研究EXT，万分感激
　回复　引用　查看　  
#18楼[楼主]2009-04-11 09:44 | 殷良胜      
--引用--------------------------------------------------
hushawn: 您好！

调试了您的代码，出现了问题，请帮忙
1。树每个节点左边的图标没出来，有一点点，没完整
2。我把您的树当作左边导航，加了伸缩属性，就是左边可以伸缩了，当我点了缩到左边后，那展开按钮就没了，导致我不能展开，我调试了下，我把您文章里的panWestMenu.add(mp); 这句注释掉就没问题。但是菜单树就出不来了
3。另外有个我自己在尝试的时候碰到了一个问题，就是屏幕中间部门是tabpanel，点左边菜单中间部分动态 添加TAB，问题是当打开第一个TAB或关闭最后一个TAB的时候中间部分会撑到底部去，把south部分都遮掉掉，有时候是往上缩，但是我把真个IE改变大小后又正常，就是双击IE标题拦。
请帮忙看看这几个问题，我是刚研究EXT，万分感激
--------------------------------------------------------
你好
【原】综合提高篇--有源代码下载 可以参考本例
http://www.cnblogs.com/mogen_yin/archive/2009/04/11/1433516.html
　回复　引用　  
#19楼2009-05-13 14:30 | 刘liu[未注册用户]
怎么就一个面板 什么都没有呢
　回复　引用　  
#20楼2009-05-26 15:23 | hiee23[未注册用户]
楼上。我跟你一样呢。！！
源码不够完整啊。最好源码能下载完。就能打开项目运行。
　回复　引用　查看　  
#21楼[楼主]2009-05-26 18:00 | 殷良胜      
--引用--------------------------------------------------
hiee23: 楼上。我跟你一样呢。！！
源码不够完整啊。最好源码能下载完。就能打开项目运行。
--------------------------------------------------------
恩 以后尽量完整点 只因空间很有限 共用的代码只好分开了 下次尽量放在一起
　回复　引用　  
#22楼2009-06-01 16:54 | lrxin[未注册用户]
能否给点TypeTable表中的数据
如你图中那样,列出一到两个上panel
　回复　引用　查看　  
#23楼[楼主]2009-06-01 17:28 | 殷良胜      
--引用--------------------------------------------------
lrxin: 能否给点TypeTable表中的数据
如你图中那样,列出一到两个上panel
--------------------------------------------------------
下载中心有数据库呀
　回复　引用　查看　  
#24楼2009-09-20 20:06 | vice      
问下楼主，Request["node"]这个值是从哪里来的呢？遍历的这个过程中值到JSON,request到response中整个数据的传递过程，能给说说么？我的概念比较模糊哦...谢谢楼主啦，~
　回复　引用　  
#25楼2009-10-22 16:57 | padad[未注册用户]
请问你的后台代码中using Ext;是怎么来的,是在哪引用的，我的电脑说找不到类型或命名空间名称“Ext”。在前台可以用Ext,但在后台是用不了的，请帮帮我，谢谢
　回复　引用　查看　  
#26楼[楼主]2009-10-23 09:28 | 殷良胜      
@padad
namespace Ext
{
// 摘要:
// Class that represents an ExtJs TreeNode
[Serializable]
public class TreeNode
-----------------------------------
using Ext是怎么来的现在知道了吗 呵呵
　回复　引用　  
#27楼2009-10-23 15:27 | padad[未注册用户]
呵呵，搞清楚了。其实如果搂主using的时候不用Ext,而是用Model我马上就能明白。结果用Ext后我跑去Ext目录里找了半天dll文件。哈哈哈哈.还有个问题，我把搂住后台代码改成了petshop4的框架，现在有个问题，当前台请求param=0和param=1的时候分别请求了什么查询，搂住能不能提供给我你得代码阿，以及数据库。你现在页面上的下载不了,谢谢 fx6800ultra@hotmail.com
　回复　引用　查看　  
#28楼[楼主]2009-10-24 08:24 | 殷良胜      
@padad
呵呵 现在有源代码可以下载了
　回复　引用　查看　  
#29楼[楼主]2009-10-24 08:42 | 殷良胜      
@padad
param=0和param=1
分别是用来表示获取根节点和子节点
在以前的代码里 是为了表达清晰 才这样做 现在已经对源代码做了改动
　回复　引用　  
#30楼2009-10-24 16:35 | padad[未注册用户]
源码里还是没有数据库阿，另外那个传说中的下载区域在那里，我真是找遍了也没发现
　回复　引用　查看　  
#31楼[楼主]2009-10-25 00:20 | 殷良胜      
@padad

打开首页--》Ext2.2系列(50篇) --》？？？


　回复　引用　  
#32楼2009-10-26 12:03 | padad[未注册用户]
楼主提供的新代码调试不出来，我给改了一下:
一开始定义了反型mainTyprList后，把后面的属性MainTypeList改成void方法，把里面的get去掉，然后再pageload了加入这个方法.就可以了
　回复　引用　查看　  
#33楼[楼主]2009-10-26 14:47 | 殷良胜      
@padad
其实，代码真的很简单了，你竟然还是调试不好，我还能够说什么呢？有没有问问自己身边的同事呢？
　回复　引用　  
#34楼2009-10-26 18:09 | 刘liu[未注册用户]
引用殷良胜：
@padad
其实，代码真的很简单了，你竟然还是调试不好，我还能够说什么呢？有没有问问自己身边的同事呢？

不好意思，你的代码的确不对
　回复　引用　查看　  
#35楼[楼主]2009-10-26 18:29 | 殷良胜      
@刘liu
呵呵 开发环境2008sp1+sql2005+ext3.0 他说：不能够调试，我立刻下载下来，执行后发现可以；现在你说我的代码也不对，我又立刻下载，但还是能够执行，我还能够说什么呢？
不过有两点需要认真对待：
1，下载区域有两个数据库，你们正确选择了下面那个？；
2，下面是我的博客后台管理的截图

这个截图清楚的显示本例源代码的上传日期，这个日期无法更改，现在就请你们查看下自己下载的源代码的日期吧,如果在这之前下载的，那么你们说的都对，有部分代码确实有问题，现在这个是修改后的代码。
　回复　引用　查看　  
#36楼2010-01-11 15:52 | 鱼の腩      
你好，在这一系列的示例中用到了Newtonsoft.Json这个命名空间，但是在生成json数据的时候，Newtonsoft.Json.dll版本是不一样的，而且大小明显的不同，反编译之后看到函数名称也有所改变，我不知道JsonConvert.SerializeObject与JavaScriptConvert.SerializeObject之间的区别是什么，他们都是Json.net里面的函数么，是不是因为版本的不同呢，我不是很了解，能不能介绍一些这方面的资料，谢谢。
　回复　引用　查看　  
#37楼2010-01-19 16:42 | mysun      
您好，我 在ajax的default文件中的GetSubMainTypeList方法中加了一个node.href = "http://www.baidu.com";
为什么不是在主框架中打开的，这个应该怎么改，谢谢！
　回复　引用　查看　  
#38楼2010-04-21 11:32 | 石钟涛声      
您好，怎么这个源码不能下载啊？
　回复　引用　查看　  
#39楼2010-05-04 17:56 | Oh,Yeah      
老师你好,
代码无法下载.
我的邮箱pjoy4@163.com
谢谢老师赐教..万分感谢了
　回复　引用　查看　  
#40楼2010-05-12 11:43 | Orichi      
老师，你好，我想知道在左边node中点击打开一个新页面，或者我想在tap中加入自定义的控件。如文本输入框。应该如何设置呢？谢谢。

　回复　引用　查看　  
#41楼2010-06-06 09:02 | mysun      
您好，您这目录有问题，根结点 采购信息 都已经是一级了，为什么在子节点中还要加载一次呢
　回复　引用　查看　  
#42楼2010-08-27 11:07 | popzhou      
源代码不能下载啊，，，
　回复　引用　查看　  
#43楼2010-08-27 15:07 | popzhou      
代码无法下载.
我的邮箱popzhou@gmail.com
谢谢赐教..万分感谢了
　回复　引用　查看　  
#44楼2010-10-28 18:38 | 什么鸟不会老      
源码下载不了了！！谢谢老师发到我的邮箱里
万分感谢，你这一系列教程对我帮助很大，grid和combobox都已经学习完毕了，就差tree了，谢谢老师！！！！
qq邮箱：595217764@qq.com


　回复　引用　查看　  
#45楼2010-11-05 19:11 | geng_0328      
源码下载不了了，能不能给我发下邮箱啊，我现在很需要这个，
邮箱：gengjingjuan@126.com
　回复　引用　查看　  
#46楼2010-11-09 13:54 | sashuanghanfeng      
源码无法下载，希望老师能够发到我的邮箱》不胜感激，786277510@qq.com
　回复　引用　查看　  
#47楼2010-11-13 19:50 | jacky_lz      
链接是失效了，我也想索求一份，谢谢~
8462990@qq.com
　回复　引用　查看　  
#48楼2010-11-22 11:22 | o上善若水o      
链接失效了，king881107@gmail.com 谢谢老师了
　回复　引用　查看　  
#49楼2011-03-25 11:41 | andytu      
下载的代码不能用啊打不开。tu_tlj@chinasnto.com
　回复　引用　查看　  
#50楼2011-05-31 14:33 | 沉舟      
楼主，这篇文章没有示例代码，源代码也不能下载，能否发一份给我
hw1200@yeah.net
　回复　引用　查看　  
#51楼2011-06-25 12:09 | shuiwuhen      
楼主你好，下载这篇实例代码时说资源不存在，能否发一份给我
353032663@qq.com 谢谢……
　回复　引用　查看　  
#52楼2011-06-28 17:46 | splinter_2      
lz您好，链接已经失效了，能否发给我一份源代码？？不胜感激
xiecg2000@hotmail.com
　回复　引用　查看　  
#53楼2011-12-28 23:21 | 早茶      
楼主您好，对于ExtJs我是一个新手，发现你这里的很多东西真的很精彩，希望你可以将有关示例代码给我发一份！不胜感激！
gdaslj@163.com,麻烦您了！谢谢。。。
最新IT新闻:
· 美国空军拟最多购买1.8万台iPad 2
· 伊朗封杀Gmail和Facebook等互联网服务
· 分析称专利之争让谷歌苹果两败俱伤
· Android平台发现新型手机病毒Rootsmart
· HTC首款Android4.0手机大曝光
» 更多新闻...