Resizable adds his own style.

[alibaba69]

Hi Forum.

I have spent the last four houres trying to figure out why a Ext.Resizable adds a separation on the top of a navigation panel that I was trying to make resizable.

    Ext.Resizable( 'myNavPanel', {
        wrap: true,
        pinned: true,
        handles: 'e'
    });

I have inspect with the firebug and it simply adds me this style on the wrap div label that covers my panel. <div id = "myNavPanel-rzwrap" ...

style = "overflow: hidden; position: relative; left: 0px; z-index: auto; width: 150px; height: 574px; top: 26px;">

I have tried to add a constume css property by id and by class but it is always above the costume style, so it doesn't apply.

element.style {
height:574px;
left:0;
overflow-x:hidden;
overflow-y:hidden;
position:relative;
top:26px;
width:150px;
z-index:auto;
}

#myNavPanel-rzwrap {
top:0;  //This is striked in the firebug css inspector!!!!

}

¿Can any body help me?

Thanks in advance!!


This is the NavPanel wich is a west item of a viewPort:

NavPanel: Ext.extend(Ext.Panel, {
        id: 'myNavPane',
        region: 'west',
        animate: true,
        title: '<div class="uml-nav-Panel-Title">' + _Site.Master.navigation + '</div>',
        width: 150,
        frame: true,
        collapsible: true,
        autoScroll: true,
        initComponent: function() {
            this.initialConfig.collapsible = true;
            this.initialConfig.animCollapse = true;
            Site.Master.defaults.NavPanel.superclass.initComponent.call(this);
        }
    }),

[jsakalos]

What's the intended result? If you want to put your navpanel to the west of a border layout you don't need to setup a resizable yourself. Just set split:true and your west will be resizable.

[alibaba69]

Eyy, Thanks a lot jsakalos.

That's what I was intending.

It helped me a lot!!!!

Thanks again

[jsakalos]

Here is example of simplest border layout: http://examples.extjs.eu/?ex=simplestbl