Подтвердить что ты не робот

Учебник Sencha Touch 2.0 MVC

Я очень новичок в области Sencha Touch, хочу начать с Sencha Touch 2.0, но не смог найти учебник, показывающий приложение, созданное с использованием шаблона MVC и, в частности, в Sencha Touch версии 2.0.

4b9b3361

ОТВЕТЫ

Ответ 1

Вот два видео с конференции sencha 2011:

SenchaCon 2011: MVC в глубине Часть 1 https://vimeo.com/33311074

и

SenchaCon 2011: MVC в глубине Часть 2 https://vimeo.com/33430731

Также вы можете проверить свой блог на другие короткие учебники.

Другое видео, чтобы лучше понять Sencha Touch 2

SenchaCon 2011: система классов Sencha https://vimeo.com/33437222

Ответ 2

Это, вероятно, один из самых ранних уроков, поэтому будьте терпеливы и знайте, что в финальной версии все может измениться. Светлый день.

Для MVC вам нужно сначала настроить структуру папок. Что-то вроде этого:

MyApp
    app
      controller
      model
      profile
      store
      view
    touch2
    app.js
    index.html

Теперь давайте начнем с примера приложения.

index.html

<!DOCTYPE html>
<html>
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Sample App</title>

    <link rel="stylesheet" href="touch2/resources/css/sencha-touch.css" type="text/css" title="senchatouch" id="senchatouch" />
    <link rel="stylesheet" href="touch2/resources/css/android.css" type="text/css" title="android" id="android" disabled="true" />
    <link rel="stylesheet" href="touch2/resources/css/apple.css" type="text/css" title="apple" id="apple" disabled="true" />
    <link rel="stylesheet" href="touch2/resources/css/bb6.css" type="text/css" title="blackberry" id="blackberry" disabled="true" />

    <link rel="stylesheet" href="styles/main.css" type="text/css">
    <script type="text/javascript" src="touch2/sencha-touch-debug.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>

app.js

Ext.Loader.setConfig({
    enabled : true
});


Ext.application({
    name: 'MyApp',

    profiles: ['Tablet'],

    views: [
        // common Tablet & Phone views 
    ],

    models: [

    ],

    controllers: [
        'Main'
    ],
    launch:function(){
        Ext.Viewport.add(Ext.create('MyApp.view.Main'));        
        //Ext.Viewport.add(Ext.create('MyApp.view.tablet.Main'));
     }        
});

Хорошо, теперь у вас есть два основных файла на месте, а Ext.Loader будет извлекать компоненты инфраструктуры, необходимые для более легкой отладки.

Сначала вы настроили пространство имен приложений (MyApp). Это означает, что все ваши будущие классы будут определены в пространстве имен MyApp.

Затем вы определили два основных профиля. Планшет и телефон. Они сообщают вашему приложению, как вести себя в разных средах. Укажите как можно больше (или none).

Затем вы настроили представления, модели и контроллеры, которые разделены между двумя профилями. Им все равно, используете ли вы приложение на телефоне или планшете.

Продолжим наш профиль Tablet

приложение/профиль/Tablet.js

Ext.define('MyApp.profile.Tablet', {
    extend: 'Ext.app.Profile',

    config: {
        views: [
            'Main'
        ]
    },

    isActive: function() {
        return !Ext.os.is('Phone');
    },

    launch: function() {
        Ext.create('MyApp.view.tablet.Main');
    }
});

Довольно понятно. Объект Config удерживает ваши представления/модели/контроллеры, относящиеся к профилю. Они не будут использоваться (включены), если вы используете приложение на смартфоне.

Метод isActive должен возвращать true или false после оценки среды. Я специально сказал, что планшеты - все не телефоны. Логично, что это неправильно, но я решил играть таким образом для простоты. Более правильным способом было бы

return Ext.os.is('Tablet') || Ext.os.is('Desktop');

Последний бит профиля - это метод запуска. Он сообщает приложению, что делать, когда приложение запускается в определенном профиле. MyApp создаст основной вид в Ext.Viewport.

Обратите внимание, что Ext.Viewport - это экземпляр Ext.Container, который уже добавлен в DOM при запуске приложения.

Позвольте создать первое представление. Это может быть любой виджет, который вы хотите, и я выбрал NavigationView.

приложение/просмотров/Main.js

Ext.define('MyApp.view.Main', {
    extend: 'Ext.navigation.View',

    config: {
        fullscreen  : true,

        items: [
            {
                title: 'My Great App'
            }
        ]

    }
});

Он полноэкранный (100% ширина и высота), и он сразу же создает TitleBar с названием My Great App.

Вы заметили, что мы только что определили MyApp.view.Main, но приложение ожидает MyApp.view.tablet.Main? Именно потому, что я хотел показать, как вы можете повторно использовать представления между профилями. Это полезно только в том случае, если мы меняем биты в зависимости от профиля.

приложение/просмотров/таблетка/Main.js

Ext.define('MyApp.view.tablet.Main', {
    extend: 'MyApp.view.Main',

    initialize: function() {
        this.add({
           xtype    : 'button',
           action   : 'coolBtn', 
           text     : 'Running on a tablet'
        });
        this.callParent();
    }
});

Это выглядит здорово уже. Просто ради расширения я добавил дополнительную кнопку в NavigationView. Я собираюсь настроить контроллер, который будет работать с кнопкой

приложение/контроллер/Main.js

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

    config: {
        refs: { 
            coolButton: 'button[action=coolBtn]' 
        },

        control: {
            coolButton: {
                tap: 'onCoolButtonTap'
            }
        },

        routes: {
            'show/:id' : 'showItem'
        }
    },

    onCoolButtonTap: function(button) {
        console.log(button === this.getCoolButton());
    },

    showItem: function(id) {
        console.log('Showing item',id);
    }

});

Это потрясающая часть, прямо здесь. Refs дает нам быстрый доступ к компонентам на основе правил запросов компонентов (кнопка [action = coolBtn] означает найти мою кнопку xtype = cmp, которая имеет свойство action = coolBtn). Refs также добавляет методы getter, как показано в примере onCoolButtonTap.

Затем я управляю кнопкой и приказываю приложению отслеживать событие крана и назначать ему обработчик.

Другим умным дополнением к шаблону MVC являются маршруты. Они обнаружат "команды" в вашем пути URI, например. http://localhost/#show/7482 и выполнить их через предоставленный обработчик showItem.

Резюме

Я думаю, что теперь у вас есть основная идея, как начать с вашего MVC-приложения. С некоторым любопытством вы можете расширить знания и создать потрясающие приложения.

Заметьте, что я написал это из головы и не тестировал. Дайте мне знать, если вы найдете опечатку или что-то в этом роде.

Ответ 3

Убедитесь, что вы используете Beta1 realease, так как у него есть последний набор примеров. Если вы посмотрите пример jog-with-friends, вы увидите, как работает система класса.

Первое, что нужно понять, это структура приложения, состоящая из контроллеров, моделей, магазинов и представлений и того, как они определены внутри Ext.Application...

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

Также документ для системы классов находится здесь: http://docs.sencha.com/touch/2-0/#!/guide/class_system

Изменить: после публикации этого я увидел, что Beta2 теперь выпущен