1

我正在使用 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')”的情况下运行它，应用程序会在正文中添加一个带有 class="x-container" 的新 div，并将我的自定义 HTML 放在该 div 之外，从而有效地隐藏它。

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

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

4

2 回答 2

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 的预期流动。

于 2012-12-28T17:32:45.377 回答
0

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

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

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

于 2016-05-25T22:07:40.030 回答