1. #1
    Sencha User
    Join Date
    Mar 2011
    Posts
    32
    Vote Rating
    1
    preyz is on a distinguished road

      1  

    Default Cookie Plugin for Sencha Touch (using LocalStorage)

    Cookie Plugin for Sencha Touch (using LocalStorage)


    It's time for me to give a little back to the community. I've created this Plugin to provide cookie-like functionality in Sencha Touch.

    HTML Code:
    /*
    // Usage (for example in your application controller):
    
    // Initialize
    app.cookie = new Ext.util.LocalStorageCookie();
    
    // Initialize with config
    app.cookie = new Ext.util.LocalStorageCookie({
    	proxyId: 'com.mydomain.cookies',
    });
    
    // Set a value
    app.cookie.set('some_setting', 'some_value');
    
    // Get a value
    app.cookie.get('some_setting');
    
    */
    Ext.util.LocalStorageCookie = Ext.extend(Object, {
      
      proxyId: 'com.domain.cookies',
      
      constructor: function(config) {
        
        this.config = Ext.apply(this, config);
        
        // Create the cookie model
        Ext.regModel('LocalStorageCookie', {
          fields: [
            'id',
            'key',
            'value',
          ],
          proxy: {
            type: 'localstorage',
            id: this.proxyId,
          }
        });
        // Create the cookie store 
        this.store = new Ext.data.Store({
          model: "LocalStorageCookie",
        });    
        this.store.load();
      },
      
      // Get function
      get: function(key) {
        var indexOfRecord = this.store.find('key', key);
        if (indexOfRecord == -1) {
          return indexOfRecord;
        }
        else {
          var record = this.store.getAt(indexOfRecord);
          return record.get('value');
        }
      },
      
      // Set function
      set: function(key, value) {
        var indexOfRecord = this.store.find('key', key);
        if (indexOfRecord == -1) {
          var record = Ext.ModelMgr.create({key:key, value:value}, 'LocalStorageCookie');
        }
        else {
          var record = this.store.getAt(indexOfRecord);
          record.set('value', value);
        }  
        return record.save();
      },  
    });
    The plugin uses local storage to save it's data. Unfortunately I couldn't use the id-field directly for the key value, which made the get/set methods slightly more complicated than necessary. The reason can be found in this bug-report: http://www.sencha.com/forum/showthre...d-doesn-t-work

    Besides the id-field problem with local storage, I am new to developing Sencha Touch plugins. So any feedback with regards to code structure, naming convention etc. is much appreciated.

  2. #2
    Sencha User
    Join Date
    Mar 2011
    Location
    Shanghai
    Posts
    71
    Vote Rating
    0
    perry_jia is on a distinguished road

      0  

    Default


    great, thank you

  3. #3
    Sencha User
    Join Date
    Feb 2012
    Posts
    73
    Vote Rating
    1
    elad101 is on a distinguished road

      0  

    Default


    Hi,
    What should I put in proxyId: "com.mydomain.cookies" ?
    I tried proxyId:'com.http://secure.staging-first-services-games.com.cookies'
    But It didn't work out..
    Thanks,

  4. #4
    Sencha User
    Join Date
    Sep 2007
    Posts
    46
    Vote Rating
    1
    kavih7 is on a distinguished road

      1  

    Default Updates

    Updates


    Hi preyz. Thanks for your plugin, works great! I've tightened things up a bit and also added support for removing items from the local storage. Here's what I've got with my changes in red:

    Code:
    /*
    // Usage (for example in your application controller):
    
    // Initialize
    app.cookie = new Ext.util.LocalStorageCookie();
    
    // Initialize with config
    app.cookie = new Ext.util.LocalStorageCookie({
    	proxyId: 'com.mydomain.cookies',
    });
    
    // Set a value
    app.cookie.set('some_setting', 'some_value');
    
    // Get a value
    app.cookie.get('some_setting');
    
    */
    Ext.util.LocalStorageCookie = Ext.extend(Object, {
      
      proxyId: 'com.domain.cookies',
      
      constructor: function(config) {
        
        this.config = Ext.apply(this, config);
        
        // Create the cookie model
        Ext.regModel('LocalStorageCookie', {
          fields: [
            'id',
            'key',
            'value',
          ],
          proxy: {
            type: 'localstorage',
            id: this.proxyId,
          }
        });
        // Create the cookie store 
        this.store = new Ext.data.Store({
          model: "LocalStorageCookie",
        });    
        this.store.load();
      },
      
      // Get function
      get: function(key) {
        var indexOfRecord = this.store.find('key', key, 0, false, true, true); //<-- Forcing exact matching
        if (indexOfRecord == -1) {
          return null; //<-- returning null, since "-1" may be a valid and expected value from the store?
        }
        else {
          var record = this.store.getAt(indexOfRecord);
          return record.get('value');
        }
      },
      
      // Set function
      set: function(key, value) {
        var indexOfRecord = this.store.find('key', key, 0, false, true, true); //<-- Forcing exact matching
        if (indexOfRecord == -1) {
          var record = Ext.ModelMgr.create({key:key, value:value}, 'LocalStorageCookie');
        }
        else {
          var record = this.store.getAt(indexOfRecord);
          record.set('value', value);
          this.store.sync(); //<-- Syncing for good measure, may not be necessary
        }  
        return record.save();
      },
    
      //Added functionality to remove cookies from local storage
      del: function(key)
      {
        var indexOfRecord = this.store.find('key', key, 0, false, true, true);
        if (indexOfRecord == -1) {
          return false;
        }
        else {
          var record = this.store.removeAt(indexOfRecord);
          this.store.sync();
          return true;
        }
      }
    });
    Thanks again!
    Kavih Williams
    CEO/Founder - Push Channels & Browser Not Included
    On Twitter

  5. #5
    Sencha User
    Join Date
    Apr 2012
    Posts
    1
    Vote Rating
    0
    jujube is on a distinguished road

      0  

    Default


    I realize this is an incredibly amateurish question, but how exactly do I load this into my application? I seem to be getting errors with both methods I've tried (Ext.Loader & Ext.require), and can't really find any decent documentation referring to loading plugins. Any help much appreciated! Thanks.

  6. #6
    Sencha User
    Join Date
    May 2011
    Location
    Melbourne, Australia
    Posts
    89
    Vote Rating
    7
    Greg Arnott is on a distinguished road

      0  

    Default


    Quote Originally Posted by jujube View Post
    I realize this is an incredibly amateurish question, but how exactly do I load this into my application? I seem to be getting errors with both methods I've tried (Ext.Loader & Ext.require), and can't really find any decent documentation referring to loading plugins. Any help much appreciated! Thanks.
    NB: Sencha Touch 2 Format being used here.

    As this plugin is using "Ex.util" namespace by being defined as "Ext.util.LocalStorageCookie", you need to set that path as a loader config (start of app.js):

    Code:
    //@require @packageOverrides
    Ext.Loader.setConfig({
        paths: {
            'Ext.ux': 'ux'
        }
    });
    
    Ext.application({
        requires: ['Ext.util.LocalStorageCookie', '...other files'],
    This code is then placed in a file named LocalStorageCookie.js, and placed in a directory named util in the root folder of your app.

    Code:
    /app/(MVC folders)
    /util/LocalStorageCookie.js
    /resources/(etc)
    /sdk/ or /touch/ folder
    app.js
    app.json

Similar Threads

  1. Replies: 10
    Last Post: 20 Jan 2012, 10:10 AM
  2. Ext.util.Cookie in Sencha Touch ?
    By gary7au in forum Sencha Touch 1.x: Discussion
    Replies: 4
    Last Post: 21 Nov 2011, 7:35 PM
  3. Use bMap plugin in Sencha Touch??
    By albb in forum Sencha Touch 1.x: Discussion
    Replies: 0
    Last Post: 20 Dec 2010, 2:21 AM
  4. A sencha-touch based theme plugin for WordPress: first working alpha
    By sandro.paganotti in forum Sencha Touch 1.x: Examples and Showcases
    Replies: 4
    Last Post: 4 Sep 2010, 6:15 AM
  5. Sencha touch localstorage
    By ssdesign in forum Sencha Touch 1.x: Discussion
    Replies: 4
    Last Post: 7 Jul 2010, 9:30 AM

Thread Participants: 5