如何在Rally SDK 2.0中添加自定义HTML? [英] How do I add custom HTML in Rally sdk 2.0?

问题描述

我正在使用Rally SDK 2.0创建带有一些自定义量规的应用程序.这需要一些自定义HTML.我从示例中以rake编译的app.html文件作为起点.在我的量规上使用JustGage.这是我的启动功能.

I'm creating an app with some custom gauges using Rally SDK 2.0. This requires some custom HTML. I took a rake-compiled app.html file from the examples as a starting point. Using JustGage for my gauges. Here is my launch function.

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.

Then I added some custom HTML in app.html.

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

Now, if i run this without the code "this.add('foo')", the app adds a new div in the body with class="x-container" and puts my custom HTML outside that div effectively hiding it.

如果我使用"this.add('foo')，则不会创建div class = x-container，并且显示我的小部件还可以.

If i use the "this.add('foo') it does NOT create the div class=x-container and it shows my widget just fine.

使用2.0 SDK来完成我正在尝试的正确方法是什么?我意识到add方法是用于添加Ext组件的，但是以某种方式调用它会使我的HTML呈现正常.查看我们在旧版SDK中开发的某些应用程序，使用自定义HTML可以很好地解决这些问题.

What is the PROPER way to accomplish what I'm attempting using the 2.0 sdk? I realize the add method is for adding Ext components, but somehow calling this is causing my HTML to render ok. Looking at some apps we developed in the old SDK, using the custom HTML worked just fine in those.

推荐答案

Ext喜欢了解布局方面的情况，如果您在不了解它的情况下手动操作dom，通常会感到困惑.通常，如果我们有一些已知的初始布局，我们可以通过应用程序上的items集合添加这些布局:

Ext likes to know what is going on layout-wise and often gets confused if you're manually manipulating the dom beneath it without its knowledge. Usually if we have some known set of initial layout we add those via the items collection on the app:

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

然后在启动过程中，您可以像这样添加内容:

Then inside of launch you can add content to those like so:

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

尽管如此，您也始终可以一直下降到元素级别:

You can always just drop all the way down to the element level though as well:

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

默认情况下，应用会使用自动布局，因此所有项目都应按照常规html的预期进行流动.

By default apps use an auto layout, so any items should flow as you would expect with normal html.

这篇关于如何在Rally SDK 2.0中添加自定义HTML?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！