extjsextjs4extjs4.2

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:

    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