CODEWITHSUNDEEP
extjsextjs4.1
Ranjithreddy Abbareddy
Ranjithreddy Abbareddy

Reputation: 1

How get html content from panel in ExtJs

I am new to ExtJs. I have been facing a problem in panels for getting panel html content.

xtype : 'panel',
id : 'first_block',
html : '<p>Hi this is belongs to first block.</p>',
listeners : {
    render : function(c) {
        c.body.on('click', function() {
            alert('' + this.id);
            alert(Ext.getCmp('first_block').items.getAt(0).getValue());
        });
}

I am not getting html content, but i am getting id like "first_block-body".

Thanks in advance.

Upvotes: 0

Views: 10502

Answers (2)

Sean Adkinson
Sean Adkinson

Reputation: 8615

The html property defined the HTML you want in the content of your component, in this case an Ext.Panel.

Ext.Panels create a few layers of divs in order to provide things like headers, footers, toolbars, etc.

If all you want is a div with some content, you instead want to use an Ext.Component. Components don't have a body, so a couple things change in your code.

xtype : 'component',
id : 'first_block',
html : '<p>Hi this is belongs to first block.</p>',
listeners : {
    render : function(c) {
        c.on('click', function() {
            alert('' + this.id);
            alert(this.el.dom.innerHTML);
        }, this);
}

Notice that I added a third parameter to your on call, which specifies the this scope of the function call. I also edited your alert to print out the innerHTML of the element, assuming that's what you were trying to do.

UPDATE:

If you are going to use this component in a layout, it may need to be able to have its height and width set, meaning it needs to be of type box in order to be an Ext.BoxComponent.

Upvotes: 5

Eren
Eren

Reputation: 226

Ext.getElementById('yourId').innerHTML

Upvotes: 0

Related Questions