EXTJS学习系列提高篇:第九篇(转载)作者殷良胜,制作树形菜单之三

本节描述在制作的树形菜单上如何点击右键,对一个管理系统而言,这样的功能很绚,或者对一个展示系统而言也是非常新颖的做法. 在树形菜单节点上点右键后就能够弹出如下图所显示的效果,在点某个右键的具体的操作则没有提供相应的代码,主要因为按钮的触发事件较为简单.

下面先看看效果图吧

这个示例是在提高篇第七篇的基础上添加了一个触发右键菜单的一个事件.下面仅仅将页面的脚本代码贴出来,后台代码则是和提高篇第七篇完全一样,所以,本例不再重复贴出来,有兴趣的朋友可以参考提高篇第七篇.

 

<script type="text/javascript">        
    function makeTree()
    {
        var panel_west = new Ext.Panel
        ({
            id:'panWestMenu',
            region:'center',
            title:'树形菜单之右键示例',
            split:true,
            width: 200,
            collapsible: true,
            margins:'0 0 0 0',
            layout:'accordion',
            layoutConfig:{animate:true}
        });
        var viewport = new Ext.Viewport
        ({
            id:'vpMain',
            layout:'border',
            items:
            [
                panel_west
            ]
        });
        //加载左面的数据
        var loadPanelWest = function(init)
        {
             Ext.Ajax.request
             ({
                    url: 'json.aspx?Param=0',
                    success: function(response, options) 
                    {
                        try
                        {
                            var panWestMenu = Ext.getCmp("panWestMenu");
                            if(panWestMenu)
                            {
                                var children = panWestMenu.findByType('panel');
                                if(children)
                                {
                                    for(var i=0, len = children.length; i<len; i++)
                                    {
                                        panWestMenu.remove(children[i],true);
                                    }
                                }
                            }                            
                            var menusArray = Ext.util.JSON.decode(response.responseText); 
                            
                            for(var i=0; i<menusArray.length; i++)
                            {
                                var mp = CreateMenuPanel(menusArray[i].TypeTitle,menusArray[i].TypeID);
                                panWestMenu.add(mp);
                            }                            
                            panWestMenu.doLayout();
                        }
                        catch(e)
                        {
                            
                        }
                    }
                });
            };
            loadPanelWest("load");
            //创建单个treePanel
            var CreateMenuPanel = function(title,TypeID)
            {
                  return new Ext.Panel
                  ({
                      title:title,layout:'fit',border: false,frame:true,                     
                      items:
                      [{
                          xtype:'treepanel',singleExpand:true,animate:true,autoScroll:true,containerScroll: true,
                          border: false,
                          width:200,height:370,enableDD:false,dropConfig: {appendOnly:true},                          
                          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());
                                }
                          } 
                       }]
                  });
            }
    
    }
    </script>
    
    <script type="text/javascript">
    function ready()
    {
        makeTree();        
    }
    Ext.onReady(ready);
    </script>