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就是组件化,哎。。。。。