View Full Version : How to add load mask to Combo?

20 Feb 2011, 11:22 PM

I am using mode : 'local' for combo in a grid and making an AJAX call in beforestartedit.

I need to add a "Loading mask" to combo till AJAX call completes. I tried



combo.el.mask('loading', 'x-mask-loading');

when I inspected combo object I could not find "body", otherwise I could have replaced that with

<div class="loading-indicator">Loading...</div>

Let me know a way to get the loading icon and the message in the combo.


21 Feb 2011, 5:54 AM
Can't you change your code so it uses mode:'remote'?

(and delete lastQuery to force reloading)

21 Feb 2011, 6:54 AM

21 Feb 2011, 6:56 AM
No, I can't use 'remote', I am sharing the data with few more components. I tried CSS, but could not get something when we use 'remote'.

Any other ideas?

21 Feb 2011, 6:58 AM
I still think you should be using mode:'remote', but if you insist, you should mask both the 'wrap' and the 'list' and not the 'el' and you'll need some extra css to make it look good.

22 Feb 2011, 4:15 AM
Thanks Suresh and Condor,

As I am new to ExtJS, I am unable to look into more options.

I looked into ext-all-debug-w-comments.js, there they have used,

me.indicatorText = '<div class="loading-indicator">'+o.indicatorText+"</div>";
if(me.indicatorText) {
Ext.getDom(o.el).innerHTML = me.indicatorText;

I accessed the innerHTML and inserted the code '<div class="loading-indicator">Loading...<div>';

But its of no use. Nothing was appearing on the screen. Give me some hints to continue further...

22 Feb 2011, 11:29 PM
Any sample code or ideas?

23 Feb 2011, 4:54 AM
Hope the below code will solve your problem :)

The loading message will appear initially, later it will be overwritten with the data you are loading.

I am checking whether loadMsg is empty in the template.


editor : new Ext.grid.GridEditor(new Ext.form.ComboBox({
//Don't forget to include 'loadMsg' in fields inside store
tpl : '<tpl for=".">' +
'<tpl if="!Ext.isEmpty(loadMsg)">'+
'<div class="loading-indicator">{loadMsg}</div>'+
'<tpl if="Ext.isEmpty(loadMsg)">'+
'<div class="search-item">' +
'<div><span>{dateFld}</span>{titleFld}</div>' +
mode : 'local', //Happy :) ?

beforestartedit : function(editor) {
var comboList = editor.field, record = editor.record;
"totalCount" : 0,
"rows" : [{"loadMsg":"Loading data please wait..."}]
success : function(response) {

23 Feb 2011, 5:19 AM
Still think you should do this with mode:'remote'!

23 Feb 2011, 5:34 AM
Superb Suresh... It works great... Thanks a lot, almost two days I was struggling for a solution...

Condor: If I delete last query it reloads data every time, I also compared the parameters before deleting the query, but the previous row data was appearing for a second before the original data loaded and this was not accepted by the business. I could not convince them as the data loading itself takes lot of time, they were asking us to store the data locally. I tried so many possiblities before looking at this solution.

Still if there is some solution using mode:'remote' without reloading the data for the second time I will definitely go for it. But it should not show the previous row data even for a second.

23 Feb 2011, 5:42 AM
Yes, it would show the old data for 'queryDelay' msecs (default 250msec).

If you don't want that then you would have to call store.removeAll() in combination with deleting lastQuery (but only if the parameters change).

23 Feb 2011, 6:08 AM
oh... I didn't know about that, no where it is documented I think. I could not get that information in API or when I googled.

Thanks Condor, so nice of you. I will give a try now...