[Ext 4.1 beta 2a] Header right, collapse left - Problems

**KimSchneider** · 22 Feb 2012 4:57 AM

REQUIRED INFORMATION

Ext version tested:

Ext 4.1 beta 2a
Ext 4.1 nightly 2012-02-21

Browser versions tested against:

Chrome 18

DOCTYPE tested against:

<!DOCTYPE html>

Description:

See screenshots attached. If using headerPosition : 'right' and collapseDirection : 'left', the title and collapse icon disappear. a white box lays over the tree in the left, too. Happens on Chrome only.

The result that was expected:

title and collapse icon stay, no box over left component

The result that occurs instead:

title and collapse icon disappear, box over left component

Screenshot or Video:

attached

Debugging already done:

none

Possible fix:

not provided

Additional CSS used:

only default ext-all.css
custom css that does not modify any ext styles

Operating System:

WinXP Pro

**mitchellsimoens** · 22 Feb 2012 7:55 AM

Using beta2 and our latest code with Chrome I can't reproduce using this simple code:

Code:

new Ext.panel.Panel({
    renderTo          : document.body,
    width             : 400,
    height            : 400,
    title             : 'Test',
    headerPosition    : 'right',
    collapseDirection : 'left',
    collapsible       : true
});

When collapsed I always see the title and icon.

**KimSchneider** · 5 Mar 2012 6:21 AM

Alright, I tried it with this testcase

Code:

Ext.onReady(function() {
    var header = Ext.create('Ext.panel.Panel', {
        html : 'My header'
    });
    
    var navigation = Ext.create('Ext.panel.Panel', {
        width : 200,
        html : 'Panel 1'
    });
    
    var settings = Ext.create('Ext.panel.Panel', {
        title : 'Panel 2',
        width : 200,
        html : 'Panel 2',
        titleCollapse : true,
        headerPosition : 'right',
        collapseDirection : 'left',
        collapsible : true,
        animCollapse : false
    });
    
    var main = Ext.create('Ext.panel.Panel', {
        flex : 1,
        html : 'Panel 3'
    });
    
    new Ext.Viewport({
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        items: [ header, new Ext.Panel({
            flex : 1,
            layout: {
                type: 'hbox',
                align: 'stretch'
            },
            border : false,
            items : [ navigation, settings, main ]
        }) ]
    });
});

It works.

BUT, our real life app contains a tree in "Panel 1". It works in our real life app, too, as long is I don't click on any entry in the tree. Do you have a tree with sample data? I don't...

[Ext 4.1 beta 2a] Header right, collapse left - Problems

Thread Tools

Search Thread

Display

[Ext 4.1 beta 2a] Header right, collapse left - Problems

[Ext 4.1 beta 2a] Header right, collapse left - Problems