How to set html to a element in extjs

Question

1) How to set HTML to already created panel or any other Element?

I am a beginner. I tried the below to set some content inside the HTML

var clickedElement = Ext.getCmp('id').el.child('>');
clickedElement.setHTML("hello");

The above is working fine but the problem is that as the panel has many div's inside it.. the above approach is erasing those inside html (i.e div's) and replacing it with the above content.

I saw through Chrome that the panel has three nested div's. So, if I want to add HTML to it then I need to give something like below:

var clickedElement = Ext.getCmp('id').el.child('>').child('>');  //two times child

When I tried the above approach, I am successfully adding the html content and also the div's doesn't remove. Here the problem is that, I can't see the added content (maybe because of some default stylings, I can see the content is being added in Chrome console though.)

I am just asking whether there is any efficient way of adding HTML to the panel. In my opinion, this should be very easy approach which I am complexing here.

2) How to check whether a Element has a particular child ?

Suppose, for example, If I added a extjs Button as a child(item) into my panel while creating it. (which I can do). How to check whether the panel has the particular element (i.e button here)?

Before asking here, I searched alot and found somewhat relative but not helpful link to my problem.

Answer 1

In ExtJS most components are considered to have only one body element even if you see more on the dom. In contrast to jQuery which is basically added above a markup ExtJS generate the whole markup by itself.

Now to your question, to update the HTML of a component you can simply call the update() method like that

Ext.getCmp('id').update('hello');

See JSFiddle

Answer 2

Ext.ComponentQuery.query('#itemIdOfComponent').update('new value');

Do not set id's on components instead add an itemId configuration and see the documentation for Ext.ComponentQuery.query.