как ссылаться на (суб) компоненты в Sencha Touch после начальной настройки? - PullRequest
Новая
       27

как ссылаться на (суб) компоненты в Sencha Touch после начальной настройки?

0 голосов
/ 07 июля 2011

Я пытаюсь создать веб-приложение с Sencha.Я уже подправил множество примеров, и фреймворк имеет для меня смысл.Однако я продолжаю сталкиваться с двумя основными вещами:

1.Рассмотрим следующий код: 

var application;

var left = new Ext.Panel({
    fullscreen: false,
    style: "background-color:#039CF9;color:white;",
    dock: 'left',   
    html: 'left',
    width:320
});

var right = new Ext.Panel({
    fullscreen: false,
    style: "background-color:#ffffff;color:black;",
    dock: 'right',    
    html: 'right',
});

application = new Ext.Application({
    name: 'xaddict',
    launch: function() {
        this.viewport = new Ext.Panel({
            fullscreen: true,
            id    : 'mainPanel',
            layout: {type:'hbox',align:'stretch',pack:"center"},
            dockedItems :[right]
        });
    }
});

application.viewport.addDocked(left);

Каким-то образом, если вы добавляете «left» и «right» к приложению через атрибут «dockedItems», он делает то, что должен, но если я попытаюсь добавить его позжеконсоль говорит, что в application.viewport нет функции addDocked.Мне бы очень хотелось создать приложение в myapp.js и добавить к этой настройке основной код моей страницы.Из-за ограничений CMS я не могу вставить этот новый код в существующий код.

2.Во-вторых.В справочниках и документах Sencha Touch не ясно, какой синтаксис использовать при создании приложения.Некоторые говорят, что Ext.Setup, другие, чтобы настроить приложение, и есть некоторые, которые говорят вам, чтобы расширить компонент и использовать его в качестве отправной точки.Какой из них «нормальный»?

1 Ответ

1 голос
/ 07 июля 2011

Причина, по которой вы получаете эту ошибку, состоит в том, что порядок, в котором выполняются ваши операторы. Метод launch () приложения выполняется после того, как каркас и приложение все загружены и готовы к работе (аналогично событию onReady).Это означает, что вызываемый addDocked происходит до вызова метода запуска, и поэтому application.viewport еще не определен.

Если вы добавляете console.log в метод запуска и один непосредственно перед вызовом addDockedувидит, что происходит заказ.

Вы должны переместить строку application.viewport.addDocked (влево); внутри метода launch (): 

application = new Ext.Application({
    name: 'xaddict',
    launch: function() {
        this.viewport = new Ext.Panel({
            fullscreen: true,
            id    : 'mainPanel',
            layout: {type:'hbox',align:'stretch',pack:"center"},
            dockedItems :[right]
        });
        application.viewport.addDocked(left);
    }
});

В ответна ваши другие вопросы ...

В настоящее время рекомендуется идти по маршруту Ext.Application и структурировать приложение в соответствии с архитектурой MVC (Model-View-Controller).Существует не так много доступных ресурсов, в которых подробно рассказывается о том, как применить это, но примеры приложений в Twitter и Kiva используют его и являются хорошей отправной точкой.

Я бы на 100% рекомендовал расширить компоненты и сохранитьих в своих собственных файлах и сборки вашего приложения, используя эти строительные блоки (они по сути станут V в вашем MVC).Это значительно упрощает обслуживание и просто структурирует и организует вещи.

...