column layout nest a accordion layout, different display between IE and FF 问题的解决

column layout nest a accordion layout, different display between IE and FF 问题的解决

Border布局作为Ext中整个框架的布局应该说很普遍，一般North放一个应用的Logo bar,West一般会作为导航栏的放置位置；
而Center(East)往往作为整个应用的核心部分，而South位置也往往放置一些应用的版权等信息。

而导航栏一般会采用的呈现方式一般无非是Treepanel或者根据模块放置多个Panel，而多数会采用的布局方式，往往是
Accordion的布局。比如像这样(偷个懒直接用设计器写的)：

MyViewportUi  =  Ext.extend(Ext.Viewport, {
    layout: 'border',
    initComponent:  function () {
         this .items  =  [
            {
                xtype: 'panel',
                title: 'north',
                region: 'north'
            },
            {
                xtype: 'panel',
                title: 'west',
                region: 'west',
                width:  201 ,
                split:  true ,
                layout: 'accordion',
                activeItem:  0 ,
                items: [
                    {
                        xtype: 'panel',
                        title: 'panel1',
                        layout: 'column',
                        width:  180 ,
                        items: [
                            {
                                xtype: 'button',
                                text: 'Button1',
                                scale: 'large'
                            },
                            {
                                xtype: 'button',
                                text: 'Button2',
                                scale: 'large'
                            },
                            {
                                xtype: 'button',
                                text: 'Button3',
                                scale: 'large'
                            },
                            {
                                xtype: 'button',
                                text: 'Button4',
                                scale: 'large'
                            },
                            {
                                xtype: 'button',
                                text: 'Button5',
                                scale: 'large'
                            },
                            {
                                xtype: 'button',
                                text: 'Button6',
                                scale: 'large'
                            }
                        ]
                    },
                    {
                        xtype: 'panel',
                        title: 'panel2'
                    },
                    {
                        xtype: 'panel',
                        title: 'panel3'
                    }
                ]
            },
            {
                xtype: 'panel',
                title: 'east',
                region: 'center'
            },
            {
                xtype: 'panel',
                title: 'south',
                region: 'south'
            }
        ];
        MyViewportUi.superclass.initComponent.call( this );
    }
});

一个基本的框架就产生了，而问题也随之而来。最主要的问题是IE和FF显示不一样。应该说FF显示很正常，按键根据导航栏的大小，改变每一行显示的数量；
而IE呢，在第一次导航栏宽带变大的时候，一切正常；而当导航栏宽度缩小的时候，原来每行的按键数却并不变。想想这Ext都3.2了，不会还有这么脑残的bug吧；
google了下，国内似乎对这个问题也没有什么讨论的；于是直接去官网的论坛问。

最初别人的提议是，更改westPanel的属性

layout: {
    type: 'accordion',
    autoWidth:  false
}

等于禁止westPanel的子栏目自动变化宽度，试了如果westPanel的子栏目只有一个工作正常，但是如果多个的话，又悲剧了～

因为每次只有1个子栏目的宽度在变化，所以产生这个问题也不足为奇了。

最后某个网友提供了一个自己写的补丁，问题解决了。

Ext.layout.AccordionPatch  =  Ext.extend(Ext.layout.Accordion, {
    
    inactiveItems: [], // ADDED

     //  private
    onLayout :  function (ct, target){ // ADDED
        Ext.layout.AccordionPatch.superclass.onLayout.call( this , ct, target);
         if ( this .autoWidth  ===   false ) {
             for ( var  i  =   0 ; i  <   this .inactiveItems.length; i ++ ) {
                 var  item  =   this .inactiveItems[i];
                item.setSize(target.getStyleSize());
            }
        }
    },
     //  private
    beforeExpand :  function (p, anim){ // MODFIED
         var  ai  =   this .activeItem;
         if (ai){
             if ( this .sequence){
                 delete   this .activeItem;
                ai.collapse({callback: function (){
                    p.expand(anim  ||   true );
                }, scope:  this });
                 return   false ;
            } else {
                ai.collapse( this .animate);
                 if ( this .autoWidth  ===   false   &&   this .inactiveItems.indexOf(ai)  ==   - 1 ) // *****
                     this .inactiveItems.push(ai); // *****
            }
        }
         this .activeItem  =  p;
         if ( this .activeOnTop){
            p.el.dom.parentNode.insertBefore(p.el.dom, p.el.dom.parentNode.firstChild);
        }
         if ( this .autoWidth  ===   false   &&   this .inactiveItems.indexOf( this .activeItem)  !=   - 1 ) // *****
             this .inactiveItems.remove( this .activeItem); // *****
         this .layout();
    }
    
});

Ext.Container.LAYOUTS['accordionpatch']  =  Ext.layout.AccordionPatch; 

配合补丁，westPanel的属性也要有相应的变化

layout: {
    type: 'accordionpatch',
    autoWidth:  false
}