《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){
vard=Ext.apply({//defaultset
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(vari=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(vari=0;i<this.items.length;i++){
varp=this.items.itemAt(i);//每个子组件
if(p)
vart=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类来实现
附书中源码：
vart1=newExt.tree.TreePanel({
border:false,
rootVisible:false,
root:newExt.tree.AsyncTreeNode({
text:"我的办公桌",
expanded:true,
children:[{
id:"docRec",
text:"接收公文",
leaf:true
},{
id:"docSend",
text:"发送公文",
leaf:true
},{
id:"docManage",
text:"公文管理",
leaf:true
}]
})
});
vart2=newExt.tree.TreePanel({
border:false,
rootVisible:false,//根节点不可视，只是隐藏根节点本身，子节点不会隐藏
root:newExt.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
}]
}]
})
});
varleftmenu=newMorik.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){
varn=this.getComponent(node.id);
if(n){
this.setActiveTab(n);//激活
}else{//将node的属性组成一个参数对象
varc={
'id':node.id,
'title':node.text,
closable:true
};
//找到对应类
varpn=this.findPanel(node.id);
//构建该类的实例对象
n=this.add(pn?newpn(c):Ext.apply(c,{
html:'你还没有实现该页面！'
}))
//显示并进行补救
n.show().doLayout();
}
if(n.ds)
n.ds.load({params:{start:0,limit:10}});
},
findPanel:function(name){
varret=this._cache[name];//从手动建立的关系的集合查找
if(!ret){//采用指定的ns命名空间来构建，如果命名空间没有指定，采用默认命名空间
varpn=(this.ns?this.ns:'Morik.Office')+"."
+Ext.util.Format.capitalize(name)+'Panel';
varret=eval(pn);//通过字符串类名找到该类
}
returnret;
},
//注册节点id和显示内容的实现类的对应关系，然后根据传入的id，在该注册集合中找到对应的类
addPanel:function(name,panel){
if(!this._cache)
this._cache={};//手动注册的集合
this._cache[name]=panel;
}
});