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

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

| 我是Sencha Touch的新手（具有ExtJS的经验）。在我的应用程序中，我需要创建一些浮动面板作为模式对话框。现在，我真的很困惑如何设置这些浮动面板的尺寸，这些尺寸将根据设备进行适当调整。我是否需要获取浏览器的高度/宽度并适当地设置大小，还是需要提供一定百分比的大小？有什么帮助吗？

解决方法

要动态控制面板的宽度，可以在面板中使用\'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;
    };

如果我误解了您的问题，请这样说。 ,要执行您所要求的操作，您可以定义一个查看用户设备类型的函数，并根据它设置\“ width \”和\“ height \”参数，或者，您甚至可以内联。我举一个例子，向您展示如何在使用手机或平板电脑设备时更改面板尺寸：内联示例

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

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

var myPanel = new Ext.Panel({
    floating: 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;

    }

}

希望这可以帮助。