javascript - Ext Window at the bottom right - Stack Overflow

admin管理员组

文章数量:1334133

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

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

• javascript
• html
• css
• extjs
• extjs3

Share Improve this question Follow edited Oct 25, 2013 at 9:58 calculon asked Oct 25, 2013 at 5:39 calculoncalculon 12522 silver badges1414 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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/dnpTt/4/

Test in ExtJS 5.0.1

var w = window.innerWidth;
var h = window.innerHeight;

var swindow = new Ext.Window({
    [...]

    listeners: {
        show: function() {
            this.setX(w -this.getWidth());
            this.setY(h -this.getHeight());
        }
    }
});

本文标签： javascriptExt Window at the bottom rightStack Overflow