为了学习extjs的extend，在网上看了例子，并把他修改做成了个例子贴出来方便以后查找；
Ext.extend与javascript的继承的区别查看
转：http://blog.csdn.net/turkeyzhou/article/details/6704268
以下是按我的理解写的，，有什么不妥的地方希望大家指出：
//使用继承方式
// 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 () {
var contentPanel = new Main();
var tree = new Tree({
title: '省份列表',
dataUrl: '/Index/mainIndex'
});
tree.click(contentPanel);
new Ext.Viewport({
layout: 'border',
items: [
{ region: 'north', height:60, html: 'header', border: false },
tree,
contentPanel
]
})
})
