title: Sencha touch app in offline
body: <p>My app is almost completed with sencha touch2.3, now I want to make it working in offline mode.</p>
  
  <p>I need to load lot of data and images from my server application, It's working fine in online mode.</p>
  
  <blockquote>
    <p><strong>Problems I need to solve and what I have done</strong></p>
  </blockquote>
  
  <p><em><strong>1. Need to store data in websql (using sql proxy) when there is a network.</em></strong></p>
  
  <p>I did this by.. if there is a network,I am loading online store and adding all the record to offline store.</p>
  
  <pre><code>Ext.getStore('foodGroup').load({
      callback: function(records, operation, success) {
          var offFoodGrup = Ext.getStore('offFoodGroup');
          offFoodGrup.add(records);
          offFoodGrup.sync();
          offFoodGrup.load();
        }
      },
      scope: this
  });
  </code></pre>
  
  <p><em><strong>2. I need to update the offline data if needed, I tried but it's not working. It adds duplicate data.</em></strong></p>
  
  <pre><code>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
  });
  </code></pre>
  
  <p><em><strong>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.</em></strong></p>
  
  <pre><code>Ext.define('MyAPP.view.PhotoContainer', {
      extend: 'Ext.Container',  
      xtype : 'photoContainer',
      config:{            
          tpl: Ext.create('Ext.XTemplate',
                          '&lt;ul class="foodList"&gt;',
                              '&lt;tpl for="."&gt;',
                              '&lt;li class="foodContainer" code="{code}"&gt;',
                              '&lt;img class="food" src="'+localStorage.httpServerPrefix+'food/showImage/{code}" alt="{name}"/&gt;',
                              '&lt;p code="{code}" class="foodnamestyle"&gt;{[this.getpreferedlanguage(values)]}&lt;/p&gt;',
                              '&lt;/li&gt;',
                              '&lt;/tpl&gt;',
                          '&lt;/ul&gt;'
          }),
          store : 'FoodStore'
      }
  });
  </code></pre>