如何在 Rally sdk 2.0 中添加自定义 HTML？答案

【问题标题】：How do I add custom HTML in Rally sdk 2.0?如何在 Rally sdk 2.0 中添加自定义 HTML？
【发布时间】：2012-12-28 15:08:01
【问题描述】：

我正在使用 Rally SDK 2.0 创建一个带有一些自定义仪表的应用程序。这需要一些自定义 HTML。我从示例中获取了一个 rake 编译的 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');

            },

然后我在 app.html 中添加了一些自定义 HTML。

现在，如果我在没有代码“this.add('foo')”的情况下运行它，应用程序会在正文中添加一个新的 div，其中 class="x-container" 并将我的自定义 HTML 放在该 div 之外有效地隐藏它。

如果我使用 "this.add('foo') 它不会创建 div class=x-container 并且它显示我的小部件就好了。

使用 2.0 sdk 完成我正在尝试的任务的正确方法是什么？我意识到 add 方法是用于添加 Ext 组件，但是以某种方式调用它会导致我的 HTML 呈现正常。查看我们在旧 SDK 中开发的一些应用程序，使用自定义 HTML 在这些应用程序中运行良好。

【问题讨论】：

标签： raphael rally graphael justgage

【解决方案1】：

Ext 喜欢知道布局方面发生了什么，如果你在它不知道的情况下手动操作它下面的 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 的预期流动。

【讨论】：

【解决方案2】：

或者，您可以使用其 id 属性设置容器元素的 id，而不是使用 itemId：

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

生成的 html 元素将使用这些 id，这允许您使用自己的自定义渲染直接定位它们。

【讨论】：