Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: How to add load mask to Combo?

  1. #1
    Touch Premium Member
    Join Date
    Mar 2010
    Posts
    21

    Question How to add load mask to Combo?

    Hi,

    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

    PHP Code:
    combo.emptyText='Loading...' 
    and

    PHP Code:
    combo.el.mask('loading''x-mask-loading');
    and
    combo.el.unmask(); 
    when I inspected combo object I could not find "body", otherwise I could have replaced that with

    Code:
    <div class="loading-indicator">Loading...</div>
    Let me know a way to get the loading icon and the message in the combo.

    Regards,
    Nagaraj

  2. #2
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    Can't you change your code so it uses mode:'remote'?

    (and delete lastQuery to force reloading)

  3. #3
    Touch Premium Member msuresh's Avatar
    Join Date
    Dec 2007
    Location
    Bangalore, India
    Posts
    220

    Default

    Try CSS

  4. #4
    Touch Premium Member
    Join Date
    Mar 2010
    Posts
    21

    Question

    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?

  5. #5
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    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.

  6. #6
    Touch Premium Member
    Join Date
    Mar 2010
    Posts
    21

    Default

    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,

    Code:
    if(!Ext.isEmpty(o.indicatorText)){
          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...

  7. #7
    Touch Premium Member
    Join Date
    Mar 2010
    Posts
    21

    Default

    Any sample code or ideas?

  8. #8
    Touch Premium Member msuresh's Avatar
    Join Date
    Dec 2007
    Location
    Bangalore, India
    Posts
    220

    Default

    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.

    Enjoy

    PHP Code:
    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>'+
            
    '<tpl if="Ext.isEmpty(loadMsg)">'+
            
    '<div class="search-item">' +
            
    '<div><span>{dateFld}</span>{titleFld}</div>' +
        
    '</div></tpl></tpl>',
        ...
        
    mode 'local'//Happy :) ?
    });

    beforestartedit : function(editor) {
                    var 
    comboList editor.fieldrecord editor.record;
        
    comboList.store.loadData({
            
    "totalCount" 0,
            
    "rows" : [{"loadMsg":"Loading data please wait..."}]
        });
        
    Ext.Ajax.request({
            ...
            ...
            },
            
    success : function(response) {
                
    comboList.store.loadData(Ext.decode(response.responseText));
            }
        );


  9. #9
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    Still think you should do this with mode:'remote'!

  10. #10
    Touch Premium Member
    Join Date
    Mar 2010
    Posts
    21

    Default

    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.

Page 1 of 2 12 LastLast

Similar Threads

  1. Load mask not shown on initial load
    By lhanusiak in forum Ext GWT: Discussion
    Replies: 9
    Last Post: 13 Nov 2010, 5:52 AM
  2. Form Load/Submit progress bar / load mask
    By brianm8675309 in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 12 Mar 2010, 4:21 PM
  3. Is there a way to load a img just like a element.load(), with a loading mask
    By craneleeon in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 24 Aug 2007, 5:15 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •