离线状态下的Sencha touch应用

Question

My app is almost completed with sencha touch2.3, now I want to make it working in offline mode.

I need to load lot of data and images from my server application, It's working fine in online mode.

Problems I need to solve and what I have done

1. Need to store data in websql (using sql proxy) when there is a network.

I did this by.. if there is a network,I am loading online store and adding all the record to offline store.

Ext.getStore('foodGroup').load({
    callback: function(records, operation, success) {
        var offFoodGrup = Ext.getStore('offFoodGroup');
        offFoodGrup.add(records);
        offFoodGrup.sync();
        offFoodGrup.load();
      }
    },
    scope: this
});

2. I need to update the offline data if needed, I tried but it's not working. It adds duplicate data.

Ext.getStore('foodGroup').load({
    callback: function(records, operation, success) {
        var offFoodGrup = Ext.getStore('offFoodGroup');
        if(records.length != (localStorage.offFoodGroup || 0)){
            offFoodGrup.removeAll();
            offFoodGrup.sync();
            offFoodGrup.load({
                callback: function(offRecords, operation, success) {
                    offFoodGrup.add(records);
                    offFoodGrup.sync();
                    offFoodGrup.load();
                    localStorage.offFoodGroup = offFoodGrup.getAllCount();
                },
                scope: this
            });
        }
    },
    scope: this
});

3. I need to show lot of images offline, so I though converting image url to base64 string may solve my problem. How can I do this in following code.

Ext.define('MyAPP.view.PhotoContainer', {
    extend: 'Ext.Container',  
    xtype : 'photoContainer',
    config:{            
        tpl: Ext.create('Ext.XTemplate',
                        '<ul class="foodList">',
                            '<tpl for=".">',
                            '<li class="foodContainer" code="{code}">',
                            '<img class="food" src="'+localStorage.httpServerPrefix+'food/showImage/{code}" alt="{name}"/>',
                            '<p code="{code}" class="foodnamestyle">{[this.getpreferedlanguage(values)]}</p>',
                            '</li>',
                            '</tpl>',
                        '</ul>'
        }),
        store : 'FoodStore'
    }
});

Answer 1

It would be helpful to see your code for the FoodGroup model and online and offline stores if thats ok.

With the image in base64 format just use a data url like this:

<img src="data:image/png;base64,{Your Base64 Image Data}"/>

Hope that helps, and if you can post your models and stores I might be able to help with that.

Thanks, Tristan