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

源代码下载

这篇文章显示树形菜单的方式则不再采用layout:'accordion'布局方式.显示的效果就是一棵完整的树.这种效果适合菜单根级节点较多的情况下,因为如果根节点较多,再使用'accordion'布局就会导致树不能够完整显现,或者即使显示了,页面的高度还是有限的,即使出现滚动条,看起来也还是很不舒服的.具体哪种用法,只能够结合具体的项目需求.

树的显示,Ext将其封装的太简单,仅仅几行代码,效果却非同凡响.同时在这个树形菜单里面也同样实现了在节点右键出现菜单的操作.

还是让我们先看看效果图吧.

   

 

源代码下载

标签: menu, tree, TreePanel
posted @ 2008-10-28 08:43 殷良胜 阅读(3931) 评论(24) 编辑 收藏

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

 回复 引用 查看   
#2楼2008-12-10 15:29 | woaibaobao      
这里的Request["node"] 是从哪来的啊??
var url = "Json2.aspx";
你这里也没传参数啊??



 回复 引用 查看   
#3楼[楼主]2008-12-10 15:44 | 殷良胜      
@woaibaobao
这是Ext的内部机制,传的node的值实际上取的是前台的 id:"0",
所以
如果你的树的根节点如果是5的话
那么在初始化时就需要在这里设置: id:"5",


 回复 引用 查看   
#4楼2008-12-10 16:49 | woaibaobao      
--引用--------------------------------------------------
殷良胜: @woaibaobao
这是Ext的内部机制,传的node的值实际上取的是前台的 id:"0",
所以
如果你的树的根节点如果是5的话
那么在初始化时就需要在这里设置: id:"5",


--------------------------------------------------------
那我直接在var url = "Json2.aspx?node=0";
可以不??

 回复 引用 查看   
#5楼[楼主]2008-12-10 16:58 | 殷良胜      
@woaibaobao
node是动态变化的一个值
对于你的想法自己可以尝试下
更好的方法我还不知道呢
所以 你将来如果有已经验证的想法 希望能够共享下

 回复 引用 查看   
#6楼2008-12-10 17:04 | woaibaobao      
刚才好像理解错误
这个Request["node"] 是不是用该获得JSON里的那个node的值呢??


 回复 引用 查看   
#7楼2008-12-11 22:54 | woaibaobao      
不行啊!做了一晚上还是没成功哦
还是没明白Request["node"] 从哪里来的

 回复 引用 查看   
#8楼2008-12-12 10:57 | woaibaobao      
郁闷了!这个Request["node"] 我跟踪了,是null啊!

能说明下这个Request["node"] 到底是什么意思吗??获取什么地方的值呢??

 回复 引用 查看   
#9楼2008-12-12 11:08 | woaibaobao      
貌似好用了!哈哈
 回复 引用 查看   
#10楼[楼主]2008-12-12 11:18 | 殷良胜      
@woaibaobao
是不是感觉到了成就感了
这就是我提倡的:自己要多尝试多调试】
然后
你距离原理也就越来越接近了

Ext涉及的组件太多了
现在只是感觉常用的组件能够使用而已
太多的内涵需要时间和耐心来把握

有空 你可以好好研究下

 回复 引用 查看   
#11楼2008-12-12 11:36 | woaibaobao      
嗯嗯!是有成绩感!呵呵

不过以后可能会经常麻烦你了!谢谢你了!

 回复 引用 查看   
#12楼2008-12-12 16:33 | woaibaobao      
那在这个tree的节点上加事件咋加啊??
想要在页面上打开一个tab

加一下午了!没加明白!呵呵!我太笨了

 回复 引用 查看   
#13楼[楼主]2008-12-12 17:07 | 殷良胜      
@woaibaobao
下周我尽量做几个高级组件想结合的例子,周末有时间的话
你先摸索下吧 呵呵

 回复 引用 查看   
#14楼2008-12-12 17:10 | woaibaobao      
@殷良胜
55555555555
摸索一下午了!

EXT真麻烦啊

 回复 引用 查看   
