ext中引用ux_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: '

Welcome!

'

}

]

});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);

}

});