bak

最新推荐文章于 2025-05-12 01:13:43 发布

iteye_15826

最新推荐文章于 2025-05-12 01:13:43 发布

阅读量101

点赞数

分类专栏： ExtJS 文章标签： EXT JSP Chrome prototype Access

本文链接：https://blog.youkuaiyun.com/iteye_15826/article/details/81797215

版权

ExtJS 专栏收录该内容

35 篇文章

订阅专栏

本文介绍了一个使用ExtJS实现的左侧菜单栏与右侧Tab页联动的应用案例。该应用通过树形菜单来控制Tab页的内容加载，实现了不同菜单项对应不同功能页面的展示效果。此外，还详细展示了如何定制化ExtJS的TreeNode行为，以及如何为每个菜单节点添加点击事件以实现特定功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Ext.onReady(function() {
    Ext.BLANK_IMAGE_URL = 'admin/ext/resources/images/default/s.gif';
    /*
    * clear error'Permission denied to access property 'dom' from a non-chrome
    * context' method
    */
    Ext.override(Ext.Element, {
        contains : function() {
            var isXUL = Ext.isGecko ? function(node) {
                return Object.prototype.toString.call(node) == '[object XULElement]';
            }
                    : Ext.emptyFn;
            return function(el) {
                return !this.dom.firstChild || // if this Element has no
                        // children, return false
                        // immediately
                        !el || isXUL(el) ? false : Ext.lib.Dom.isAncestor(
                        this.dom, el.dom ? el.dom : el);
            };
        }()
    });

    /*
    *
    * Tree menu
    */

    var root;
    /* 單擊樹形菜單事件 */
    function loadTab(node, event) {
        // 有個問題不能判斷是否為葉節點！解決了，在節點添加屬性:leaf:true
        if (node.isLeaf()) {
            event.stopEvent();
            processTreeEvent(node);
        } else {
            event.stopEvent();
            node.toggle();
        }
    }

    function processTreeEvent(node) {
        var nodeId = node.id;
        var item = mainPanel.getItem('tab_' + nodeId);
        if (item) {
            mainPanel.setActiveTab(item);
        } else {
            loadTabContent(node);
        }
    }

    loadTabContent = function(node) {
        var tabItem = mainPanel.getItem(node.id);

        if (!tabItem) {
            tabItem = mainPanel.add({
                        title : node.text,
                        id : 'tab_' + node.id,
                        closable : true,
                        autoLoad : {
                            url : node.attributes.url,
                            scripts : true
                        }
                    });
        }
        mainPanel.setActiveTab(tabItem);
    }
    // loadTabContent = function(node, gridpanel) {
    // var tabItem = mainPanel.getItem(node.id);
    //
    // if (!tabItem) {
    // // gridpanel.url = node.url;
    // tabItem = mainPanel.add({
    // id : node.id,
    // // iconCls : icon,
    // xtype : 'panel',
    // title : node.text,
    // closable : true,
    // layout : 'fit',
    // items : [gridpanel]
    // });
    // }
    // mainPanel.setActiveTab(tabItem);
    // }

    /*--------------------------------------- system manage --------------------------------------------------------------*/

    /* 綜合管理 panel 里面的樹節點 */
    var nodeIntegrateSetter = new Ext.tree.TreeNode({
                id : 'nodeIntegrateSetter',
                text : '綜合設置',
                leaf : true,
                url : 'integrateManager.jsp'
            });
    root = new Ext.tree.TreeNode();
    root.appendChild(nodeIntegrateSetter);
    /* 綜合管理 panel */
    var panelIntegrateSetter = new Ext.tree.TreePanel({
                title : '綜合管理中心',
                frame : false,
                border : false,
                rootVisible : false,
                frame : false,
                iconCls : 'manage',
                collapsed : true,
                border : false,
                listeners : {
                    click : loadTab
                },
                root : root
            });
    this.root = null;

    /*------------------------------------------------user manage -----------------------------------------------------*/
    /* first class node panel */
    var nodeUser = new Ext.tree.TreeNode({
                text : '會員管理',
                leaf : true,
                url : 'admin/user.jsp'
            });
    var nodeUserGrade = new Ext.tree.TreeNode({
                text : '會員等級管理',
                leaf : true,
                url : 'admin/userGrade.jsp'
            });
    root = new Ext.tree.TreeNode();
    root.appendChild(nodeUser);
    root.appendChild(nodeUserGrade);

    /* first class node panel */
    var panelUserManage = new Ext.tree.TreePanel({
                title : '會員管理中心',
                rootVisible : false,
                frame : false,
                iconCls : 'user',

                border : false,
                // fill:true,
                collapsed : true,
                listeners : {
                    click : loadTab
                },
                root : root
            });

    /*-----------------------------------------------------------------------------------------------------*/

    /*------------------------------------------------product manage -----------------------------------------------------*/

    var nodeProductType = new Ext.tree.TreeNode({
                text : '商品類型管理',
                leaf : true,
                url : 'admin/productType.jsp'
            });
    var nodeProductSalesType = new Ext.tree.TreeNode({
                text : '商品銷售類型管理',
                leaf : true,
                url : 'admin/productSalesType.jsp'
            });
    var nodeFactoryType = new Ext.tree.TreeNode({
                text : '廠商類型管理',
                leaf : true,
                url : 'admin/factoryType.jsp'
            });
    root = new Ext.tree.TreeNode();
    root.appendChild(nodeProductType);
    root.appendChild(nodeProductSalesType);
    root.appendChild(nodeFactoryType);
    /* first class node panel */
    var panelProduct = new Ext.tree.TreePanel({
                title : '商品管理中心',
                rootVisible : false,
                frame : false,
                iconCls : 'user',
                border : false,
                collapsed : true,
                listeners : {
                    click : loadTab
                },
                root : root
            });

    /*-----------------------------------------------------------------------------------------------------*/

    /*
    * ViewPort Layout
    */
    new Ext.Viewport({
                layout : 'border',
                items : [{
                            region : 'north',
                            // collapsible : true,
                            // frame : true,
                            border : false,
                            bodyStyle : 'blackground-color:red',

                            height : 60
                        }, {
                            title : '功能菜單',
                            region : 'west',
                            split : true, // 间隔条
                            collapsible : true,
                            width : 180,
                            // border : false,
                            frame : false,
                            autoScroll : false,
                            layout : 'accordion',
                            layoutConfig : {
                                fill : true,
                                hideCollapseTool : false,
                                titleCollapse : true,
                                animate : true
                            },
                            items : [panelIntegrateSetter, panelUserManage,
                                    panelProduct]

                        }, {
                            id : 'mainContent',
                            region : 'center',
                            xtype : 'tabpanel',
                            activeTab : 0,
                            // frame : true,
                            autoScroll : true,
                            items : [{
                                title : '歡迎您!',
                                iconCls : 'home'
                                    // autoLoad : 'welcome.html'
                                }]
                        }]
            });

    var mainPanel = Ext.getCmp('mainContent');
});