Sencha Touch 2.0 MVC учебник [закрыто]

Question

Sencha Touch 2.0 MVC учебник [закрыто]

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

3 13

sencha-touch sencha-touch-2

3 ответа:

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

Для MVC вам нужно сначала настроить структуру папок. Что-то вроде этого:
MyApp
    app
      controller
      model
      profile
      store
      view
    touch2
    app.js
    index.html
Теперь давайте начнем с примера приложения.
Индекс.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>
Приложение.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.Загрузчик будет извлекать компоненты фреймворка по мере необходимости для упрощения отладка.
Сначала вы настраиваете пространство имен вашего приложения (MyApp). Это означает, что все ваши будущие классы будут определены в пространстве имен MyApp.

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

Далее вы настроили представления, модели и контроллеры, которые являются общими для двух профилей. Им все равно, используете ли вы приложение на телефоне или планшете.

Давайте продолжим с нашим профилем планшета

Приложение / профиль / планшет.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');
Последний бит профиля - это метод запуска. Он говорит приложению, что делать, когда приложение запускается в определенном профиле. Приложение будет создать главный вид на внутр.Область просмотра.

Обратите внимание, что ВН.Просмотра является экземпляром доб.Контейнер, который уже был добавлен в DOM при запуске приложения.
Давайте создадим наше первое представление. Это может быть любой виджет, который вы хотите, и я выбрал NavigationView.
App/views/Main.js
Ext.define('MyApp.view.Main', {
    extend: 'Ext.navigation.View',

    config: {
        fullscreen  : true,

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

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

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

App / views / tablet / 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. Я собираюсь настроить контроллер, который будет работать с кнопкой

App/controller/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);
    }

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

Тогда Я контролирую кнопку и сказать приложение, чтобы отслеживать события коснитесь и назначить обработчик на него.

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

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

43

Убедитесь, что вы используете Beta1 realease, так как он имеет последний набор примеров. Если вы посмотрите на пример пробежки с друзьями, вы можете увидеть, как работает система классов.
Первое, что нужно понять, - это структура приложения, состоящая из контроллеров, моделей, хранилищ и представлений, а также то, как они определяются внутри Ext.Приложение...
Они все еще работают над документацией и учебники скудны, я узнал новую систему классов, просто взглянув на образец приложение, взгляните, это, вероятно, поможет вам начать

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

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

2

ilija139 · Accepted Answer · 2012-02-10 17:17:36

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

SenchaCon 2011: MVC In Depth Часть 1 https://vimeo.com/33311074

И

SenchaCon 2011: MVC In Depth Part 2 https://vimeo.com/33430731

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

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

Сенчакон 2011: система классов Сенча https://vimeo.com/33437222