Adding multiple model to a store then calling store.sync does not save all the data

I am building a web application using ExtJS4 and I have a part there where I create multiple models then add them to a store then sync the store. However, upon calling store.sync(), I see a blank database entry.

My code goes as such:

this.mon(uploadDialog, 'uploadcomplete', function(uploadPanel, manager, items, errorCount) {

    var itemCount = items.length;

    for(var i = 0 ; i < itemCount ; i++){
        pathArray.push(items[i].getName());
    }

    console.log('---------- pathArray count = ' + pathArray.length);

    var galleryStore = Ext.getStore('userProfileGallery');
    var userStore = Ext.getStore('userStore');
    var userModel = userStore.first();

    //------------ Iterate through the items, create a model, then add model to the store

    for(var j = 0 ; j < itemCount ; j++){
        var personPhotoModel = Ext.ModelManager.create({
        }, 'myappName.model.userPhoto');

        var currentdate = new Date();

        var uploadDate = currentdate.getDate() + "/" +
            (currentdate.getMonth()+1)  + "/" +
            currentdate.getFullYear();

        var uploadTime = currentdate.getHours() + ":" +
            currentdate.getMinutes() + ":" +
            currentdate.getSeconds();

        personPhotoModel.set("image_path", "gallery/" + pathArray[j]);
        personPhotoModel.set("description", "Gallery Image");
        personPhotoModel.set("upload_date", uploadDate);
        personPhotoModel.set("upload_time", uploadTime);
        personPhotoModel.set("user_id", userModel.get('user_id'));

        galleryStore.add(personPhotoModel);
        console.log('gallery store count = ' + galleryStore.count());

    }

    //---------- sync the store here

    console.log('gallery store count = ' + galleryStore.count());

    galleryStore.sync();

}, this);

What I've tried so far is to only make 1 model by uploading only one file and that works just fine. However, when I add more than 1 model to the store then sync the store, I get a single blank row regardless of how many items I added to the model.

Solution

I don't see directly why your code doesn't work as expected but I see a lot of room for improvements:

Ext.ModelManager.create is deprecated use Ext.create('Your Model', data);
application name and class name start with upper case!
avoid declaring variables in loops (the date isn't gonna change while looping...)
declare date in the creation of the model (quicker) else use record.beginEdit(), record.endEdit() for batch edits. this prevents events from firing every set

Here is what I would make of it:

this.mon(uploadDialog, 'uploadcomplete', function (uploadPanel, manager, items, errorCount) {

    var itemCount = items.length,
        now = new Date(),
        uploadDate = Ext.Date.format(now, 'd/m/Y'),
        uploadTime = Ext.Date.format(now, 'H:i:s'),
        i;

    for (i = 0; i < itemCount; i++) {
        pathArray.push(items[i].getName());
    }

    console.log('---------- pathArray count = ' + pathArray.length);

    var galleryStore = Ext.getStore('userProfileGallery'),
        userStore = Ext.getStore('userStore'),
        user = userStore.first();

    //------------ Iterate through the items, create a model, then add model to the store

    for (i = 0; i < itemCount; i++) {

        galleryStore.add(Ext.create('MyappName.model.UserPhoto', {
            image_path: "gallery/" + pathArray[i],
            description: "Gallery Image",
            upload_date: uploadDate,
            upload_time: uploadTime,
            user_id: user.get('user_id')
        }));

        console.log('gallery store count = ' + galleryStore.count());
    }

    //---------- sync the store here

    console.log('gallery store count = ' + galleryStore.count());

    galleryStore.sync();

}, this);

If this doesn't work your error is not in this piece of code, but in the store, model or backend