Sencha Touch:如何为不同设备设置浮动面板尺寸？

Question

我是Sencha Touch的新手(经历过ExtJS).在我的应用程序中,我需要创建一些浮动面板作为模态对话框.现在,我真的很困惑如何设置这些浮动面板的大小,这些面板将根据设备正确调整大小.

我是否需要获取浏览器的高度/宽度并适当设置大小,还是需要提供一定的百分比大小？

有帮助吗？

Answer 1

要动态控制Panel的宽度,可以使用Panel中的"width"参数.

您可以在此宽度内强制自己的值,但您也可以根据视口创建一个动态设置宽度的函数.

例如,模态面板;

    var editPnl = new Ext.Panel({
        floating: true,
        centered: true,
        modal: true,
        draggable: true,
        width: calculateDesiredWidth(),

并且调用函数来计算合适的宽度;

    var calculateDesiredWidth = function() {
        var viewWidth = Ext.Element.getViewportWidth(),
            desiredWidth = Math.min(viewWidth, 400) - 10;

        return desiredWidth;
    };

如果我误解了你的问题,请说出来.