深入剖析ExtJS 2.2实现及应用连载(11): 左边导航菜单
http://www.cnblogs.com/jxnuprk/archive/2008/12/10/1351503.html
深入剖析ExtJS 2.2实现及应用连载(11): 左边导航菜单
2.4.2左边导航菜单

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

左边导航菜单就是Asp.net中TabBox控件。在这里，我们也是形成一个组件的形式，看起来实现是有点复杂，但是如果建立在Ext的组件架构基础之上，就一点也不难了。Ext有一种布局叫做accordion。它是专门用来处理这种效果，它可以应用在任何布局类中（如panel及其子类）。因为布局类中都会有着一些需要布局中的子组件。accordion布局的特性就是任何一个时候都只有一子组件处在激活状态，它的内容处在展开状态，其它不处在激活状态的子组件都会折叠其内容。

如果布局类中的子组件都是面板的话（即Panel类），那么因为面板内容的折叠/展开都是针对于其head标题部分。也就是说展开时，可以看到其内容，没有折叠时能看到其head标题部分，这就和我们TabBox特别相似了。

我们的TabBox是要在任何时刻都要显示每个Tab子项的标题，而任何一个时刻都要显示唯一的激活状态的Tab子项的内容。对于激活状态的Tab子项的高度，它会占据其它Tab子项的所没有占据的所有高度。这个accordion布局，在没有指定子组件时，也会根据子组件来自动计算激活状态子组件的高度以便占据整个剩余高度。

那么说来我们就可以采用Panel布局上加上accordion布局来模拟整个TabBox控件，而itmes中子Panel组件来用模拟Tab子项。组件就是类的形式，那么我们通过Panel来构建这个LeftMenu类。为了使用这个leftMenu类拥有组件特性和Panel的功能，我们让它来继承于Panel类。那么如何使用LeftMenu类拥有Panel类的功能呢？第一是要继承于Panel类，第二是在LeftMenu类把当前的配置项都传入到Panel类的构建函数中去，同时改变它的作用域为当前LeftMenu类的作用域：

代码清单2.8                                                    LeftMenu中代码

Morik.Office.LeftMenu = function(config) {

Morik.Office.LeftMenu.superclass.constructor.call(this,config||{});①

    //实现本类的功能                                            ②

}

Ext.extend(Morik.Office.LeftMenu, Ext.Panel, {//加上LeftMenu类的方法});③

对于继承，我们可以采用Ext.extend函数，把Panel类中所有的方法都继承到当前类来，另外我们还可以通过第三个参数来实现本类的方法，这个与在构建函数中通过this来实现方法有点不同，那就是其方法都定义在当前类的prototype中。

在①处，我们通过Function类的call方法来改变Panel类的作用域为当前类的作用域，同时把配置项也传递给Panel类。这就是为什么在该类中能使用父类中定义的配置项。在①处我们完全是传入当前类的配置项，这里应该给了出一些默认值，而对于layout的配置项就不能通过当前类传入配置项来进行修改。看一下如何实现：

代码清单2.9                                                    LeftMenu中代码

var d = Ext.apply( {// default set

              split : true,

              region : 'west',

            width : 200,

              defaults : {

                  border : false

              },

              layoutConfig : {

                  animate : true

              }

           }, config || {});



    config = Ext.apply(d, {

       layout : 'accordion',

       collapsible : true

    });

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

这段代码替换代码2.8中①处的代码。它首先apply把传入的配置项和默