ExtJS 4 在Ext.tab.Panel中使用Ext.ux.IFrame打開url指向的網頁

ext-4.2.1.883\examples\ux\IFrame.js

ext-4.2.1.883\examples\ux\TabCloseMenu.js

複製到

\Scripts\ext-4.2.1.883\src\ux\

 

Ext.require('Ext.ux.IFrame');
Ext.define('Web.TabPanel',
    {
        extend: 'Ext.tab.Panel',
        AddNewTab: function (title, url) {
            var tab = Ext.getCmp(url);
            if (tab) {
                this.setActiveTab(tab);
            } else {
                var p = Ext.create("Ext.ux.IFrame",
                {
                    id: url,
                    title: title,
                    padding: 10,
                    src: url,
                    loadMask: '頁面加載中...',
                    closable: true
                });
                var panel = this.add(p);
                this.setActiveTab(panel);
            }
        },
        plugins: Ext.create('Ext.ux.TabCloseMenu', {
            closeTabText: '關閉面板',
            closeOthersTabsText: '關閉其餘',
            closeAllTabsText: '關閉全部'
        })
        });

 

 var myTabPanel = Ext.create('Web.TabPanel',
    {
        activeTab: 1,
        border: 0,
        layout: 'fit',
        items: [
            {
                title: '首頁',
                border: 0,
                padding: 10,
                layout: 'fit',
                html: '<h5>Welcome!</h5>'
            }
        ]
    });

TreePanelData.json

