Blog Archive

ExtJs Local Storage Example

How to save user application data in the Browser's Local Storage using ExtJs

HTML5 local and session storage is pretty useful when storing user specific information on the client rather than on the server. The Web Storage is more secure and faster. The data is stored in key/value pairs, so to store more complex JavaScript Objects ExtJs LocalStorageProxy automatically serializes and deserializes data when saving and retrieving it. In this example we have create a store that uses localstorage as proxy to save the information on the client.


ExtJs Local Storage Example ExtJs Local Storage Example

Application HTML source - index.html

<!DOCTYPE html>
<html>
<head>
<title>ExtJs 4 Local Storage Example</title>

<link rel="stylesheet" type="text/css"
 href="extjs-4.0.1/resources/css/ext-all.css">

<script type="text/javascript" src="extjs-4.0.1/ext-all-debug.js"></script>
<script type="text/javascript" src="app.js"></script>

</head>
<body>
 <div id="myExample"></div>
</body>
</html>

Application JavaSript source - app.js

Ext.Loader.setConfig({ 
 enabled: true 
 });

Ext.application({
    
 name: 'myApp',
 appFolder: 'app',
    
    controllers: [
                  'ItemMaster'
              ],

    launch: function() {
 Ext.create('Ext.container.Container', {
         renderTo: 'myExample',
         height: 250,
            width: 500,
            margin: '5 5 5 5 ',
         layout: 'fit',
            items: [
                {
                 xtype: 'itemList'
                }
            ]
        });
    }
}); 

Product Model Representation - Product.js

Ext.define('myApp.model.Product', {
 extend: 'Ext.data.Model',
 fields: [
          'itemNumber',
          'description',
          'category',
          'price',
          ]
});

Store proxy set to Local Storage - Products.js

Ext.define('myApp.store.Products', {
    extend: 'Ext.data.Store',
    model: 'myApp.model.Product',
    autoLoad: true,
    proxy: {
     //use sessionstorage if need to save data for that
     //specific session only
     type: 'localstorage',
        id  : 'myProxyKey'
    }

});

Grid to display List of Products - ItemList.js

Ext.define('myApp.view.ItemList' ,{
    extend: 'Ext.grid.Panel',
    alias : 'widget.itemList',
    title : 'List of my Store Products',
    store : 'Products',
    dockedItems: [{
        xtype: 'pagingtoolbar',
        store : 'Products',  
        dock: 'bottom',
        displayInfo: true,
        items: [
                { 
                 xtype: 'tbseparator' 
                },
                {
                    xtype : 'button',
                    text: 'Add Product',
                    action: 'add'
          }
        ]
    }],
    
    initComponent: function() {
        
     this.columns = [
            {
             header: 'Item Number',  
             dataIndex: 'itemNumber',  
             flex: 1
            },
            {
             header: 'Description', 
             dataIndex: 'description', 
             flex: 2
            },
            {
             header: 'Category',  
             dataIndex: 'category',  
             flex: 1
            },
            {
             header: 'Price', 
             dataIndex: 'price', 
             flex: 1
            }
        ];

        this.callParent(arguments);
    }
});

Product Information Add/Edit window - ItemEdit.js

Ext.define('myApp.view.ItemEdit', {
    extend: 'Ext.window.Window',
    alias : 'widget.itemEdit',

    title : 'Product Maintenance',
    layout: 'fit',
    autoShow: true,

    initComponent: function() {
        this.items = [
            {
                xtype: 'form',
                items: [
                    {
                        xtype: 'textfield',
                        name : 'itemNumber',
                        fieldLabel: 'Item Number',
                        allowBlank: false,
                        msgTarget: 'side'
                    },
                    {
                        xtype: 'textfield',
                        name : 'description',
                        fieldLabel: 'Description',
                        allowBlank: false,
                        msgTarget: 'side'
                    },
                    {
                        xtype: 'combobox',
                        name : 'category',
                        fieldLabel: 'Select Category',
                        store: ["Electronics","Software","Gaming"],
                        queryMode: 'local',
                        value: 'Electronics'
                    },
                    {
                        xtype: 'numberfield',
                        fieldLabel: 'Price',
                        minValue: 0.01,
                        maxValue: 99.99,
                        value: 9.99,
                        name: 'price'
                    }
                ]
            }
        ];

        this.buttons = [
            {
                text: 'Save',
                action: 'save'
            },
            {
                text: 'Cancel',
                scope: this,
                handler: this.close
            }
        ];

        this.callParent(arguments);
    }
});

Application controller source - ItemMaster.js

Ext.define('myApp.controller.ItemMaster', {
   extend : 'Ext.app.Controller',

   stores : ['Products'],
   models : ['Product'],
   views : ['ItemList', 'ItemEdit'],

   init : function() {
    this.control({
       'container > panel' : {
        render : this.onPanelRendered
       },
       'itemList' : {
        itemdblclick : this.editItem
       },
       'itemList button[action=add]' : {
        click : this.addItem
       },
       'itemEdit button[action=save]' : {
        click : this.updateItem
       }
      });
   },

   onPanelRendered : function() {
    //console.log('The panel was rendered');
   },

   editItem : function(grid, record) {
    var view = Ext.widget('itemEdit');
    view.down('form').loadRecord(record);
   },

   updateItem : function(button) {
    var win = button.up('window');
    var form = win.down('form').getForm();
    //check of the form has any errors
    if (form.isValid()) {
     //get the record 
     var record = form.getRecord();
     //get the form values
     var values = form.getValues();
     //if a new record
     if(!record){
      var newRecord = new myApp.model.Product(values);
      this.getProductsStore().add(newRecord);
     }
     //existing record
     else {
      record.set(values);
     }
     win.close();
     //save the data to the Web local Storage
     this.getProductsStore().sync();
    }
   },

   addItem : function(button) {
    var view = Ext.widget('itemEdit');
   }
  });

References


5 comments :

  1. nice example.
    one question?
    how to draw a simple bar chart using data from this grid

    thanks

    ReplyDelete
    Replies
    1. I haven't done a Bar Chart yet but you can look at the Ext chart libraries for that. Not sure if there is one for Sencha Touch.

      Delete
  2. I couldn't get anything to work in the above code. Not even myExample came up on the screen.

    I am trying to learn HTML5 localStorage so that I can open another page that displays the persons first name and last name after completing a form.

    I don't think my computer can take API. I tried both of them and neither one worked.

    ReplyDelete
  3. by the way the Click here DEM
    O doesn't work

    ReplyDelete
  4. Puedo descargar el código fuente ???
    Pues he tratado y hacerlo correr y no he podido.

    ReplyDelete