ext初学者问题

[13617650029]

代码虽然很长，但问题很简单，就是点击“添加标签页”按钮时提示“MPanel”未定义，请问该怎么解决，问题出在哪里？
初学，没摸到头绪……
Ext.require(['*']);
Ext.onReady(function() {
Ext.QuickTips.init();
Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));

var viewport = Ext.create('Ext.Viewport', {
id: 'SDT_CreditSystem',
layout: 'border',
items: [
Ext.create('Ext.Component', {
region: 'north',// 上北
height: 32,
autoEl: {
tag: 'div',
html:'<p>管理系统_V4.01</p>'
}
}), {
region: 'south',// 下南
contentEl: 'south',
split: true,
height: 100,
minSize: 100,
maxSize: 200,
collapsible: true,
collapsed: true,
title: 'South',
margins: '0 0 0 0'
}, {
xtype: 'tabpanel',
region: 'east',// 右东
title: '通知栏',
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
items: [ '->', {
xtype: 'button',
text: '刷新',
tooltip: '每5分钟自动更新一次，点击即时更新！'
}]
}],
animCollapse: true,
collapsible: true,
split: true,
width: 225, // give east and west regions a width
minSize: 175,
maxSize: 400,
margins: '0 5 0 0',
activeTab: 0,
tabPosition: 'bottom',
items: [{
html: '<p>这是一个事物提醒的界面.</p>',
title: '事物提醒',
autoScroll: true
}, Ext.create('Ext.grid.PropertyGrid', {
title: 'Property Grid',
closable: true,
source: {
"(name)": "Properties Grid",
"grouping": false,
"autoFitColumns": true,
"productionQuality": false,
"created": Ext.Date.parse('10/15/2006', 'm/d/Y'),
"tested": false,
"version": 0.01,
"borderWidth": 1
}
})]
}, {
region: 'west',// 左西
stateId: 'navigation-panel',
id: 'west-panel', // see Ext.getCmp() below
title: '<a id="hideit">功能菜单</a>',
split: true,
width: 200,
minWidth: 175,
maxWidth: 400,
collapsible: true,
animCollapse: true,
margins: '0 0 0 5',
layout: 'accordion',
items: [{
title: '系统菜单01',
html: '菜单测试字节',
iconCls: 'nav' // see the HEAD section for style used
}, {
title: '系统菜单02',
html: '<p>Some settings in here.</p>',
iconCls: 'settings'
}, {
title: '系统菜单03',
html: '<p>Some info in here.</p>',
iconCls: 'info'
}]
},
Ext.create('Ext.Component', {
region: 'center',// 工作区
id:'WorkArea',
autoEl: {
tag: 'div',
html:''
}
})
]
});
//点击左侧菜单文字隐藏菜单 Begin
Ext.get("hideit").on('click', function(){
var w = Ext.getCmp('west-panel');
w.collapsed ? w.expand() : w.collapse();
});
//点击左侧菜单文字隐藏菜单 End

var MPanel = Ext.create("Ext.tab.Panel", {
activeTab: 0, // 默认激活第一个tab页
renderTo: WorkArea,
height:'100%',
items: [{
title: "tab标签页1",
html: "tab标签页1内容"
}],
buttons: [{
text: "添加标签页",
handler: addTab
}]
})




}
);
function addTab() {
var index = MPanel.items.length + 1;
var tab = MPanel.add({
title: "tab标签页" + index,
html: "tab标签页" + index + "内容",
closable: true // 允许关闭
});
MPanel.setActiveTab(tab); // 设置当前tab页
}

[斯洛文尼亚旅游]

MPanel变量在匿名函数里面才能访问到，你的addTab在匿名函数外，访问不到 将addTab放入 Ext.onReady(function () {函数体里面，或者 var MPanel = Ext.create("Ext.tab.Panel", { 改为 window.MPanel = Ext.create("Ext.tab.Panel", { 变为全局变量