Question

当面板1垂直调整大小时，实际执行的偏移配置是什么使面板2显示不完整？

Ext.onReady(function(){
    var myWin = Ext.create('Ext.window.Window',{
        height      : 300,
        width       : 300,
        layout      : 'anchor',
        border      : false,
        anchorSize  : 400,
        items       : [
            {
                title : 'panel 1',
                anchor: '-50, -150',
                frame : true
            },
            {
                title : 'panel 2',
                anchor: '-10, -150', // how is this config working?
                frame : true
            }
        ]
    });
    myWin.show();
});

https://fiddle.sencha.com/#fiddle/64r

提前致谢。

Answer 1

来自ExtJS docs的

......

// two values specified
    anchor: '-50 -100' // render item the complete width of the container
                       // minus 50 pixels and
                       // the complete height minus 100 pixels.
    // one value specified
    anchor: '-50'      // anchor value is assumed to be the right offset value
                       // bottom offset will default to 0

因此，您可能需要将窗口大小调整为小于150（即300 - 指定锚点）的像素。所以＆＃34;完整高度减去150像素＆＃34;实际上会导致裁剪该容器内的物品。

最好看一些你想要实现的目标的例子，以及它现在如何运作的小提琴。

修改

您将两个组件的高度设置为＆＃34;窗口的大小＆＃34;减去一些固定数量（50）的像素。如果窗口增长到500像素＆＃34;高＆＃34;然后你得到两个450像素高的面板。这就是为什么第二个面板总是溢出窗口。

这是我之前发布的文档部分的全部内容。您可能还想尝试其他一些布局，可能是嵌套布局，例如：anchor布局内的hbox布局。

Answer 2

Ext.create("Ext.Window", ({
height : 300,
width : 300,   items : [
    {
    title : 'Panel1',
    anchor : '-50, -150',
    frame : true
    },
    {
    title : 'Panel2',
    anchor : '-10, -150',
    frame : true
    }
    ]

}));

Panel1宽度= 288px - 50px = 238px

Panel1高度= 285px - 150px = 135px

Panel2宽度= 288px - 10px = 278px

Panel2高度= 285px - 150px = 135px

使用偏移量Extjs Anchor Layout

2 个答案: