Extjs实战（Extjs+Spring+Hibernate+dwr）章二：控件的组件化（三）通常问题

       接上一篇（http://blog.csdn.net/nanxiaotiantian/article/details/9369709）组件化讲：有的童鞋在组件化的时候，通常会这样做：

Ext.namespace('Ext.left');
Ext.left.LeftPanel = Ext.extend(Ext.Panel, {
        items:[{...},{....}]
	initComponent : function() {
		Ext.left.LeftPanel.superclass.initComponent.call(this, arguments);
        }
})

     大家观察上面的类，在类里面我们添加了配置项：items：[]，这是在用面向过程的思想编写面向对象的代码（我在说什么呢？），这是错误的，要在我们建立的panel里面添加自己想要的内容是通过在构造函数（不明白什么是构造函数的看我的上一篇文章）里面添加这条语句：this.add(.......);括号里面是自己写的panel。

        具体代码如下：

Ext.namespace('Ext.left');
Ext.left.LeftPanel = Ext.extend(Ext.Panel, {
	initComponent : function() {
		Ext.left.LeftPanel.superclass.initComponent.call(this, arguments);
		// 需要判断用户角色
		var loginName;
		var role;
		DWREngine.setAsync(false);
		sessionService.getSession("uname", function(data) {
					loginName = data;
				});
		managerService.getManagerRoleByLoginName(loginName, function(data) {
					role = data;
				});
		DWREngine.setAsync(true);
		if (role == '1') {
			this.add(this.getOneTreePanel());
			this.add(this.getFourTreePanel());
			this.add(this.getTwoTreePanel());
		} else if (role == '2') {
			this.add(this.getOneTreePanel());
		} else if (role == '3') {
			this.add(this.getFourTreePanel());
		} else {
			Ext.Msg.alert('提醒', '你已登出系统，请重新操作');
			window.location.href = 'login.jsp';
		}

	},

	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)());
	},
	getTwoTreePanel : function() {
		return this.treeTwoPanel || (function() {
			this.treeTwoPanel = new Ext.tree.TreePanel({
						title : '系统管理',
						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 : 'clientInfo',
												listeners : {
													"click" : this.clientInfo
												}
											}, {
												text : '车辆信息',
												leaf : true,
												iconCls : 'carInfo',
												listeners : {
													"click" : this.carsInfo
												}
											}]
								})

					});
			return this.treeTwoPanel;
		}.createDelegate(this)());
	},
	getFourTreePanel : function() {
		return this.treeFourPanel || (function() {
			this.treeFourPanel = new Ext.tree.TreePanel({
						title : '财务管理',
						xtype : 'treepanel',
						width : 200,
						autoScroll : true,
						split : true,
						rootVisible : false,
						loader : new Ext.tree.TreeLoader(),
						root : new Ext.tree.AsyncTreeNode({
									expanded : true,
									children : [{
												text : '财务结算',
												iconCls : 'finansettle',
												leaf : true,
												listeners : {
													"click" : this.settlementFinancial
												}
											}, {
												text : '收支明细',
												leaf : true,
												iconCls : 'plugs',
												listeners : {
													"click" : this.financialInfo
												}
											}, {
												text : '财务报表',
												iconCls : 'finangrid',
												leaf : true,
												listeners : {
													"click" : this.financialStatement
												}
											}]
								})

					});
			return this.treeFourPanel;
		}.createDelegate(this)());
	},
	getFiveTreePanel : function() {
		return this.FiveTreePanel || (function() {
			this.FiveTreePanel = new Ext.tree.TreePanel({
						title : '系统管理',
						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,
												listeners : {
													"click" : this.addUser
												}
											}, {
												text : '系统信息',
												leaf : true
											}]
								})

					});
			return this.FiveTreePanel;
		}.createDelegate(this)());
	},
	/*
	 * 显示系统中所有订单的信息
	 */
	qureyAllOrder : function() {
		var allArder = new Ext.order.allOrder();
		allArder.getGridData();
	},
	/*
	 * 这个函数实现了增加新订单的功能
	 */
	addNewOrder : function() {
		var aoWin = new Ext.order.addOrderWin();
		aoWin.getFormWin();
	},
	/**
	 * 发车计划。在在发车计划的tabPanel中显示所有的已经指定好了的发车计划,并最后确定发车
	 */
	carsPlan : function() {
		var carPlan = new Ext.plan.carPlan();
		carPlan.getCarPlanInfo();
	},
	carsInfo : function() {
		var carsInfo = new Ext.cars.carsInfo();
		carsInfo.getCarsInfo();
	},
	clientInfo : function() {
		var clientInfo = new Ext.client.clientInfo();
		clientInfo.getClientInfo();
	},
	financialInfo : function() {
		var financialInfo = new Ext.finan.allFinan();
		financialInfo.getAllFiancial();
	},
	financialStatement : function() {
		var statement1 = new Ext.statement.financialSta();
	},
	addUser : function() {
		var user = new Ext.user.User();
		user.addUser();
	},
	settlementFinancial : function() {
		var sf = new Ext.finan.settlementFinan();
		sf.getAllNeedSettlemeentFiancial();
		// 一个提醒框
		Ext.example.msg('提醒', '你可以<font color="red">双击</font>财务数据进行财务结算!');
	}
});

现在清楚组件化了吧，没有？那总应该清楚怎么建立系统界面的左边菜单栏了吧，没有？额。。。。你知道那个阿狸出来卖苹果的吗？