为 ExtJS 面板内的 HTML 元素执行 getElementById

Question

I need to fetch an HTML element from an ExtJS panel and replace it with another HTML element.

I have a normal ExtJS panel -> rptPanel, whose innerHTML is copied to another panel -> outputDataPanel.

Please refer the code below.

    var html = rptPanel.body.dom.innerHTML;

    me.outputDataPanel.insert(me.itemIndex,{
        html    : html,
        border  : 0,
        cls     : 'htmlView_font_higher htmlView_font',
        style   : 'margin: 10px 0px 20px 0px; width: 100%;'
    });

Now, I need to fetch an HTML element inside outputDataPanel (something like getElementById('table_data') on outputDataPanel ) and replace it with another HTML element.

Can anyone please help?

Answer 1

试试这个（我想这不是 Sencha 的最佳实践）：

outputDataPanel.getEl().down('#table_data')

Answer 2

You can set an ID to that element and get it like so:

// by id
var el = Ext.get("myDivId");
// by DOM element reference
var el = Ext.get(myDivElement);

// by id
var el = Ext.getDom('myDivId');
// by DOM element reference
var el = Ext.getDom(myDivElement);

Alternative way would be:

set an item-id to that element, lets say it's an item in the panel:

            {
                'text': 'myBTN',
                iconCls: 'sprite',
                disabled: true,
                itemId: 'btn1',
                handler: function(btn,e){
                    self.myFunction();
                }

            }

later on the code look for it by this.down("#btn1")