Adding HTML to Ext.Panel body

[captainill]

I have an Ext.Panel with scrolling set to vertical. It renders html that looks like this:

<div id="description" class=" x-panel" style="width: 638px; height: 235px; "><div class="x-panel-body x-scroller-parent" id="ext-gen1027" style="height: 235px; left: 0px; top: 0px; "><div id="ext-gen1028" style="min-height: 235px; width: 638px; -webkit-transform: translate3d(0px, -56px, 0px); " class=" x-scroller"></div><div class="x-scrollbar x-scrollbar-vertical x-scrollbar-dark" id="ext-gen1029" style="opacity: 1; -webkit-transform: translate3d(0px, 60px, 0px); height: 171px; "></div></div></div>

I know that if I have

        var description = new Ext.Panel({
            id: 'description',
            height: 235,
            scroll: 'vertical'
        });

I can reference the body of this by using description.body but that doesn't address the extra div created for the scroll content (id="ext-gen1028" class=" x-scroller"). Is there a good way to target this div for appending content using Ext.DomHelper.append.

This appends the 'p' after the scroll content and so it falls outside the visible area.

Ext.DomHelper.append(description.body,{tag: 'p', html: log});

[captainill]

I managed to target it using a combo of Ext.query and Ext.get. I'm new so it may not be the most elegant of solutions. Here's what I did though:

Ext.DomHelper.append(Ext.get(Ext.query('#description > .x-panel-body > .x-scroller')[0]),{tag: 'p', html: log});

One pitfall was I didn't realize that Ext.query returns an array so even though I knew there was one item given my selector I need to access it with array notation '[0]'.


Am I missing a better solution?