{
  "children": [
    {
      "text": "系統設定",
      "expanded": true,
      "children": [
        {
          "text": "目錄",
          "expanded": true,
          "children": [
            {
              "text": "模板目錄",
              "leaf": true,
              "url": "Pages/Cfg/Category/Template/Default.html"
            },
            {
              "text": "套裝目錄",
              "leaf": true,
              "url": "Pages/Cfg/Category/Suit/Default.html"
            }
          ]
        },
...

 

var treeStore = Ext.create('Ext.data.TreeStore', {
        autoLoad: true,
        proxy: {
            type: 'ajax',
            url: 'TreePanelData.json',
            reader: {
                type: 'json',
                root: 'children'
            }
        },
        root: {
            nodeType: 'async',
            text: 'Ext JS',
            expanded: true
        }
    });

var treePanel = Ext.create('Ext.tree.Panel',
    {
        rootVisible: false,
        store: treeStore,
        animate: false,
        listeners: {
            itemclick: function(thisTree, record, item, index, e, options) {
                var url = record.raw.url;
                if (!url) return;
                myTabPanel.AddNewTab(record.raw.text, url);
            }
        }
    });

 

 

 

 

tabpanel 右鍵菜單：

plugins: new Ext.create('Ext.ux.TabCloseMenu',{

                                    closeTabText: '關閉面板',

                                    closeOthersTabsText: '關閉其餘',

                                    closeAllTabsText: '關閉全部'

                                })

修改【Ext.ui.TabCloseMenu】

 

修改一下方法：

onContextMenu

onClose

doClose

 

/**
 * Plugin for adding a close context menu to tabs. Note that the menu respects
 * the closable configuration on the tab. As such, commands like remove others
 * and remove all will not remove items that are not closable.
 */
Ext.define('Ext.ux.TabCloseMenu', {
    alias: 'plugin.tabclosemenu',
    mixins: {
        observable: 'Ext.util.Observable'
    },
    /**
     * @cfg {String} closeTabText
     * The text for closing the current tab.
     */
    closeTabText: 'Close Tab',
    /**
     * @cfg {Boolean} showCloseOthers
     * Indicates whether to show the 'Close Others' option.
     */
    showCloseOthers: true,
    /**
     * @cfg {String} closeOthersTabsText
     * The text for closing all tabs except the current one.
     */
    closeOthersTabsText: 'Close Other Tabs',
    /**
     * @cfg {Boolean} showCloseAll
     * Indicates whether to show the 'Close All' option.
     */
    showCloseAll: true,
    /**
     * @cfg {String} closeAllTabsText
     * The text for closing all tabs.
     */
    closeAllTabsText: 'Close All Tabs',
    /**
     * @cfg {Array} extraItemsHead
     * An array of additional context menu items to add to the front of the context menu.
     */
    extraItemsHead: null,
    /**
     * @cfg {Array} extraItemsTail
     * An array of additional context menu items to add to the end of the context menu.
     */
    extraItemsTail: null,
    //public
    constructor: function (config) {
        this.addEvents(
            'aftermenu',
            'beforemenu');
        this.mixins.observable.constructor.call(this, config);
    },
    init : function(tabpanel){
        this.tabPanel = tabpanel;
        this.tabBar = tabpanel.down("tabbar");
        this.mon(this.tabPanel, {
            scope: this,
            afterlayout: this.onAfterLayout,
            single: true
        });
    },
    onAfterLayout: function() {
        this.mon(this.tabBar.el, {
            scope: this,
            contextmenu: this.onContextMenu,
            delegate: '.x-tab'
        });
    },
    onBeforeDestroy : function(){
        Ext.destroy(this.menu);
        this.callParent(arguments);
    },
    // private
    onContextMenu : function(event, target){
        var me = this,
            menu = me.createMenu(),
            disableAll = true,
            disableOthers = true,
            tab = me.tabBar.getChildByElement(target),
            index = me.tabBar.items.indexOf(tab);
        me.item = me.tabPanel.getComponent(index);
        me.ctab=me.item;
        menu.child('*[text="' + me.closeTabText + '"]').setDisabled(!me.item.closable);
        if (me.showCloseAll || me.showCloseOthers) {
            me.tabPanel.items.each(function(item) {
                if (item.closable) {
                    disableAll = false;
                    if (item != me.item) {
                        disableOthers = false;
                        return false;
                    }
                }
                return true;
            });
            if (me.showCloseAll) {
                menu.child('*[text="' + me.closeAllTabsText + '"]').setDisabled(disableAll);
            }
            if (me.showCloseOthers) {
                menu.child('*[text="' + me.closeOthersTabsText + '"]').setDisabled(disableOthers);
            }
        }
        event.preventDefault();
        me.fireEvent('beforemenu', menu, me.item, me);
        menu.showAt(event.getXY());
    },
    createMenu : function() {
        var me = this;
        if (!me.menu) {
            var items = [{
                text: me.closeTabText,
                scope: me,
                handler: me.onClose
            }];
            if (me.showCloseAll || me.showCloseOthers) {
                items.push('-');
            }
            if (me.showCloseOthers) {
                items.push({
                    text: me.closeOthersTabsText,
                    scope: me,
                    handler: me.onCloseOthers
                });
            }
            if (me.showCloseAll) {
                items.push({
                    text: me.closeAllTabsText,
                    scope: me,
                    handler: me.onCloseAll
                });
            }
            if (me.extraItemsHead) {
                items = me.extraItemsHead.concat(items);
            }
            if (me.extraItemsTail) {
                items = items.concat(me.extraItemsTail);
            }
            me.menu = Ext.create('Ext.menu.Menu', {
                items: items,
                listeners: {
                    hide: me.onHideMenu,
                    scope: me
                }
            });
        }
        return me.menu;
    },
    onHideMenu: function () {
        var me = this;
        me.item = null;
        me.fireEvent('aftermenu', me.menu, me);
    },
    onClose : function(){
//        this.tabPanel.remove(this.item);
        this.tabPanel.remove(this.ctab);
    },
    onCloseOthers : function(){
        this.doClose(true);
    },
    onCloseAll : function(){
        this.doClose(false);
    },
    doClose : function(excludeActive){
        var items = [];
        this.tabPanel.items.each(function(item){
            if(item.closable){
                /*if(!excludeActive || item != this.item){
                    items.push(item);
                }*/
                if(!excludeActive || item != this.ctab){
                    items.push(item);
                }
            }
        }, this);
        Ext.each(items, function(item){
            this.tabPanel.remove(item);
        }, this);
    }
});