Skip to main content

Debugging common errors in ExtJs

If you check ExtJs form, you will find some issues commonly faced by developers. I have seen people spending hours to solve these issues without any clue.
Here is the list of few errors and expected root cause. Hope it will help someone. 

 

this.addEvents is not a function

Check instantiation of the class. Most probably you forgot to write “new” keyword while creating a class object.

 

namespace.MyClass is not a constructor

Check for typo in class definition or class instantiation.

Did you forget to include the js file in html page or in jsb configuration?

 

this.el is undefined / this.el is null

In ExtJs “el” variable hold the reference of DOM element. And DOM element only initialize, when UI render correctly on web browser. If you are getting this error,  then their is major chances of accessing “el” variable before UI component layout or render properly.

 

Component is appearing as gray out or it is hanging somewhere else

It can happen because of many other issue, but major reason is same id of two component. To resolve this issue, just use diff id for each component.

 

 

Some quick FAQ links

Grid FAQ

Form FAQ

TabPanel FAQ

Layout FAQ

Template FAQ

 

For more learning resources, you must go through highly recommended “Learn ExtJs” page. 


Comments

Popular posts from this blog

ERROR: Ignored call to 'alert()'. The document is sandboxed, and the 'allow-modals' keyword is not set.

Recently I found this issue while writing code snippet in "JSFiddle". And after searching, found this was happening because of new feature added in "Chrome 46+". But at the same time Chrome doesn't have support for "allow-modals" property in "sandbox" attribute.

Chromium issue for above behavior:
https://codereview.chromium.org/1126253007

To make it work you have to add "allow-scripts allow-modals" in "sandbox" attribute, and use "window.alert" instead of "alert".



<!-- Sandbox frame will execute javascript and show modal dialogs --> <iframe sandbox="allow-scripts allow-modals" src="iframe.html"> </iframe>


Feature added: Block modal dialog inside a sandboxed iframe.
Link: https://www.chromestatus.com/feature/4747009953103872

Feature working Demo page:
https://googlechrome.github.io/samples/block-modal-dialogs-sandboxed-iframe/index.html



JavaScript [ExtJs3]: EditorGridPanel Read-Only (dynamically)

Many time we face the scenerio where we have to make the editor grid read-only dynamically.


Ext.override(Ext.ux.grid.CheckColumn, { editable: true, onMouseDown: function (e, t) { if (Ext.fly(t).hasClass(this.createId())) { e.stopEvent(); var me = this, grid = me.grid, view = grid.getView(), index = view.findRowIndex(t), colindex = view.findCellIndex(t), record = grid.store.getAt(index); if (!grid.isReadOnly && grid.colModel.isCellEditable(colindex, index)) { record.set(me.dataIndex, !record.data[me.dataIndex]); } } } }); var grid = new Ext.grid.EditorGridPanel({ ... isReadOnly: true, //set to flag to make check column readonly ... }); //to make other column readonly grid.on('beforeedit', function () { return false; });

JavaScript [ExtJs3]: Total “Record” count in filtered store

There is two way to get record count from the Store
store.getTotalCount() This function depend on server response value. For accuracy of the value, property shell if return by the server.

Property name for the diff. reader:
totalProperty for JsonReader, totalRecords for XmlReaderstore.getCount() Will return you the number of record from the store.
Or if you have filter on the store, it will give you the number of filtered record.
But if you want to get the total number of record regardless filtering, Then it will be like this

var totalRecords = store.snapshot ? store.snapshot.length : store.getCount();
“snapshot” is the variable in “Store” which hold the actual data in case if you have applied a filter.