Sencha Touch: Как установить размер плавающей панели для другого устройства?

Question

Я новичок в Sencha Touch (опыт работы с ExtJS). В моем приложении мне нужно создать плавающие панели в виде модальных диалогов. Теперь я действительно запутался, как установить размер этих плавающих панелей, размер которых будет соответствовать размеру устройства.

Нужно ли указывать в браузере высоту / ширину и правильно устанавливать размер, или мне нужно указать какой-то размер в процентах?

Любая помощь?

Answer 1

Для динамического управления шириной панели вы можете использовать параметр width внутри Panel.

Вы можете задать собственное значение внутри этой ширины, но вы также можете создать функцию, которая динамически устанавливает ширину в соответствии с областью просмотра.

Например, модальная панель;

    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

Чтобы сделать то, что вы запрашиваете, вы можете определить функцию, которая смотрит на тип пользовательского устройства и установить параметры «ширина» и «высота» в соответствии с ним, или вы можете даже сделать это встроенным.Я публикую вам пример, чтобы показать, как изменить размер панели, если вы используете мобильный телефон или планшет:

Встроенный пример

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;

    }

}

Надеюсь, это поможет.