Как я добавляю таможенный HTML в sdk 2.0 Ралли?

Я создаю приложение с некоторыми таможенными мерами, используя Ралли SDK 2.0. Это требует некоторого таможенного HTML. Я взял собранный граблями app.html файл от примеров как отправная точка. Используя JustGage для моих мер. Вот моя функция запуска.

launch: function() {
                var info = this.getStoriesForProject(); //Gets some aggregate info

                $('#header label').html(info.Title);
                var g = new JustGage({
                    id: "devgauge",
                    value: info.DevPercent,
                    levelColors: ['#f80404', '#f8f804', '#50ed0e'],
                    min: 0,
                    max: 100,
                    title: "Dev %"
                });

                this.add('foo');

            },

Тогда я добавил некоторый таможенный HTML в app.html.

enter image description here

Теперь, если я управляю этим без кода "this.add ('foo')", приложение добавляет новое отделение в теле с классом = "x-контейнер" и помещает мой таможенный HTML вне того отделения, эффективно скрывающего его.

Если я использую, "this.add ('foo') это НЕ создает отделение class=x-container, и это показывает мой виджет очень хорошо.

Что НАДЛЕЖАЩИЙ путь состоит в том, чтобы достигнуть того, что я делаю попытку использования 2.0 sdk? Я понимаю, что добавить метод для добавления компонентов Расширения, но так или иначе запрос этого заставляет мой HTML отдавать хорошо. Рассмотрение некоторых приложений, которые мы разработали в старом SDK, используя таможенный HTML, работало просто великолепно в тех.

1
nl ja de

2 ответы

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

Ext.define('My.App', {
    extend: 'Rally.app.App',
    items: [
        {
            xtype: 'container',
            itemId: 'header'
        },
        {
            xtype: 'container',
            itemId: 'devguage'
        }
    ]
});

Тогда в запуске можно добавить содержание к тем как так:

this.down('#devguage').add({
    //some other component
});

Можно всегда просто понижаться полностью вниз к уровню элемента хотя также:

this.down('#header').getEl().dom //the raw html element

Дефолтом приложения используют авто расположение, таким образом, любые пункты должны течь, как вы ожидали бы с нормальным HTML.

1
добавлено

Или, вместо того, чтобы использовать itemId, можно установить id элемента контейнера, используя его идентификационную собственность:

Ext.define('My.App', {
    extend: 'Rally.app.App',
    items: [
        {
            xtype: 'container',
            id: 'header'
        },
        {
            xtype: 'container',
            id: 'devguage'
        }
    ]
});

Получающиеся элементы HTML будут использовать те иды, который позволяет вам быть нацеленными на них непосредственно с вашим собственным предоставлением.

0
добавлено