[TIP] Using the SQLite store when rapidly changing the data

[murrah]

Hi.

After much hair pulling here: http://www.sencha.com/forum/showthre...519#post561519 ,
Makana kindly pointed out the correct way to accommodate the fact that the SQLite DB in the AIR Adapter is now Asyncronous (previously syncronous). This is particularly relevant if you are making rapid changes to the store. What I found is that when I added multiple records in a loop the store stopped working and the records didnt make it to the database table.

What Makana said was:
***************
Hello Murray,

the problem is the following:
If you use the update save directly after the insert save, the inserts aren't done yet and so within the second save-method the insert records are to be added again (because they still have phantom==true).
Please leave the first save method and only use the second.

That is normal behavior you would also run into if you would try it in a browser (not Air) app since ajax requests to a server-side script are async as well.

There are the following possibilities:
1. Use autoSave: true and do inserts and updates in (async) sequence.

WholeMealCafe.MemberStore.load({
    callback: function (records, options, success) {
        if (success === true) {

            var recArr = []; // array to hold the records to insert together

            for (var i = 0; i < 10; i++) {
                var pk = Ext.uniqueId(true);
                var rec = new WholeMealCafe.memberRec({
                    membId: pk,
                    membParentId: parentId,
                    membCode: 'TEST' + i,
                    membFirstname: '',
                    membLastname: '',
                    membEmail: '',
                    isFolder: false
                }, pk); // it is better to leave pk here...
                rec.phantom = true; // ... and not to set phantom
                recArr.push(rec);
            };

            // set the isFolder field on the parent after the inserts are done
            WholeMealCafe.MemberStore.on('save', function () {
                var memberRec = WholeMealCafe.MemberStore.getById(parentId);
                air.trace('set isFolder for ' + parentId)
                memberRec.set('isFolder', true); // saves automatically
            }, this, {
                single: true
            });

            WholeMealCafe.MemberStore.add(recArr); // add all records at once (save automatically)
        }
    },
    scope: this
}); 

2. and the better way: use autoSave: false and do one save at the end.

Code:

WholeMealCafe.MemberStore.load({
    callback: function (records, options, success) {
        if (success === true) {
            air.trace('store loaded')

            for (var i = 0; i < 10; i++) {
                var pk = Ext.uniqueId(true);
                var rec = new WholeMealCafe.memberRec({
                    membId: pk,
                    membParentId: parentId,
                    membCode: 'TEST' + i,
                    membFirstname: '',
                    membLastname: '',
                    membEmail: '',
                    isFolder: false
                });
                WholeMealCafe.MemberStore.add(rec);
            };

            //WholeMealCafe.MemberStore.save(); // dont do this yet

            // Now set the isFolder field on the parent
            var memberRec = WholeMealCafe.MemberStore.getById(parentId);
            air.trace('set isFolder for ' + parentId)
            memberRec.set('isFolder', true);

            WholeMealCafe.MemberStore.save(); // save all together
        }
    },
    scope: this
}); 

As I said, it's general Ext-ish behavior so I think there's no need to build a workaround for Air apps.

Hope it helps.

makana
***************

And, if, as I did, you also have a form that updates the store, and you set autoSave:false, you need to do something like this to submit the changes to the form data:

eg Your form submit button:

{
    xtype: 'button',
    scope: this,
    handler: this.saveData,
    text: 'Save'
} 

the saveData method. There may be a better way to do this but the main point is that you need to call the store's save() method to get the changes from the store to the database:

, saveData: function () {
    // This seems a bit long winded! Maybe there is a shortcut?
    var idFld = this.getForm().findField('membId').getValue();
    var rec = WholeMealCafe.MemberStore.getById(idFld)
    this.getForm().updateRecord(rec);
    WholeMealCafe.MemberStore.save();
} 

I hope this might help others.

Cheers,
Murray
Cheers,
Murray

[makana]

Please consider, that this is with the 3.3.2 version of the air-adapter.
There are bugs in the current downloadable package regarding this issue.

I'm just waiting for the new build to become available on the download page. Almost 3 weeks now... I cannot do anything...

So slowly, guys But with 3.3.2 it's just like Murray said. Thanks for publishing the tip.

, saveData: function () {
    // This seems a bit long winded! Maybe there is a shortcut?
//    var idFld = this.getForm().findField('membId').getValue();
    // not realy shorter but a bit faster I think. Give the field an itemId and use...
    var idFld = this.getComponent('theItemId').getValue();
    var rec = WholeMealCafe.MemberStore.getById(idFld)
    this.getForm().updateRecord(rec);
    WholeMealCafe.MemberStore.save();
}

... or hold a reference to the current editing record in your form class.