《ExtJS源码分析与开发实例宝典》 学习笔记之第二章难点

难点：
一、左边导航菜单
    1、accordion布局，可应用到任何容器类中，任何时刻只有单一组件处在激活状态
    2、通过Function类的call方法来改变panel类的作用域为当前类的作用域，同时把配置项也传递给panel类，继承Ext.Panel类中的构建函数功能
    Morik.Office.LeftMenu=function(config){
LeftMenu.superclass.construtor.call(this,config||{});
实现本类的功能
}   
附书中源码：
Ext.ns("Morik", "Morik.Office", "Morik.Util", "Morik.Office.Department");
Morik.Office.LeftMenu = function(config) {
var d = Ext.apply( {// default set
width : 200,
split : true,
region : 'west',
collapseMode :'mini',
defaults : {
border : false
},
layoutConfig : {
animate : true
}
}, config || {});

config = Ext.apply(d, {
layout : 'accordion',
collapsible : true
});

Morik.Office.LeftMenu.superclass.constructor.call(this, config);

//增加配置项trees
for(var i=0;i<this.trees.length;i++)
this.add({title:this.trees[i].getRootNode().text,items:[this.trees[i]]});

// 事件处理
this.addEvents('nodeClick');//注册事件名
this.initTreeEvent();//运行事件监听函数
}

Ext.extend(Morik.Office.LeftMenu, Ext.Panel, {
initTreeEvent : function() {
if(!this.items) return;
for (var i = 0;i < this.items.length; i++) {
var p = this.items.itemAt(i);//每个子组件
if (p)
var t = p.items.itemAt(0);//每棵树
if(t)
t.on( {//通过树组件的click事件来构建该LeftMenu组件的nodeClick事件
'click' : function(node, event) {                                        //叶子节点，取消其默认事件处理
if (node && node.isLeaf()) {
event.stopEvent();                                        //执行nodeClick事件注册的回调函数
this.fireEvent('nodeClick', node.attributes);
}
},
scope : this
});
}
}
})

实现该组件后便可调用它
子面板组件包含树组件，树组件一般通过Ext.tree.TreePanel类来实现
附书中源码：
var t1 = new Ext.tree.TreePanel( {
border : false,
rootVisible : false,
root : new Ext.tree.AsyncTreeNode( {
text : "我的办公桌",
expanded : true,
children : [ {
id : "docRec",
text : "接收公文",
leaf : true
}, {
id : "docSend",
text : "发送公文",
leaf : true
}, {
id : "docManage",
text : "公文管理",
leaf : true
}]
})
});

var t2 = new Ext.tree.TreePanel( {
border : false,
rootVisible : false,//根节点不可视，只是隐藏根节点本身，子节点不会隐藏
root : new Ext.tree.AsyncTreeNode( {
text : "主数据管理",//该内容在树组件中不可视
expanded : true,//起初展开根状态
children : [ {
id : "department",
text : "部门管理",
leaf : true
}, {
id : "company",
text : "公司管理",
leaf : true
}, {
id : "permissions",
text : "权限管理",
children : [ {
id : "permission",
text : "权限管理",
leaf : true
}, {
id : "permissionType",
text : "权限类别",
leaf : true
}]
}]
})

});
var leftmenu = new Morik.Office.LeftMenu( {
title : '我的办公系统',
trees : [t1, t2]
});
对于Ext.tree.AsyncTreeNode类的数据，必须指定leaf和children配置中的一个，leaf用来指定该节点是否为叶子节点，如果不是，则需通过children配置项指定。

二、右边工作区域   
Ext.TabPanel类：单击新节点时不覆盖上一节点的内容
附书中源码：
Ext.ns("Morik", "Morik.Office", "Morik.Util", "Morik.Office.Department");
Morik.Office.MainingPanel = Ext.extend(Ext.TabPanel, {
initComponent : function() {
// 一些初始化工作
Morik.Office.MainingPanel.superclass.initComponent.call(this);
this._cache = {};

},
loadTab : function(node) {
var n = this.getComponent(node.id);
if (n) {
this.setActiveTab(n);//激活
} else {//将node的属性组成一个参数对象
var c = {
'id' : node.id,
'title' : node.text,
closable : true
};
                          //找到对应类
var pn = this.findPanel(node.id);
                         //构建该类的实例对象
n = this.add(pn ? new pn(c) : Ext.apply(c, {
html : '你还没有实现该页面！'
}))
                          //显示并进行补救
n.show().doLayout();
}
if (n.ds)
n.ds.load({params:{start:0, limit:10}});
},
findPanel : function(name) {
var ret = this._cache[name];//从手动建立的关系的集合查找
if (!ret) {//采用指定的ns命名空间来构建，如果命名空间没有指定，采用默认命名空间
var pn = (this.ns ? this.ns : 'Morik.Office') + "."
+ Ext.util.Format.capitalize(name) + 'Panel';
var ret = eval(pn);//通过字符串类名找到该类
}
return ret;
},
//注册节点id和显示内容的实现类的对应关系，然后根据传入的id，在该注册集合中找到对应的类
addPanel : function(name, panel) {
if (!this._cache)
this._cache = {};//手动注册的集合
this._cache[name] = panel;
}
});