Sencha Touch : Wie floating-panel-Größe für verschiedene Geräte?

Ich bin neu in Sencha Touch (Erfahrung mit ExtJS). In meiner Anwendung, die ich brauche, um einige schwebende Fenster als modale Dialoge. Nun, ich bin wirklich verwirrt, wie man die Größe dieser schwebende Fenster, die Größe entsprechend an die Geräte.

Brauche ich, um die browser-Breite/Höhe und der Größe entsprechend, oder muss ich zu geben die Größe in Prozent?

Hilfe?

InformationsquelleAutor Swar | 2011-05-25
  1. 6

    Dynamische Steuerung der Breite einer Platte, die Sie verwenden können, die 'Breite' param innerhalb der Platte.

    Können Sie zwingen, Ihren eigenen Wert in dieser Breite, aber Sie können auch eine Funktion, die dynamisch legt die Breite entsprechend der viewport.

    Beispielsweise ein modales panel;

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

    Und die Funktion, die aufgerufen wird, zu berechnen, eine anständige Breite;

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

        return desiredWidth;
    };

    Wenn ich das falsch interpretiert Ihre Frage bitte so sagen.

    • Ich versuchte dies heute 12/18/2013 und Ext.Element.getViewportWidth() hat nicht funktioniert. Ich schaute in die API und fand dies allerdings, was auch geklappt hat. Ext.Viewport.getWindowWidth()
    InformationsquelleAutor YDL
  2. 4

    Zu tun, was Sie verlangen, können Sie eine Funktion definieren, die sich mit der Benutzer-Gerät-Typ und stellen Sie die "Breite" und "Höhe" params " nach Ihr, alternativelly, Sie können sogar zu tun, dass inline.
    Ich post Euch ein Beispiel zu zeigen, wie Sie ändern Ihre panel-Größe, wenn Sie über ein Mobiltelefon oder ein tablet-Gerät:

    Inline-Beispiel

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

    Können Sie auch Ziel-auf verschiedenen Handy-Typen in dieser Weise:

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

    Dann in Ihrem code definieren Sie die folgende Funktion:

    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;

    }

}

    Hoffe, das hilft.

    InformationsquelleAutor Andrea Cammarata
Schreibe einen Kommentar