接上一篇（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>财务数据进行财务结算!');
}
});
现在清楚组件化了吧，没有？那总应该清楚怎么建立系统界面的左边菜单栏了吧，没有？额。。。。你知道那个阿狸出来卖苹果的吗？