Учебники

Sencha Touch — поддержка истории

Декабрь 18, 2018

Sencha Touch поставляется с полной историей поддержки и глубокими возможностями связи.

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

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

Посмотрите на следующий пример функциональности кнопки назад.

В этом примере показан вложенный список, который представляет собой не что иное, как список внутри списка, поэтому при щелчке по любому из элементов списка он открывает другой список и в верхней части экрана появляется кнопка «Назад».

Для полной базы кода, вы можете проверить Вложенный список в разделе просмотра компонента.

маршрутизация

Простейший пример маршрутов 

Ext.define('MyApp.controller.Main', {
   extend: 'Ext.app.Controller',

   config: {
      routes: {
         login: 'showLogin',
		 'user/:id': 'userId'
      }
   },

   showLogin: function() {
      Ext.Msg.alert('This is the login page');
   },
   userId: function(id) {
      Ext.Msg.alert('This is the login page specific to the used Id provided');
   }
});

В приведенном выше примере, если URL-адрес браузера — https://myApp.com/#login, будет вызвана функция showLogin.

Мы можем предоставить параметры в URL-адресе и на основе конкретного параметра, который может быть вызван функцией. Например, если URL-адрес https://myApp.com/#user/3, то будет вызвана другая функция userId, и внутри функций можно использовать конкретный идентификатор.

Предварительная маршрутизация

Иногда у нас есть предварительные параметры, которые включают запятую, пробел, специальные символы и т. Д. Для этого, если мы используем описанный выше способ написания маршрутов, это не сработает. Для решения этой проблемы Sencha touch предоставляет условную маршрутизацию, где мы можем указать условие, какой тип данных должен принимать параметр. 

Ext.define('MyApp.controller.Main', {
   extend: 'Ext.app.Controller', config: {
      routes: {
         login/:id: {
            action: showLogin, conditions: {':id: "[0-9a-zA-Z\.]+" }      
         }
      },

      showLogin: function() {
         Ext.Msg.alert('This is the login page with specific id which matches criteria');
      }     
   }
});

Как и в приведенном выше примере, мы дали регулярное выражение в условии, которое четко указывает, какой тип данных должен быть разрешен в качестве параметра URL.

Совместное использование одного и того же URL в разных профилях устройства

Поскольку Sencha touch предоставляет профиль устройства, поэтому один и тот же код приложения может использоваться на нескольких устройствах, возможно, что разные профили могут иметь разные функции для одного и того же URL-адреса.

Чтобы решить эту проблему, Sencha touch дает нам свободу писать маршрутизацию в главном контроллере, а вызываемую функцию записывать во все профили с их специфичными для профиля. 

Ext.define('MyApp.controller.Main', {
   extend: 'Ext.app.Controller', config: {
      routes: {
         login: 'showLogin'
      }
   },
});
// For phone profile
Ext.define('MyApp.controller.phone.Main, {
   extend: 'MyApp.controller.Main, showLogin: function() {
      Ext.Msg.alert('This is the login page for mobile phone profile');
   }
});
// For tablet profile
Ext.define('MyApp.controller.tablet.Main, {
   extend: 'MyApp.controller.Main,showLogin: function() {
      Ext.Msg.alert('This is the login page for tablet profile');
   }
});

Как показывает пример, у нас есть один главный контроллер с функцией showLogin и два разных профиля (телефон / планшет). Оба профиля имеют функцию showLogin с различным кодом, специфичным для профиля.

Таким образом, мы можем совместно использовать один и тот же URL на нескольких устройствах профиля с их конкретными функциями.

36
Share: