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;
    };

如果我误解了你的问题，请说出来。

Answer 2

要执行您的请求，您可以定义一个查看用户设备类型的函数，并根据它设置“width”和“height”参数，另外，您甚至可以内联。我给您举了一个示例，向您展示如果您使用手机或平板电脑设备，如何更改面板尺寸：

内联示例

var myPanel = new Ext.Panel({
    floating: true,
    centered: true,
    modal: true,
    draggable: true,
    width: (Ext.is.Phone ? 200 : 600),
    height: (Ext.is.Phone ? 300 : 800)
 });

您甚至可以通过这种方式定位不同的手机类型：

var myPanel = new Ext.Panel({
    floating: true,
    centered: true,
    modal: true,
    draggable: true,
    width: getPanelSize('width'),
    height: getPanelSize('height')
 });

然后在代码中定义以下函数：

getPanelSize = function(sizeType){

    switch(sizeType){

       case 'width':

          if(Ext.is.iPhone) return 200;
          if(Ext.is.Blackberry) return 150;
          if(Ext.is.Android) return 180;

          break;

       case 'height':

          if(Ext.is.iPhone) return 300;
          if(Ext.is.Blackberry) return 100;
          if(Ext.is.Android) return 150;

          break;

    }

}

希望这有帮助。

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

2 个答案: