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.
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.