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

No comments:

Post a Comment

NO JUNK, Please try to keep this clean and related to the topic at hand.
Comments are for users to ask questions, collaborate or improve on existing.