javascript - ExtJS 4.2.1 : Using "split" in border layout in panel, resize issue - Stack Overflow

admin管理员组

文章数量:1357602

I have a panel with border layout. This panel has center region and a west region. In west region, there is a panel with border layout that contains 3 panels. See the picture below.

I use "split" so that the west region is re sizable using the splitter. The problem is, when I try to re size the west region, the inner panels are not re sized properly. See the picture below.

My code is very minimal and I see nothing wrong in it.

Here is the JSFiddle of my code And below is the code that generates these panels.

this.mainPanel = Ext.create('Ext.panel.Panel', {
    layout: 'border',
    height: 1000,
    width: 1400,
    items: [{
        xtype: 'panel',
        region: 'center',
        layout: 'border',
        id: 'center-panel',
        items: [{
            xtype: 'panel',
            layout: 'border',
            region: 'center',
            items: [{
                xtype: 'panel',
                region: 'center',
                id: 'grid-panel',
                layout: 'fit'
            }, {
                xtype: 'panel',
                id: 'south-panel',
                region: 'south',
                split: true,
                title: 'Additional data represented by this event',
                height: 200
            }]

        }]
    }, {
        xtype: 'panel',
        ref: 'west_panel',
        region: 'west',
        split: true,
        title: 'Show/Hide',
        width: 300,
        minWidth: 175,
        maxWidth: 500,
        items: [{
            xtype: 'panel',
            split: true,
            collapsed: true,
            title: 'Show/Hide by Time'
        }, {
            xtype: 'panel',
            split: true,
            collapsible: true,
            title: 'Show/Hide by activity types and tags'
        }, {
            xtype: 'panel',
            split: true,
            collapsible: true,
            title: 'Show/Hide by participant types and tags'
        }]
    }]
});
this.mainPanel.render(document.getElementById('example-grid'));

Any idea how I can fix this problem?

P.S. I am using ExtJS 4.2.1.883

I have a panel with border layout. This panel has center region and a west region. In west region, there is a panel with border layout that contains 3 panels. See the picture below.

I use "split" so that the west region is re sizable using the splitter. The problem is, when I try to re size the west region, the inner panels are not re sized properly. See the picture below.

My code is very minimal and I see nothing wrong in it.

Here is the JSFiddle of my code And below is the code that generates these panels.

this.mainPanel = Ext.create('Ext.panel.Panel', {
    layout: 'border',
    height: 1000,
    width: 1400,
    items: [{
        xtype: 'panel',
        region: 'center',
        layout: 'border',
        id: 'center-panel',
        items: [{
            xtype: 'panel',
            layout: 'border',
            region: 'center',
            items: [{
                xtype: 'panel',
                region: 'center',
                id: 'grid-panel',
                layout: 'fit'
            }, {
                xtype: 'panel',
                id: 'south-panel',
                region: 'south',
                split: true,
                title: 'Additional data represented by this event',
                height: 200
            }]

        }]
    }, {
        xtype: 'panel',
        ref: 'west_panel',
        region: 'west',
        split: true,
        title: 'Show/Hide',
        width: 300,
        minWidth: 175,
        maxWidth: 500,
        items: [{
            xtype: 'panel',
            split: true,
            collapsed: true,
            title: 'Show/Hide by Time'
        }, {
            xtype: 'panel',
            split: true,
            collapsible: true,
            title: 'Show/Hide by activity types and tags'
        }, {
            xtype: 'panel',
            split: true,
            collapsible: true,
            title: 'Show/Hide by participant types and tags'
        }]
    }]
});
this.mainPanel.render(document.getElementById('example-grid'));

Any idea how I can fix this problem?

P.S. I am using ExtJS 4.2.1.883

• javascript
• extjs
• extjs4
• extjs4.2

Share Improve this question Follow edited Jan 22, 2015 at 12:49 Mr. Polywhirl 48.9k1212 gold badges9393 silver badges144144 bronze badges asked Apr 25, 2014 at 7:43 Pratik PatelPratik Patel 1,35533 gold badges1717 silver badges4545 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

This is how I got it fixed. I could not find a proper cause of the issue and hence its not a proper solution but its a simple work around that got it fixed.

To my west_panel which contained 3 inner panels, I added a listener to the "resize" event, which would forcefully re pute positions and sizes of west_panel's children. Below is the part of the code that shows my west_panel with its listener.

{
    xtype: 'panel',
    region: 'west',
    split: true,
    id: 'west_panel',
    title: 'Show/Hide',
    width: 300,
    minWidth: 175,
    maxWidth: 500,
    listeners: {
        resize: Ext.Function.bind(function(p, width, height,
                oldWidth, oldHeight, eOpts) {
            p.doLayout();
        }, this)
    },
    items: [{
      xtype: 'panel',
      split: true,
      collapsed: true,
      title: 'Show/Hide by Time'
    },

    // other code below
    // .
    // .
    // .
}

Configure layout:'accordion' on the west. See the accordion config options to fine tune it to your needs

I have solved this type issue before with a bination of MinWidth on the region, and FitLayout on the panels nested in the given region.

For example, I am currently working on a page that has a West region that is Collapsible, and Split = True. The MinWidth on the region is 200.

I have a TreePanel inside the region with Layout = FitLayout, and NO width related property values set. I have a black border style on the TreePanel that confirms it is resizing when I pull the splitbar on the region.

Let me know if you need more explanation. The key was to remove all width (autowidth included) related properties on the TreePanel and set its layout to Fit. MinWidth would not be required on the region; it exists for usability sake as the region can be collapsed as well.

本文标签： javascriptExtJS 421Using quotsplitquot in border layout in panelresize issueStack Overflow