border布局如何动态替换其中一块

 

border布局如何动态替换其中一块

当我们使用容器的border布局时，有时候会需要动态的改变north，west，east，south，center等某一块的内容，而事实上extjs不支持border布局移除某一块的内容，用container的add

remove等方法是没有用的。而我们又确实需要动态替换某一块的内容，如点击一个按钮改变内容。borderLayout类中有如下说明：

# Any container using the BorderLayout must have a child item with region:'center'. The child item in the center region will always be resized to fill the remaining space not used by the other regions in the layout.（任何使用border布局的容器都必须有一个center区域，你不用指定center区域的高和宽，它会根据其他区域的占用情况自动 剩余区域）

# Any child items with a region of west or east must have width defined (an integer representing the number of pixels that the region should take up).（west和east区域必须指定其宽度，以像素为单位）

# Any child items with a region of north or south must have height defined.（north和south区域必须指定其高度，以像素为单位）

# The regions of a BorderLayout are fixed at render time and thereafter, its child Components may not be removed or added. To add/remove Components within a BorderLayout, have them wrapped by an additional Container which is directly managed by the BorderLayout. If the region is to be collapsible, the Container used directly by the BorderLayout manager should be a Panel. In the following example a Container (an Ext.Panel) is added to the west region（当border布局的容器被渲染后，它的子组件将不能被增加和移除。想要移除以border布局的容器的子组件，必须在外面增加一层不以border布局的容器panel）。

如果要改变下面某个items是做不到的，border布局将阻止这种行为。

var myBorderPanel = new Ext.Panel({

    renderTo: document.body,

    width: 700,

    height: 500,

    title: 'Border Layout',

    layout: 'border',

    items: [{

        title: 'South Region is resizable',

        region: 'south',     // position for region

        height: 100,

        split: true,         // enable resizing

        minSize: 75,         // defaults to 50

        maxSize: 150,

        margins: '0 5 5 5'

    },{

        // xtype: 'panel' implied by default

        title: 'West Region is collapsible',

        region:'west',

        margins: '5 0 0 5',

        width: 200,

        collapsible: true,   // make collapsible

        cmargins: '5 5 0 5', // adjust top margin when collapsed

        id: 'west-region-container',

        layout: 'fit',

        unstyled: true

    },{

        title: 'Center Region',

        region: 'center',     // center region is required, no width/height specified

        xtype: 'container',

        layout: 'fit',

        margins: '5 5 0 0'

    }]

});

然而下面的做法是可行的,我们要移除红色部分，然后加上一个绿色部分：

var addedPanel = new Ext.panel({title:"添加的面板"});

var myBorderPanel = new Ext.Panel({

    renderTo: document.body,

    width: 700,

    height: 500,

    title: 'Border Layout',

    layout: 'border',

    items: [{

        title: 'South Region is resizable',

        region: 'south',     // position for region

        height: 100,

        split: true,         // enable resizing

        minSize: 75,         // defaults to 50

        maxSize: 150,

        margins: '0 5 5 5'

    },{

        // xtype: 'panel' implied by default

        title: 'West Region is collapsible',

        region:'west',

        margins: '5 0 0 5',

        width: 200,

        collapsible: true,   // make collapsible

        cmargins: '5 5 0 5', // adjust top margin when collapsed

        id: 'west-region-container',

        layout: 'fit',

        unstyled: true,

       items:[{xtype:"panel",

                  title:"面板1"},

                 {xtype:"panel",

                  title:"面板2"}

              ]

    },{

        title: 'Center Region',

        region: 'center',     // center region is required, no width/height specified

        xtype: 'container',

        layout: 'fit',

        margins: '5 5 0 0'

    }]

});

采用如下大代码移除和添加：

wrc = Ext.getCmp('west-region-container');

wrc.removeAll();

wrc.add(addedPanel);

wrc.doLayout();