Search code examples
javascripthtmlcssextjsextjs3

Ext Window at the bottom right


I want to make a small status bar at the bottom right of the screen. But extjs sets the values of ​​"top" and "left", and The result is stretched in the center window.

var swindow = new Ext.Window({
        width:100,
        style:'position:fixed; right:0;bottom:0;',
        baseCls:'lk-sysstate-spanel',
        shadow: false,
        closable:false,
        hideBorder: false,
        plain: true,
        items:[
            historyPanel,
            smallPanel
        ]
    });

css result in a browser

element.style {
    bottom: 0;
    display: block;
    left: 675px;
    position: fixed;
    right: 0;
    top: -5000px;
    visibility: visible;
    width: 98px;
    z-index: 9003;
}

Use ExtJs 3.4


Solution

  • You can add listener to window and remove left/top styles. Example:

    var swindow = new Ext.Window({
        [...]
    
        listeners: {
            show: function() {
                this.el.setStyle('left', '');
                this.el.setStyle('top', '');
            }
        }
    });
    

    Working sample: http://jsfiddle.net/dnpTt/4/