Ext treepanel tabpanel 结合问题

Question

    现在从menu.json文件中读取菜单，点击左侧的树形菜单，右侧该如何动态加载相关模块的信息？  请各位指教 谢谢~

 

 

    menu.json:

 

{
"code":"11",
"name":"信息维护",
"href":"",
"iconCls":"information",
"parentcode":""
},{
"code":"1101",
"name":"机构维护",
"href":"agency",
"iconCls":"building",
"parentcode":"11"
},{
"code":"110101",
"name":"三级菜单",
"parentcode":"1101"
}

AccordinTreePanel.js代码

 

Ext.ns("QM.ui");

QM.ui.MenuPanel = Ext.extend(Ext.Panel, {
    /**
     * @cfg(url) 发送请求的地址
     */
    /**
     * @cfg(root) json数组的根字符串
     */
    constructor: function(config){
        QM.ui.MenuPanel.superclass.constructor.call(this, Ext.apply({ 
            maxSize: 240,
            minSize: 210,
         //   collapseMode: 'mini',
            collapsible : true, 
          //  animCollapse: false,
            id: 'menuPanel',
            width: 210,
            header: true,
            split: true,
            layout: 'accordion',
            layoutConfig : {
                // 展开折叠是否有动画效果
                animate : true
            },
            region: 'west',           
            autoScroll: true,
            margins:'0 0 0 5',
            cmargins: '0 0 0 0',
            ref: 'menuPanel'
            
        }, config || {}));
    },
    initComponent: function(){
        QM.ui.MenuPanel.superclass.initComponent.call(this);
        this.addEvents(        /**
         * @event itemclick  树结点被点击时触发  参数：node 当前结点对象，record 当前结点对应record对象
         */
        'click',        /**
         * @event afterload 菜单项加载完毕后触发
         */
        'afterload');
        if (!this.store) {
            this.store = new Ext.data.JsonStore({
                url: this.url,
                root: this.root,
                fields: ['code', 'name', 'parentcode', 'iconCls', 'href']
            });
        }
        this.store.load({
            callback: this.loadTrees,
            scope: this
        });
    },
    loadTrees: function(records, o, s){
        var pnodes, trees = [], tree;
        this.store.sort('code');
        for (var i = 0; i < records.length; i++) {
            var record = records[i];
            if (!record.get('parentcode')) {
                tree = this.creatTreeConfig(record);
                trees.push(tree);
                pnodes = [];
                pnodes.push(tree.root);
            }
            else {
                var next_record = records[i + 1];
                var isLeaf = !next_record || next_record.get('parentcode') != record.get('code');
                this.addTreeNode(pnodes, record, isLeaf);
            }
        }
        Ext.each(trees, function(tree){
            this.add(tree);
        }, this);
        this.mon(this.el, 'click', this.onClick, this);
        this.doLayout();
        this.store.destroy();
        this.fireEvent('afterload', this);
    },
    //@public 根据结点id找到结点对象
    getNodeById: function(id){
        var node, trees = this.findByType('treepanel', true);
        Ext.each(trees, function(tree){
            node = tree.getNodeById(id);
            return !node;//找到的话返回false
        });
        return node;
    },
    onClick: function(e, t, o){
        if (Ext.fly(t).hasClass('x-tree-ec-icon')) {//点击伸展按钮时无视
            return;
        }
        var el, id, node;
        if (el = e.getTarget('.x-tree-node-el', 3, true)) {
            e.stopEvent();
            id = el.getAttributeNS('ext', 'tree-node-id');
            node = this.getNodeById(id);
            var workPanel = this.ownerCt.workPanel;
            workPanel.showTab(node);
            this.fireEvent('click', this, node);
        }
    },
    creatTreeConfig: function(record){
        var config = {
            xtype: 'treepanel',
            autoScroll: true,
            rootVisible: false,
          //  useArrows:true,  Vista-style的箭头
            lines: true,
            title: record.get('name'),
            iconCls: record.get('iconCls'),
            border:false,
            root: {
                nodeType: 'async',
                expanded: true,
                id: record.get('code'),
                children: []
            },
            listeners: {
                'deactivate': function(tree){
                    tree.getSelectionModel().clearSelections(true);
                }
            }
        };
        return config;
    },
    addTreeNode: function(pnodes, record, isLeaf){
        var len = pnodes.length;
        for (var i = len - 1; i >= 0; i--) {
            if (pnodes[i].id != record.get('parentcode')) {
                pnodes.pop();
            }
            else {
                var parent = pnodes[i].children;
                var node = {
                    text: record.get('name'),
                    id: record.get('code'),
                    iconCls: record.get('iconCls'),
                    href: record.get('href'),
                    leaf: isLeaf
                };
                if (!isLeaf) {
                    node.children = [];
                    pnodes.push(node);
                }
                parent.push(node);
                return;
            }
        }
    },
    
    //@public根据node对象/id显示结点所在tree并选中
    selectNode: function(node){
        var tree;
        if (Ext.isString(node)) {
            node = this.getNodeById(node);
        }
        tree = node.getOwnerTree();
        this.getLayout().setActiveItem(tree.getId());
        tree.expandPath(node.getPath());
        tree.getSelectionModel().select(node);
    }
});


