Extjs - 在Viewport中拖动窗口

时间:2013-11-25 08:54:42

标签: extjs

我有一个视口,在中心区域内有一个窗口。 当我尝试将窗口移动到中心区域的顶部时,窗口不会保持在顶部。 我注意到窗口位于北部区域的顶部+高度。

这是代码:

Ext.onReady(function(){

    Ext.create('Ext.container.Viewport', {

        layout: 'border',
        forceFit: true,
        hideMode: 'offsets',
        items: [
        {
            region:'north',
            id:'btns',
            height: 150,
            layout:
            {
                type: 'hbox',
                padding:'5',
                align:'stretch'
            },
            items:[]
        }, {
            region: 'east',
            autoScroll: true,
            border: false,
            items:[{
                xtype: 'container',
                id: 'page_gauche1',
                width: 500,
                height: 920,
                border: false
            }]
        }, {
            region: 'center',
            id: 'center',
            autoScroll: true,
            border: true,
            items: {
                xtype: 'container',
                id: 'page_gauche4',
                width: 1400,
                height: 920,
                border: false,
                hidden: true
            }
        }]
    });

    Ext.create('Ext.Window', {

        layout: 'fit',
        border: false,
        header: true,
        draggable: true,
        resizable: true,
        autoShow: true,
        constrain: true,
        renderTo: 'center',
        width: 300,
        height: 200
    });

});

1 个答案:

答案 0 :(得分:2)

窗口是一个浮动组件,你不应该在这里使用renderTo!另外,如果可以避免的话,你不应该自己设置id

你呢?

Fiddle

{
    region: 'center',
    id: 'center',
    autoScroll: true,
    border: true,
    items: {
        xtype: 'container',
        id: 'page_gauche4',
        width: 1400,
        height: 920,
        border: false,
        hidden: true
    },
    listeners: {
        boxready: function(self) {
            Ext.create('Ext.Window', {
                layout: 'fit',
                border: false,
                autoShow: true,
                constrain: true,
                constrainTo: self.getEl(),
                width: 300,
                height: 200
            });
        }
    }
}