CODEWITHSUNDEEP
raphaelrallygraphaeljustgage
Jason Gerstorff
Jason Gerstorff

Reputation: 266

How do I add custom HTML in Rally sdk 2.0?

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');

            },

Then I added some custom HTML in app.html.

enter image description here

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.

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

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.

Upvotes: 1

Views: 587

Answers (2)

sgeffner
sgeffner

Reputation: 11

Or, instead of using itemId, you can set the id of the container's element using its id property:

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

The resulting html elements will use those ids, which allows you to target them directly with your own custom rendering.

Upvotes: 0

Kyle Morse
Kyle Morse

Reputation: 8400

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

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

Upvotes: 1

Related Questions