//showTab用于显示子组件，loadChild用于子组件的加载
QM.ui.WorkPanel = Ext.extend(Ext.TabPanel, {
    ref: 'workPanel',
    region: 'center',
    resizeTabs: true,
    minTabWidth: 135,
    tabWidth: 135,
    plugins: new Ext.ux.TabCloseMenu(),
    enableTabScroll: true,
    activeTab: 0,
    beforeInit: Ext.emptyFn,
    loadChild: Ext.emptyFn,
    initComponent: function(){
        QM.ui.WorkPanel.superclass.initComponent.call(this);
        this.on('tabchange', this.onChange);
    },
    onChange: function(tp, tab){
        var menuPanel = this.ownerCt.menuPanel;
        var tree;
        if (tab.itemId) {
            menuPanel.selectNode(tab.itemId);
        }
        else //选择主页时清空当前树的选择项
             if (tree = menuPanel.getLayout().activeItem) {
                tree.getSelectionModel().clearSelections(true);
            }
    },
    //@public根据node或id显示对象panel没有的话创建
    showTab: function(node){
        var menuPanel = this.ownerCt.menuPanel;//找到菜单面板
        if (Ext.isString(node)) {
            node = menuPanel.getNodeById(node);
            if (!node) {
                return;
            }
        }
        var tab, attrs = node.attributes;
        //只有没有下级的才能显示在右侧  
        if(attrs.leaf){
          if (!this.getItem(attrs.id)) {
            tab = this.add({
                itemId: attrs.id,
                title: attrs.text,
                iconCls: attrs.iconCls,
                closable: true,
                layout: 'fit'
            })
            var child = this.loadChild(tab, node);
            tab.add(child || {});
            this.doLayout();
         }
        this.setActiveTab(attrs.id);
        }
    }
})

