Small Tips for ExtJs Programming

Hello,

Here I am sharing some tips that would be useful for you while working with ExtJs. These tips are about issues I faced while working on ExtJs projects.

1) Get-Set ExtJs Panel HTML

I don't know how many of you faced this issue. While working on one project, requirement was to set panel HTML dynamically. If you check Panel class there is not any method like getHtml() setHtml(). Following is the solution for it.

var dynamicHtml = '<div> This is dynamic HTML</div>';
myPanelObj.body.dom.innerHTML = dynamicHtml;

This will set panel HTML. Same way you can get panel HTML using myPanelObj.body.dom.innerHTML.

2) ExtJs Window me.Events are undefined error

If you are extending ExtJs window and on creating object of extended control, if you get above error then you forgot to call base class constructor. Call the base class constructor using following code.

ExtendedWindowObject.superclass.constructor.call(this, config);

3) Set padding while using ExtJs panel table layout.

When you use table layout in ExtJs panel layout. All the controls are arranged in a table. Sometimes it does not look good if you don't give padding to it. It looks very clumsy. So to give padding give id to panel and create a class in CSS with name of that id. See the example below.


#myPanelObj td{
    padding:5px;
},

4) Use renderer to format data in ExtJs grid cell.

If you want to format your data in grid cell use renderer. For example if you are displaying currency in ExtJs grid and you want to append $ sign to it. 

renderer: function(value, cell, record, rowIndex, colIndex, store)

{

          return value + '$';

}

5) Dynamically add event to ExtJs controls. 

Sometimes it may happen that you have to sue some ExtJs controls and you are not allowed to change the control and you need to add some listeners. Following is the code to add listeners dynamically.

myExtJsObj.on('hide',function(){ 

//function body.

});

6) Add Panel Click event

ExtJs panel does not support click event directly. However using following code you can make clickable panel.

listeners: {

                    render: function(p) {                                                                            

                                          p.getEl().on('click', handleProductPanelClick.createDelegate(null, p, true,this.id));

                     }

}

7) Another use of renderer to give style.

You can also use renderer  to give some styles to cells.

renderer: function(value, metaData, r) { 

                  metaData.attr = ' style="color:red;" ';

                  return value;

}

This will assign red color to cell.

That's it for now. I will update this post whenever I will have some more tips.