OK，接着上一篇文章说extjs中的组件化，现在我直接贴出我做的系统的代码，进行讲解，希望对各位同学有帮助。
一般而言，我们在使用extjs进行富客户端的开发的时候，一般会在系统主界面的左边显示如图所示的菜单：
那么这个功能是怎么实现的？没错就是用到了组件化的概念（当然，不用组件化也是能实现的
，组件化就是以面向对象的思维来编写我们的extjs代码），具体代码如下：
Ext.namespace('Ext.left');
Ext.left.LeftPanel = Ext.extend(Ext.Panel, {
initComponent : function() {
Ext.left.LeftPanel.superclass.initComponent.call(this, arguments);
},
getOneTreePanel : function() {
return this.treeOnePanel || (function() {
this.treeOnePanel = new Ext.tree.TreePanel({
title : '订单管理',
collapsible : true,
xtype : 'treepanel',
width : 200,
autoScroll : true,
split : true,
rootVisible : false,
loader : new Ext.tree.TreeLoader(),
root : new Ext.tree.AsyncTreeNode({
expanded : true,
children : [{
text : '全部订单',
leaf : true,
iconCls : 'plugs',
listeners : {
"click" : this.qureyAllOrder
}
}, {
text : '新增订单',
iconCls : 'addorder',
leaf : true,
listeners : {
"click" : this.addNewOrder
}
}, {
text : '订单计划',
iconCls : 'orderplan',
leaf : true,
listeners : {
"click" : this.carsPlan
}
}]
})
});
return this.treeOnePanel;
}.createDelegate(this)());
},
//这里我值列出一个功能模块的菜单
});
现在主要对以上代码进行讲解：
Ext.namespace('Ext.left');
Ext.left.LeftPanel = Ext.extend(Ext.Panel, {
initComponent : function() {
Ext.left.LeftPanel.superclass.initComponent.call(this, arguments);
}
})上面这点代码就如java里面我们申明了一个包，这个包是：Ext.left，在extjs里面这个叫做命名空间，在这个包里面我们自己申明了一个自己的类：LeftPanel,这个类继承了extjs里面已经有了的类：Ext.Panel，其实这里我们就相当于创建了一个panel（后续会在这个panel里面添加东西），我们创建的这个类呢有一个构造函数：initComponent(){}，我们在使用这个类的时候，构造函数里面的代码会首先执行（如java）。
基本而言，在进行组件化的时候，我们 都会按照这样的格式来写。
我们已经申明了这么一个类，这个类只有一个骨架并没有具体的内容，我们就需要在里面添加自己要添加的内容，如第一段代码一样，我自己写了一个方法，叫：getOneTreePanel()，这个方法用于返回一个panel，返回的panel是一棵树，树里面有我们自己需要的以一些菜单（注意，创建树的时候我用了单例模式的概念来创建），
那么这只是一个类里面的方法而已，我们在创建这个类的时候并没有执行到这个函数（说明，像这样创建类:var myPanel=new Ext.left.LeftPanel()。靠，你确定不是java代码？。。。。好吧），那么就是说这棵树还不能显示在我们的主panel中，现在只要在initComponent(){}里面执行：this.add(this.getOneTreePanel());就可以把树加入到panel中（没事儿闲着那就试试呗）。
要加入其它的panel也是一样的。这TM就是组件化，哎。。。。。