1. #1
    Sencha User juanb's Avatar
    Join Date
    Jun 2011
    Location
    usa
    Posts
    42
    Vote Rating
    1
    juanb is on a distinguished road

      0  

    Default store synchronous load

    store synchronous load


    I know this can be a matter of debate (to make sync or async calls) but here is my scenario:

    I have a property grid, wich have a custom renderer function and a custom editor which is a combobox

    The thing is that by whe the property is created the datastore is still loading and renderer function fails to findRecord because data isn't populated yet

    i've tried async: false everywhere in model,proxy,reader with no success
    i've found 2 workarounds

    1. wait until store.loading==false
    2. check if loading and if loading return plain value instead the text of the combo (next click will render ok)

    Example code below
    Code:
    if(!Ext.getStore('optionsStore')){
        
        Ext.create('Ext.data.Store', {
            id:'optionsStore',
            autoLoad: true,
            model: 'Options',
            async : false,
            proxy: {
                type: 'ajax',
                async : false,
                url: base_url+'dna2/form/get_options',  // url that will load data with respect to start and limit params
                noCache: false,
                reader: {
                    async:false,
                    type: 'json',
                    root: 'rows',
                    totalProperty: 'totalCount'
                }
                
            }  
        });
    }
    and the renderer wich throw the error if data isn't loaded yet

    Code:
      
    customRenderer=function(){
             return value+' :: '+optionsStore.findRecord('idop',value).data.title;
    }
    and the renderer without error (but doesn't show propper value)
    Code:
    customRenderer=function(){
    if(!optionsStore.loading){
                return value+' :: '+optionsStore.findRecord('idop',value).data.title;
            } else {
                return value;
            }
    }

  2. #2
    Sencha - Community Support Team edspencer's Avatar
    Join Date
    Jan 2009
    Location
    Palo Alto, California
    Posts
    1,939
    Vote Rating
    9
    edspencer is a jewel in the rough edspencer is a jewel in the rough edspencer is a jewel in the rough

      0  

    Default


    Hang on - you're saying a basic PropertyGrid loaded asynchronously with a Store doesn't render properly?
    Ext JS Senior Software Architect
    Personal Blog: http://edspencer.net
    Twitter: http://twitter.com/edspencer
    Github: http://github.com/edspencer

  3. #3
    Sencha User juanb's Avatar
    Join Date
    Jun 2011
    Location
    usa
    Posts
    42
    Vote Rating
    1
    juanb is on a distinguished road

      0  

    Default


    no, I'm saying that a propertygrid that loads async with a renderer wich have a store that loads async too is giving me an error
    Here are the steps

    create a store ->loads async
    create comboBox with that store
    create a pgrid with a renderer using combobox
    load data into pgrid from server ->loads async too

    so,if by the time the pgrid is rendering the store.isLoading==true then i got an error from the custom renderer:

    Code:
    return value+' :: '+optionsStore.findRecord('idop',value).data.title;
    because the data from the store hasn't finished yet.

    I've got a workaround thou:
    create the store with autoload:false
    then override global connection object to make the call synchronously async:false
    then reset the global value to async:true
    Code:
    Ext.create('Ext.data.Store', {
            id:'optionsStore',
            autoLoad: false,
            model: 'Options',
            proxy: {
                type: 'ajax',
                url: base_url+'dna2/form/get_options',  // url that will load data with respect to start and limit params
                noCache: false,
                reader: {
                    type: 'json',
                    root: 'rows',
                    totalProperty: 'totalCount'
                }
                
            }
            ,
            listeners:{
                load:function(){
                    
                }
            }
        });
    
        //---set synchronous loading on this one to avoid problems with rendering
        Ext.apply(Ext.data.Connection.prototype, {
            async: false
        });
        Ext.getStore('optionsStore').load();
        //---restore async property to the default value
        Ext.apply(Ext.data.Connection.prototype, {
            async: true
        });
    Is there a way of specifying async:false in the store ?

  4. #4
    Sencha Premium Member
    Join Date
    May 2010
    Location
    Guatemala, Central America
    Posts
    1,323
    Vote Rating
    186
    ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold

      0  

    Default


    I have similar issue but with a dialog which has already value in a combo but because store is loaded async the combo box shows no data so I load the store manually and show the dialog until store's load is complete, like:
    PHP Code:
    var dialog Ext.widget("someDialog");
    var 
    combo dialog.down("[name=someCombo]");
    var 
    store combo.store;
    store.load(function () {
        
    dialog.show();
    }); 
    Hope this helps.
    UI: Sencha Architect 3.x / ExtJS 4 & 5
    Server side: JEE / EJB 3.x / CDI / JPA 2.x/ JAX-RS / JasperReports
    Application Server: Glassfish / WildFly
    Databases: Oracle / DB2 / MySQL / Firebird

    If you like my answer please vote!

  5. #5
    Ext JS Premium Member
    Join Date
    Apr 2011
    Location
    Sweden
    Posts
    89
    Vote Rating
    1
    MHjerpe is on a distinguished road

      0  

    Default


    I have a similiar situation.. that I don't know how to handle.

    Grid... doubleclick bring up a dialog.. with a form.. a Save button to save the changes.
    But when I save I don't want to close the window.

    at Save I update the Record.. witht the data in the form
    Then I do a Sync to update the backend..
    Now as I don't close the window I want the form to have the new record that the Sync got back.
    So after sync I do a findRecord... but here the findRecord function get the old record again.. (that is not synced yet) as findRecord runs before the sync is not finsihed yet.
    and then form.loadRecord() to display in the form..

    I'm doing this in MVC and don't sure how to handle this.. any suggestions? Tell sync() to run synchronously ?

  6. #6
    Ext JS Premium Member
    Join Date
    Apr 2011
    Location
    Sweden
    Posts
    89
    Vote Rating
    1
    MHjerpe is on a distinguished road

      0  

    Default


    Do I really need to find the record again... hmm it should be the same record post ? right.. ?
    Just need to tell the Form.. hey autorespond when the record is changed..

  7. #7
    Ext JS Premium Member
    Join Date
    Apr 2011
    Location
    Sweden
    Posts
    89
    Vote Rating
    1
    MHjerpe is on a distinguished road

      0  

    Default


    Why do I always.. start type in the Forum... (When there is no activity in it anwya (middle in the night in US))

    And later on find a workaround anyway..

    So what i do is.. I listen to the event Write for the store.
    Check if I can find the Window with the Form.. if so..
    I get the values from the form.. to fetch the ID then
    do a findRecord.. and then
    tell the Form to load in the updated record with form.loadRecord(record)..

  8. #8
    Sencha User juanb's Avatar
    Join Date
    Jun 2011
    Location
    usa
    Posts
    42
    Vote Rating
    1
    juanb is on a distinguished road

      0  

    Default


    Two pictures to make the situation clearer
    1st is the process, where you can see why asynchronous load could be a problem.asyncload.jpg
    The natural sequences are: 1,2,3 (which is ok) but could also be 1,3,2 which leave you with an error, beacuse values on the property grid need to rendered with an non existent data from the store wich haven't finish yet.

    So, my solution is to turn off async for connection then load combo then carry on:
    asyncload.jpg

    So now the order is always 2,1,3 which is ok.

  9. #9
    Sencha Premium Member
    Join Date
    May 2010
    Location
    Guatemala, Central America
    Posts
    1,323
    Vote Rating
    186
    ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold

      0  

    Default


    Quote Originally Posted by MHjerpe View Post
    I have a similiar situation.. that I don't know how to handle.
    Grid... doubleclick bring up a dialog.. with a form.. a Save button to save the changes.
    But when I save I don't want to close the window.
    You are almost there but instead to load the record from store use Model, like:

    Code:
    		form.getForm().updateRecord(pago);
    		pago.save({
    			success : function(nuevoPago) {
    				if (cerrar) {
    					pago.commit();
    					win.close();
    				} else {
    					pago.commit();
    					// Cargamos de nuevo
    					form.getForm().loadRecord(nuevoPago);
    					win.down("[action=cancelar]").setText("Cerrar");
    				}
    			},
    			failure : function() {
    				if (cerrar) {
    					win.close();
    				}
    			}
    		});
    "pago" is the model instance I get from store to show in the form. This way your record not only is updated in the store but also in the form.

    I dont have spare time now but as soon as I can I will write a tutorial about this unless Sencha wrote it or enhance the MVC example.

    Regards.
    UI: Sencha Architect 3.x / ExtJS 4 & 5
    Server side: JEE / EJB 3.x / CDI / JPA 2.x/ JAX-RS / JasperReports
    Application Server: Glassfish / WildFly
    Databases: Oracle / DB2 / MySQL / Firebird

    If you like my answer please vote!

  10. #10
    Ext JS Premium Member
    Join Date
    Apr 2011
    Location
    Sweden
    Posts
    89
    Vote Rating
    1
    MHjerpe is on a distinguished road

      0  

    Default


    Thank you for your suggestion..

    Testing your code.. I get errors in Ext.. when doing record.save()
    Can't get value... bla bla indexOf row 5040 , 13
    Code:
        urlAppend : function(url, s) {
            if (!Ext.isEmpty(s)) {
                return url + (url.indexOf('?') === -1 ? '?' : '&') + s;
            }
            return url;
        }
    Dunno why ? I have all url parameters set in the proxy..

    And where in the doc can I see that I can pass succes and failure functions to the save function ?

    my code
    Code:
                record.set(values);
                record.set("avi_PUL_godkand",form.getForm().findField("avi_PUL_godkand").getValue());
                record.set("avi_lok_avis_ansv",form.getForm().findField("avi_lok_avis_ansv").getValue());
      
                console.log("före record.save() "); 
     
    // NY TEST 
      
                record.save({
                    
                    success: function(np)
                    {
                        console.log("record.save : success "); 
                        
                        record.commit();
                        form.getForm().loadRecord(np);
                        
                    }, 
                    failure: function()
                    {
                        console.log("record.save : failure "); 
                    
                    }
                });