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.

Solution 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

Solution 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.

Comments

[Mr_Green]

Thanks this worked. please also give answer to my second question in this post.. :)

[sra]

@ For that you would look for the Component and not a element in the dom. Like Ext.getCmp('id').down('button[text=enter]');

[Mr_Green]

ok.. I used update() as you mentioned, but this works same as the one which I mentioned in my post ie var clickedElement = Ext.getCmp('id').el.child('>'); clickedElement.setHTML("hello"); Hence, this is too removing the inside div. and now when I try to get the html, my whole code is being messed up. because some elements doesn't have the nested div's(i.e content changed elements) and the remaining have the nested div's...

[Mr_Green]

Hey, I solved it by doing the following but I think this is not recommended and there could be more efficient approach: Ext.each(Ext.ComponentQuery.query('panel[cls=my-cls]'),funct‌​ion(panel){ panel.update(''); }); //removing extra div from all the child panel elements.

[sra]

@Mr_Green Why do want to work on that level? You can always get the body el from the component level. I think you are make it hard on yourself. You don't need to mess with the dom here. Btw. your approach above is OK. Yes you can tune it but you want notice any change unless you have hundreds of rather complex panels.

[Mr_Green]

If I call the method to get the html, that method is returning the content as well as the extra div tags. Right now, to get the html, I am using the following statement : panel.body.dom.innerHTML; I used even panel.el.child('>').getHTML() which is returning the same.

[sra]

@Mr_Green take a look at the templates like xtemplate. You can apply one to a component that then fills the body... I think they will make your life easier ;)

[Mr_Green]

Again.. :D Please have a look at this link stackoverflow.com/q/14751580/1577396