login.jsp 页面

 

 

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>web管理登录</title>
  <!-- 自定义Css样式 -->
  <link href="<%=request.getContextPath() %>/mycss/houfei-loading.css" rel="stylesheet" type="text/css" />
  <link href="<%=request.getContextPath() %>/mycss/houfei-icon.css" rel="stylesheet" type="text/css" />
 <link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/css/CssStyle.css"/>
   <link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/css/themes.css"/>
  <!-- Ext 所需的Js和 Css 文件 -->
  <link href="<%=request.getContextPath() %>/ext-3.2.1/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="<%=request.getContextPath() %>/ext-3.2.1/ext-base.js"></script>
  <script type="text/javascript" src="<%=request.getContextPath() %>/ext-3.2.1/ext-all.js"></script>
  <script type="text/javascript" src="<%=request.getContextPath() %>/ext-3.2.1/ext-lang-zh_CN.js" charset="utf-8"></script>
  <script type="text/javascript" src="<%=request.getContextPath() %>/js/TabCloseMenu.js"></script>
  <script type="text/javascript" src="<%=request.getContextPath() %>/js/FileUploadField.js"></script>
  <!--  自定义工具类 -->
  <script type="text/javascript" src="<%=request.getContextPath() %>/js/GridPanelUtils.js"></script>
  <!-- 主页 -->
  <script type="text/javascript" src="<%=request.getContextPath() %>/myjs/AccordinTreePanel.js" charset="utf-8"></script>
  <!-- 各分模块 -->
 <!-- 用户角色 -->
 <script type="text/javascript" src="<%=request.getContextPath() %>/myjs/userrole/AddUserRoleWindow.js" charset="utf-8"></script>
 <script type="text/javascript" src="<%=request.getContextPath() %>/myjs/userrole/EditUserRoleWindow.js" charset="utf-8"></script>
 <script type="text/javascript" src="<%=request.getContextPath() %>/myjs/userrole/UserRoleForm.js.js" charset="utf-8"></script>
  <script type="text/javascript" src="<%=request.getContextPath() %>/myjs/userrole/UserRoleGridPanel.js" charset="utf-8"></script>
 <!-- 主程序 -->
  <script type="text/javascript">
            Ext.ns('App');
            //菜单面板
            App.MenuPanel = QM.ui.MenuPanel.extend({
                root: 'menus',
                ref: 'menuPanel',
                url: '/sdcdmp_czfs/myjs/menu.json',
                title:'导航菜单',
                iconCls:'houfei-icon-plugin',
              //  tbar:[{}],
                listeners: {
                    'click': Ext.emptyFn
                }
            });
            
            //工作区面板
            App.WorkPanel = QM.ui.WorkPanel.extend({
                constructor: function(config){
                    config = config || {};
                    Ext.applyIf(config, {
                        items: [{
                            title: '首页',
                            iconCls:'houfei-homeTabIcon',
                            html: '工作平台'
                        }]
                    })
                    App.WorkPanel.superclass.constructor.call(this, config);
                },
                //tab：子组件 node：树节点 返回待添加组件
                loadChild: function(tab, node){
                        var attrs=node.attributes;
                       // alert("加载子组件:"+tab.itemId+"==="+attrs.id+"href:"+attrs.href);
                }
            });
            //负责直连工作区
            App.afterLoad = function(viewport){
                var qstr = window.location.href.split('?')[1];
                if (qstr) {
                    var ps = Ext.urlDecode(qstr);
                    var code = ps['code'];
                    viewport.menuPanel.on('afterload', function(){
                        viewport.workPanel.showTab(code);
                        viewport.doLayout();
                    }, null, {
                        single: true
                    });
                }
            }
            
            Ext.onReady(function(){
                Ext.QuickTips.init();
                Ext.BLANK_IMAGE_URL = '/sdcdmp_czfs/ext-3.2.1/resources/images/default/tree/s.gif';
             //   ThemeManager.init('header');
                var menupanel = new App.MenuPanel();
                var workpanel = new App.WorkPanel();
                var view = new Ext.Viewport({
                    layout: 'border',
                    items: [{
                        cls: 'docs-header',
                        height: 30,
                        region: 'north',
                        xtype: 'box',
                        el: 'header',
                        border: false
                    }, {
                        region: 'south',
                        xtype: 'box',
                        el: 'bottom'
                    }, menupanel, workpanel]
                });
              
                App.afterLoad(view);
            });
        </script>
</head>
 
<body>
    <div id="header">
            <div class="api-title">
                      web管理
            </div>
        </div>
        <div id="bottom">
        </div>
</body>
</html>

 

 

 

 

 

 

Answer 1

看看别人是怎样解决的
[url]http://rainytooo.iteye.com/blog/617765[/url]