//使用继承方式
// apply(将一个对你复制到另一个对象)与applyIf(将一个对象复制到另一个对象，但重复的不复制)
// apply(a, b) 与 applyIf(a, b)
// 子类.superclass.constructor.call(this, {(基类构造函数)(配置)参数});---调用基类的构造函数，把参数传给基类的构造函数
//this表示什么得看Ext.extend继承的基类是什么；
//如：子类.superclass.constructor.call(this, {title: '继承', width: 200, height:300});
// Ext.extend(子类，基类，{操作(方法)})
//如：Ext.extend(子类，基类，{
?//????? click: function(){

//?????? },
//?????? dbclick: function(){

//?????? }
//??? })--这样子类的实例对象就可以访问这些方法；

//创建一个面板，继承于Ext.Panel，并接收一个参数
var Panel = function (config) {
??? config = config || {};
??? var _config = Ext.applyIf({
??????? layout: 'accordion',
??????? region: 'west',
??????? split: true,
??????? width: 200,
??????? collapsible: true,
??????? animate: true
??? }, config); //把传进来的参数复制到上面去，重复的不复制
??? //以下是调用基类的构造函数，并把创建好的参数（_config）传给Ext.Panel;
??? /*
??? 相当于：
??? new Ext.Panel({
??? layout: 'accordion',
??? region: 'west',
??? split: true,
??? width: 200,
??? collapsible: true,
??? animate: true,
??? 加上config传进去的参数
??? })
??? */
??? Panel.supperclass.constructor.call(this, _config);//把参数传给Ext.Panel的构造函数
}
Ext.extend(Panel, Ext.Panel, {}); //继承Ext.Panel

?

?

/**********************************************************************************************/

var Tree = function (config) {//将接收一个config参数，用来配置dataUrl与title
??? config = config || {};
??? var loader = new Ext.tree.TreeLoader({ dataUrl: config.dataUrl });
??? Tree.superclass.constructor.call(this, { //把参数传给Ext.tree.TreePanel
??????? animate: true,
??????? title: config.title,
??????? rootVisible: false,
??????? region: 'west',
??????? split: true,
??????? width: 200,
??????? collapsible: true,
??????? root: {},
??????? loader: loader
??? });
}
Ext.extend(Tree, Ext.tree.TreePanel, {//上面的Tree继承于Ext.tree.TreePanel，，并为其添加click方法
??? click: function (contentPanel) {
??????? this.on('click', function (node) {
??????????? if (!node.attributes.leaf)
??????????????? return false;
??????????? var tabid = "tree_tab_" + node.attributes.id;
??????????? var exist_panel = contentPanel.getComponent(tabid);
??????????? if (exist_panel)
??????????????? contentPanel.setActiveTab(exist_panel);
??????????? else {
??????????????? var iframe_in_tab = "iframe_" + tabid;
??????????????? var iframe_html = "<iframe width=100% height=100% id='" + iframe_in_tab + "'/>";
??????????????? var panel = new Ext.Panel({
??????????????????? title: node.attributes.text,
??????????????????? id: tabid,
??????????????????? closable: true,
??????????????????? html: iframe_html
??????????????? });
??????????????? contentPanel.add(panel);
??????????????? contentPanel.setActiveTab(panel);
??????????????? Ext.get(iframe_in_tab).set({
??????????????????? src: node.attributes.url
??????????????? });
??????????? }
??????? })
??? }
});
var Main = function () {
??? Main.superclass.constructor.call(this, {
??????? region: 'center',
??????? margins: '0 5 5 0',
??????? activeTab: 0,
??????? items: [
?????????? { title: '首页', closable: false, html: 'welcome' }
??????? ],
??????? tbar: new Ext.Toolbar({
??????????? items: [
????????????? { xtype: 'displayfield', value: '内容页面导航', style: 'color: Red' },
????????????? { xtype: 'button', text: '后退', tooltip: '后退', handler: function () {

????????????? }
????????????? },
????????????? { xtype: 'button', text: '前进', tooltip: '前进', handler: function () {

????????????? }
????????????? },
????????????? { xtype: 'button', text: '刷新', tooltip: '刷新', handler: function () {

????????????? }
????????????? }
?????????? ]
??????? })
??? })
}
//上面的继承于Ext.TabPanel
Ext.extend(Main, Ext.TabPanel, {});

Ext.onReady(function () {
??? v