深入剖析ExtJS 2.2实现及应用连载(12)：主内容区域

2.4.3主内容区域

 

深入剖析ExtJS 2.2实现及应用连载  版权所有，谢绝转载  作者：彭仁夔 QQ：546711211

在这一节中，我们实现第四步的mainPanel类。主内容区域是根据用户点击了左菜单的节点而载入其相对应内容。为了使点击新一个节点而不覆盖上一个节点的内容，我们可以采用TabPanel的方式，当前点击载入的面板是处在激活状态，而其它的面板都不处在激状态，但是又有标题提示着它的存在，点击这里标题，把那些不处在激活状态的确析激活起来。这个和重新点击leftMenu载入的是不一样，因为载入的页面是初始化状态，而这个历史面板可能你已经进行了一部分操作，比如添写一部分表单数据。

对于这种方式，我们可以采用TabPanel类来实现。但是它又不能和根据节点的属性来载入对应的页面，又要使用TabPanel的功能，又要扩展它。最好的方式是采用继承它。不过这里我们换一种继承的实现方式，让Ext.extend()自动生成它的构建方法：

代码清单2.13                                                  MainingPanel代码

Morik.Office.MainingPanel=Ext.extend(Ext.TabPanel, {

initComponent:function(){

Morik.Office.MainingPanel.superclass.initComponent.call(this);

//一些初始化工作                      ①

    }

    //其它方法                             ②

};

这种方式的继承，它会自动实现MainingPanel的构建函数，并把所有的配置项都传入到父类中去。如果要实现该类的一些私有初始化处理时，可以通过组件的模板方法initComponent来完成。在这里暂时还没有私有初始化的任务。

继承完成之后，我们要实现该类的主要功能，就是loadTab方法，如何根据节点的属性来载入对应的内容呢。这个内容我们可以把它们实现为各种不同的类。通过构建这个类的实例就完成载入该内容。这样的内容和不同的面板类对应起来。

我们现在要处理是如何根据节点的属性来构建不同表现内容类的实例。首先节点要有一个唯一的标识，这个标识一般都采用其id,这个标识的命名规则和类名有一个对应关系，比如Id为department，那么我就可以构建其类名为Morik.Office.DepartmentPanel类的实例。但是有的时候并不一定会有这种对应关系，那么我们是否通过代码手动来建立它们的关系呢，如我们先在在MainingPanel类中注册节点id和显示内容类的对应关系，之后就在这个册的集合中根据传入的id找到对应的类。

为了和默认是命名规则结合起来，我们可以先在在注册的集合中根据id来找其类名，如果没有找到就按默认的命名规则的类名来构建。这样说来，我们首先得实现一个注册这种Id和类名对应关系的方法:

代码清单2.14                                                 MainingPanel代码

addPanel : function(name, panel) {

       if (!this._cache) this._cache = {};

       this._cache[name] = panel;

    }

在代码2.3中②处加上这个方法，当然在这个方法之前得加,作为分隔，这是json对象的标准。在这个方法中，我们可以传入两个参数，name是节点的id标识，panel是该标识对应的内容的类。每调用该函数，就往当前实例的_cache的中注册name/panel的Hash对，在这里会进行判断而自动构建this._cache,不过我们最好是在initComponent方法中加上this._cache = {}来初始化这个集合。接下来我们就应该实现根据指定id来找到这个注册的类或按默认命名规则来实现的类：

代码清单2.15                                                MainingPanel代码

findPanel : function(name) {

       var ret = this._cache[name];

       if (!ret) {

           var pn = (this.ns ? this.ns : 'Morik.Office') + "."

                  + Ext.util.Format.capitalize(name) + 'Panel';

           var ret = eval(pn);     

       }

       return ret;

    },

它加在addPanel方法之后就可以了。它的实现是首先从cache中找到是否有该名字对应的类，没有话就按默认默认命名规则来生成类名。我们也可以通过ns配置项来改成类名中命名空间。原来id的基础首字母大写然后加上Panel后缀就构建其名字，在这里名字前加上命名空间，就构建了类名字符形式。之后通过eval它看看上下文中是否有该类，没有的话就是undefined。

实现了findPanel，我们就可以实现最重要的方法loadTab。

代码清单2.16                                                MainingPanel代码

loadTab : function(node) {

    var n = this.getComponent(node.id);

var c = {'id' : node.id, 'title' : node.text, closable : true};

if (n) {this.setActiveTab(n);}

else {       

     var pn = this.findPanel(node.id);

     n=this.add(pn ?new pn(c):Ext.apply(c,{html:'该页面尚未实现'}));

n.show().doLayout();

}              ①     

    },

loadTab首先是判断是否已经构建该id指定类的实例，如果构建了就把它设为激活状态。在实现使用中，这里还应该加上一些初始化的工作的代码。如果没有找到，那么就根据节点的id来找到其类名，找到了该类就构建它并把它加入到TabPanel的items中去。如果没有找到就生成一个提示你还没有实现的页面。最后进行显示并布局。

现在我activeTab们就可以调用该类了，为了实现如图2.5的效果，我们得在main.js中第四步中取代原有的mainTab代码：

代码清单2.16                                                MainingPanel代码

var mainTab = new Morik.Office.MainingPanel( {         

           region : 'center',

           activeTab : 0,          

           items : [{

              title : '我的首页',

              html : '<div style="background:url(pic/main.gif) no-repeat center middle; height:508px;"></div>'

           }]

       });

这里的activeTab为0为是在主页面第一次载入的时候显示其主页面的图片。即Items中的子组件。但是这个leftMenu类还不是很完善，在后面的章节，我们会改进来能动态传入数据。

深入剖析ExtJS 2.2实现及应用连载  版权所有，谢绝转载  作者：彭仁夔 QQ：546711211