Приложения Sencha Touch созданы для использования на самых разных устройствах, от телефонов до планшетов. Обычно люди предпочитают использовать телефонные приложения, находясь вне дома, чтобы быстро собрать некоторую информацию или выполнить какое-либо действие — часто в очень короткое время. Написание отдельных приложений для каждой платформы отнимает много времени, подвержено ошибкам и скучно.
К счастью, профили устройств Sencha Touch дают нам простой способ распределять между типами устройств столько кода, сколько необходимо, упрощая настройку поведения, внешнего вида и рабочих процессов для каждого устройства.
Примечание. Если вы новичок в Sencha Touch, обратитесь к моему сообщению, чтобы начать работу с Sencha Touch.
Настройка профилей
Шаг 01) Создайте начальный запуск, используя следующую команду sencha Cmd.
sencha generate app TechZoo c:\SenchaWeb\profile
Шаг 02) Перейдите в папку профиля и выполните следующие команды для создания профилей.
sencha generate profile Phone повторите, чтобы создать профиль планшета
sencha generate profile Tablet
если вы перейдете в каталог профиля, то увидите, что sencha создал два файла js, каждый из которых содержит конфигурацию своего соответствующего профиля (телефона и планшета).
Этот профиль может иметь свою собственную модель, представление и контроллеры, которые могут быть вызваны, когда sencha обнаружит текущего пользователя. профиль.
Ext.define('TechZoo.profile.Phone', {
extend: 'Ext.app.Profile',
//define any additional classes your Profile needs here
config: {
name: 'Phone',
views: ['MainView'],
models: [],
stores: [],
controllers: []
},
//this profile will be activated if we detect we're running on a Phone
isActive: function(app) {
console.log('Phone profile avtive: ' + Ext.os.is('Phone'));
return Ext.os.is.Phone;
},
// Profile's launch will execute before Ext.application#launch()
launch: function() {
var view = Ext.create('TechZoo.view.phone.MainView');
view.down('titlebar').setTitle('Current Profile : ' + this.getName());
Ext.Viewport.add(view);
}
});
Шаг 03) Создайте общий вид, MainViewкоторый будет называться базовой панелью для телефона и планшета.
Ext.define('TechZoo.view.MainView', {
extend : 'Ext.Panel',
xtype : 'mainview',
config: {
items : [{
docked: 'top',
xtype: 'titlebar',
title : 'Sencha Touch Profile'
}],
styleHtmlContent : true,
title: 'Generic version',
html: 'Generic Main View'
},
initialize: function() {
console.log('Generic MainView...');
}
});
Теперь создайте два представления (по одному для каждого профиля), которое расширяет наш основной вид для использования преимуществ наследования.
Ext.define('TechZoo.profile.Phone', {
extend: 'Ext.app.Profile',
//define any additional classes your Profile needs here
config: {
name: 'Phone',
views: ['MainView'],
models: [],
stores: [],
controllers: []
},
//this profile will be activated if we detect we're running on a Phone
isActive: function(app) {
console.log('Phone profile avtive: ' + Ext.os.is('Phone'));
return Ext.os.is.Phone;
},
// Profile's launch will execute before Ext.application#launch()
launch: function() {
var view = Ext.create('TechZoo.view.phone.MainView');
view.down('titlebar').setTitle('Current Profile : ' + this.getName());
Ext.Viewport.add(view);
}
});
Шаг 04) Обновите файл app.js, чтобы он выглядел примерно так.
Ext.application({
name: 'TechZoo',
views: ['MainView'],
requires : ['Ext.TitleBar'],
profiles: ['Phone', 'Tablet'],
icon: {
'57': 'resources/icons/Icon.png',
'72': 'resources/icons/Icon~ipad.png',
'114': 'resources/icons/[email protected]',
'144': 'resources/icons/[email protected]'
},
isIconPrecomposed: true,
startupImage: {
'320x460': 'resources/startup/320x460.jpg',
'640x920': 'resources/startup/640x920.png',
'768x1004': 'resources/startup/768x1004.png',
'748x1024': 'resources/startup/748x1024.png',
'1536x2008': 'resources/startup/1536x2008.png',
'1496x2048': 'resources/startup/1496x2048.png'
},
launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
console.log('launching app...');
}
});
Шаг 05) Теперь все готово для просмотра приложения в профиле телефона, планшета.
Запустите встроенный веб-сервер Sencha Cmd sencha web startи нажмите http://localhost:1841/profile/index.html?deviceType=PhoneURL. Обратите внимание, что вы можете просмотреть профиль планшета, указав deviceType=Tabletприведенный выше URL.
Выход
Нажмите http://localhost:1841/profile/index.html?deviceType=PhoneURL, чтобы просмотреть профиль телефона в действии.
и используйте http://localhost:1841/profile/index.html?deviceType=TabletURL для просмотра профиля телефона в действии.
счастливое кодирование 