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: '关闭所有'
})
});

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

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

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