最近在做一个物流管理的项目，公司必须要求用Extjs4.1来做界面，因为以前一直也没有接触过所以开发的过程中遇到了很多的困难。同时Extjs4.1的资料在网上也相对来说较少。好了，不说废话上代码：
1.左侧的功能树
1 Ext.define("AM.view.SystemTree", {
2 extend : 'Ext.tree.Panel',
3 alias : 'widget.systemTree',
4 rootVisible : false,// 不展示ROOT
5 displayField : 'text',
6 // title:'物流运输系统',
7 viewConfig : { // 具有拖拽功能
8 plugins : {
9 ptype : 'treeviewdragdrop'
10 },
11 listeners : { // 拖拽
12 drop : function(node, data, overModel, dropPosition, options) {
13 alert("把: " + data.records[0].get('text') + " 移动到: "
14 + overModel.get('text'));
15 }
16 }
17 },
18
19 dockedItems : [ {
20 xtype : 'toolbar',
21 items : [ {
22 xtype : 'button',
23 id : 'allopen',
24 icon : 'resources/img/lock_open.png',
25 text : '展开全部'
26 }, {
27 xtype : 'button',
28 id : 'allclose',
29 icon : 'resources/img/lock.png',
30 text : '收起全部'
31 } ]
32 } ],
33
34 root : {
35 text : 'root',
36 leaf : false,
37 id : '0',
38 children : [ {
39 text : '运输管理',
40 checked : false, // 显示被选中
41 leaf : false, // 是否是叶子节点
42 icon : 'resources/img/folder_user.png',
43 id : '01',
44 children : [ {
45 text : '车辆信息管理',
46 checked : false,
47 icon : 'resources/img/report_edit.png',
48 leaf : true,
49 id : 'vehiclelist', //主要的要点在这里，这里的id要指定为你要打开的那个视图的别名
50 }]
51 }]
52 }
53
54 });
要点介绍：
- tree一定不要忘记添加别名alias
- 设置树形结构的子节点的id值为你需要在右侧显示的view的别名alias（重要） ------可参考下方的view代码
2.需要打开的对应的view
1 Ext.define("AM.view.transportation.VehicleList",{
2 extend:'Ext.grid.Panel',
3 alias:'widget.vehiclelist', //这里一定要设置别名
4 id:'vehiclelist',
5 store:'VehicleStore',
6 ......中间代码省略
7 columns : [
8 {text:'车辆编号',dataIndex:'vehicleNo',
9 field:{
10 xtype:'textfield',
11 allowBlank:false
12 }
13 },
14
15 {text:'车辆描述',xtype:'templatecolumn',
16 tpl:'车辆的编号为{vehicleNo} 所在地区为{vehicleArea}'
17 }
18 ],
19 initComponent:function(){
20 this.callParent(arguments);
21 }
22 });
3.建立一个右侧的TabPanel
1 Ext.define('AM.view.TabPanel',{ //主页面的tab面板
2 extend: 'Ext.tab.Panel',
3 alias:'widget.tabpanel',
4 closeAction: 'destroy',
5 defaults :{
6 bodyPadding: 10
7 },
8 items: [{
9 title: '主页',
10 autoLoad:'content.jsp' //只有一个基本的panel
11 }],
12
13 });
4.设置点击tree的触发事件
1 'systemTree':{
2 itemclick:function(tree,record,item,index,e,options){
3 var tabs = tree.ownerCt.ownerCt.ownerCt
4 .child('#center-grid').child("#tabpanel");
5 //获取当前点击的节点
6 var treeNode=record.raw;
7 var id = treeNode.id;
8 var text=treeNode.text;
9 //获取点击的树节点相同的tab标签
10 var tab = tabs.getComponent(id);
11 if(!tab){//如果不存在
12 tabs.add({//用点击树的节点的ID、text新建一个tab
13 id:id,
14 closable: true,
15 title:text,
16 iconCls:id,
17 xtype:id //将tree设置好的id对应的TabPanel中去，相当与把对应的view填充到TabPanel中
18 }).show();
19 }else{//如果存在
20 tabs.setActiveTab(tab);//Active
21 }
22 }
23 },
结果上效果图:
总结：Extjs做出来的效果确实很炫，但是学起来也有一定的难度，特别是比较新的版本，网上很难找到什么好的教程。还好我们有API，可以多对着API中的例子进行练习，这样掌握起来也很快。最近才接触Extjs，希望各位大神不要吐槽!