store synchronous load

[juanb]

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

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

  
customRenderer=function(){
         return value+' :: '+optionsStore.findRecord('idop',value).data.title;
}

and the renderer without error (but doesn't show propper value)

customRenderer=function(){
if(!optionsStore.loading){
            return value+' :: '+optionsStore.findRecord('idop',value).data.title;
        } else {
            return value;
        }
}

[edspencer]

Hang on - you're saying a basic PropertyGrid loaded asynchronously with a Store doesn't render properly?

[juanb]

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:

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

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 ?

[ssamayoa]

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:

var dialog = Ext.widget("someDialog");
var combo = dialog.down("[name=someCombo]");
var store = combo.store;
store.load(function () {
    dialog.show();
}); 

Hope this helps.

[MHjerpe]

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 ?

[MHjerpe]

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..

[MHjerpe]

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)..

[juanb]

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.

[ssamayoa]

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:

		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.

[MHjerpe]

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

    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

            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 "); 
                
                }
            });