Отзывчивый интерфейс под браузер и смартфон.

Webix JS
#1

Здравствуйте! Имеется ли в webix jet возможность, позволяющая сделать, к примеру интерфейс datatable и его компоненты изменяли размер и положение относительно используемого устройства? Если да, то можно ли прописать все в одном файле или придется делать отдельный вид интерфейса под каждое устройство?
Заранее благодарю!

#2

насколько я понял, в jet версии можно использовать:

if (webix.env.touch) {
webix.ui.fullScreen();
}

для детектирования touch устройства. Но как задействовать отдельно написанную мобильную версию интерфейса для данного условия? Ибо datatable просто физически не вместится при наличии нескольких колон в ней.
В качестве примера: “https://inventory.demos.webix.com/inv/units” (на смартфоне интерфейс отличается от браузерной версии).

#3

@intregal Здравствуйте! Есть пример с возвращением нужной конфигурации в jet версии?

#4

можете также использовать webix.env.mobile, или обрабатывать размер окна и возвращать необходимую конфигурацию.

#5

@intregal
config() {
if (webix.env.touch) {
webix.ui.fullScreen();
}
return {
//таблица (версия для браузера)
}
}

init() {
//заполнение таблицы данными
}

как в этой схеме написать версию той же таблицы только для смартфона?

#6 
config() {
  if (webix.env.touch) {
    webix.ui.fullScreen();
  }
  if(webix.env.mobile){
    return {/*mobile version*/}
  } else {
    return {/*desktop version*/}
  }
}

init() {
  //заполнение таблицы данными
}

само собой, все от деталей зависит

#7

@intregal Благодарю за помощь!

#8

Примите, пожалуйста, во внимание, что webix.ui.fullScreen должен вызываться один раз до инициализации интерфейса. В случае с Jet - до инита приложения.

Небольшой пример конфигурации UI в зависимости от размеров экрана есть в этом демо (расположение полей на странице Customers меняется в зависимости от размера экрана)

И именно

  • функция для определения размера экрана задана на уровне приложения ( ссылка на код )
  • она вызывается в методе config нужного класса ( код )
  • в том же методе выбирается подходящая под размер конфигурация ( код )

В дополнение к этому, приложение перерисовывается при ресайзе окна ( код ), давая возможность изменить всю конфигурацию. То же самое можно использовать в одном JetView, обновляя только его при необходимости.