#15楼[楼主]2008-12-12 17:26 | 殷良胜      
@woaibaobao
好吧
那就给你点小提示吧
xtype:'treepanel',
singleExpand:true,
border: false,
loader: new Ext.tree.TreeLoader({dataUrl:"json.aspx?Param=1"}),
root:new Ext.tree.AsyncTreeNode
({
id:TypeID,
text: title,
draggable:false,
expanded:true

}),
listeners:
{
"contextMenu":
function(node,e)
{
var treeMenu = new Ext.menu.Menu
([
{xtype:"button",text:"打开",icon:"images/plugin.gif",pressed:true},
{xtype:"button",text:"添加",icon:"images/plugin.gif",pressed:true},
{xtype:"button",text:"编辑",icon:"images/plugin.gif",pressed:true},
{xtype:"button",text:"隐藏",icon:"images/plugin.gif",pressed:true},
{xtype:"button",text:"删除",icon:"images/plugin.gif",pressed:true}

]);
treeMenu.showAt(e.getPoint());
}
}
}]

 回复 引用   
#16楼2009-05-12 14:21 | 雷lei[未注册用户]
请问您的ie用是6还是7啊,我在7下面,这个右键菜单的图标会乱了啊,请问您知道是咋回事嘛?
 回复 引用   
#17楼2009-05-18 14:22 | 雷lei [未注册用户]
期待您的回复啊,谢谢
 回复 引用 查看   
#18楼[楼主]2009-05-18 23:02 | 殷良胜      
--引用--------------------------------------------------
雷lei: 请问您的ie用是6还是7啊,我在7下面,这个右键菜单的图标会乱了啊,请问您知道是咋回事嘛?
--------------------------------------------------------
这个问题 我都有测试过 没有问题
不过建议你将文件另存为unicode(UTF-8 带签名)- 代码页 65001格式

 回复 引用   
#19楼2009-05-19 11:39 | 刘liu[未注册用户]
我现在用的是这个 可是一但那树超出了那panel的范围 它还是出去了 并没有想象的那样出现一个滚动条 这怎么设置啊
 回复 引用 查看   
#20楼[楼主]2009-05-19 13:21 | 殷良胜      
--引用--------------------------------------------------
刘liu: 我现在用的是这个 可是一但那树超出了那panel的范围 它还是出去了 并没有想象的那样出现一个滚动条 这怎么设置啊
--------------------------------------------------------
设置panelTree的属性 autoScroll为true 测试下 还不行就设置tree的这个属性

 回复 引用   
#21楼2009-05-20 08:50 | 刘liu[未注册用户]
--引用--------------------------------------------------
刘liu: 我现在用的是这个 可是一但那树超出了那panel的范围 它还是出去了 并没有想象的那样出现一个滚动条 这怎么设置啊
--------------------------------------------------------
设置panelTree的属性 autoScroll为true 测试下 还不行就设置tree的这个属性
可以了 谢谢胜哥了啊 我现在又有一个问题 当我添加一行的时候要怎样才让它自动添加到后面去啊
enableToggle: true,
text: '添加一行',
cls: 'x-btn-text-icon details',icon:"images/plugin.gif",
toggleHandler: function(btn, pressed)
{
/////////////////////////////////
var Record=Ext.data.Record.create([
{name:'ID',type:'int'},
{name:'TypeCName',type:'string'},
{name:'TypeEName',type:'string'},
{name:'DelFlag',type:'int'},
{name:'AddDate',type:'DateTime'},
{name:'Sex',type:'int'},
]);
var initValue={ID:'',TypeCName:'',TypeEName:'',DelFlag:'',AddDate:'',Sex:''};
var p=new Record(initValue);
grid.stopEditing();
store.insert(0,p);
grid.startEditing(0,0);
p.dirty=true;
p.modified=initValue;
if(store.modified.indexOf(p)==-1)
{
store.modified.push(p);
}
还要删除一行为什么报错呢 说找不到这个getSelectedCell方法 麻烦胜哥给我看下 谢谢
enableToggle: true,
text: '删除一行',
cls: 'x-btn-text-icon details',icon:"images/plugin.gif",
toggleHandler: function(btn, pressed)
{
Ext.Msg.confirm('信息','确定要删除吗?',function(btn)
{
if(btn == 'yes')
{
var smm=grid.getSelectionModel();
var cell=smm.getSelectedCell();
var record=store.getAt(cell[0]);
store.remove(record);
}
})

 回复 引用   
#22楼2009-05-20 09:19 | 刘liu[未注册用户]
期待您的回复
 回复 引用 查看   
#23楼[楼主]2009-10-24 09:23 | 殷良胜      
@刘liu
不好意思 让你等那么久
已经有源代码可以下载了

 回复 引用 查看   
#24楼2011-02-27 23:43 | ghd2004      
非常好。学习,感谢