源代码下载
这篇文章显示树形菜单的方式则不再采用layout:'accordion'布局方式.显示的效果就是一棵完整的树.这种效果适合菜单根级节点较多的情况下,因为如果根节点较多,再使用'accordion'布局就会导致树不能够完整显现,或者即使显示了,页面的高度还是有限的,即使出现滚动条,看起来也还是很不舒服的.具体哪种用法,只能够结合具体的项目需求.
树的显示,Ext将其封装的太简单,仅仅几行代码,效果却非同凡响.同时在这个树形菜单里面也同样实现了在节点右键出现菜单的操作.
还是让我们先看看效果图吧.
源代码下载
posted @ 2008-10-28 08:43
殷良胜 阅读(3931)
评论(24) 编辑 收藏
发表评论
这里的Request["node"] 是从哪来的啊？？
var url = "Json2.aspx";
你这里也没传参数啊？？
@woaibaobao
这是Ext的内部机制，传的node的值实际上取的是前台的 id:"0",
所以
如果你的树的根节点如果是5的话
那么在初始化时就需要在这里设置： id:"5",
--引用--------------------------------------------------
殷良胜: @woaibaobao
这是Ext的内部机制，传的node的值实际上取的是前台的 id:"0",
所以
如果你的树的根节点如果是5的话
那么在初始化时就需要在这里设置： id:"5",
--------------------------------------------------------
那我直接在var url = "Json2.aspx?node=0";
可以不？？
@woaibaobao
node是动态变化的一个值
对于你的想法自己可以尝试下
更好的方法我还不知道呢
所以 你将来如果有已经验证的想法 希望能够共享下
刚才好像理解错误
这个Request["node"] 是不是用该获得JSON里的那个node的值呢？？
不行啊！做了一晚上还是没成功哦
还是没明白Request["node"] 从哪里来的
郁闷了！这个Request["node"] 我跟踪了，是null啊！
能说明下这个Request["node"] 到底是什么意思吗？？获取什么地方的值呢？？
@woaibaobao
是不是感觉到了成就感了
这就是我提倡的：自己要多尝试多调试】
然后
你距离原理也就越来越接近了
Ext涉及的组件太多了
现在只是感觉常用的组件能够使用而已
太多的内涵需要时间和耐心来把握
有空 你可以好好研究下
嗯嗯！是有成绩感！呵呵
不过以后可能会经常麻烦你了！谢谢你了！
那在这个tree的节点上加事件咋加啊？？
想要在页面上打开一个tab
加一下午了！没加明白！呵呵！我太笨了
@woaibaobao
下周我尽量做几个高级组件想结合的例子，周末有时间的话
你先摸索下吧 呵呵
@殷良胜
55555555555
摸索一下午了！
EXT真麻烦啊
@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());
}
}
}]
请问您的ie用是6还是7啊，我在7下面，这个右键菜单的图标会乱了啊，请问您知道是咋回事嘛？
--引用--------------------------------------------------
雷lei: 请问您的ie用是6还是7啊，我在7下面，这个右键菜单的图标会乱了啊，请问您知道是咋回事嘛？
--------------------------------------------------------
这个问题 我都有测试过 没有问题
不过建议你将文件另存为unicode(UTF-8 带签名）- 代码页 65001格式
我现在用的是这个 可是一但那树超出了那panel的范围 它还是出去了 并没有想象的那样出现一个滚动条 这怎么设置啊
--引用--------------------------------------------------
刘liu: 我现在用的是这个 可是一但那树超出了那panel的范围 它还是出去了 并没有想象的那样出现一个滚动条 这怎么设置啊
--------------------------------------------------------
设置panelTree的属性 autoScroll为true 测试下 还不行就设置tree的这个属性
--引用--------------------------------------------------
刘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);
}
})
@刘liu
不好意思 让你等那么久
已经有源代码可以下载了