Simple MVC Form/Grid Combination

An basic extjs app using model to save to localstorage.

by Leonardo Trimarchi

HTML

<link rel="stylesheet" href="http://cdn.sencha.io/ext-4.1.1-gpl/resources/css/ext-all.css">

CSS

.add{
  background: url('http://www.famfamfam.com/lab/icons/silk/icons/add.png') no-repeat; 
}

.delete{
  background: url('http://www.famfamfam.com/lab/icons/silk/icons/delete.png') no-repeat; 
}

JavaScript

Ext.define('MyApp.model.User',{
	extend: 'Ext.data.Model',
	fields: ['name', 'email', 'phone'],
    proxy: {
        type: 'localstorage',
        id  : 'simpson-Users'
    }
});

Ext.define('MyApp.store.Users',{
	extend: 'Ext.data.Store',
    model: 'MyApp.model.User',
    autoLoad: true
});

Ext.define('MyApp.controller.Users', {
    extend: 'Ext.app.Controller',

    refs: [
        {
            ref: 'UserGrid',
            selector: 'UserGrid'
        },
        {
            ref: 'DelUserBtn',
            selector: 'UserGrid button[action=deleteUser]'
        }

    ],

    init: function() {
        this.control({
            'UserGrid': {
                itemdblclick: this.onUserGridItemDblClick,
                selectionchange: this.onUserGridSelectionChange
            },
            'UserGrid button[action=addUser]': {
            	click: this.onAddUserClick
            },
            'UserGrid button[action=deleteUser]': {
            	click: this.onDelUserClick
            },
            'UserForm button[action=saveUser]': {
            	click: this.onSaveUserClick
            }
        });
    },
    onDelUserClick: function(button){
    	var grid = button.up('grid'),
    		selection  = grid.getSelectionModel().getSelection();

    	Ext.Array.each(selection, function(model, index) {
		    model.destroy();
		});

    	grid.store.load();
    },

    onUserGridSelectionChange: function(grid, selected){
    	this.getDelUserBtn().setDisabled(selected.length === 0);
    },

    onUserGridItemDblClick: function(grid, record, item) {
    	this.showUserForm(record);
    },

    onAddUserClick: function(){
    	var newUser = Ext.create(MyApp.model.User);
    	
    	this.showUserForm(newUser);
    },

    showUserForm: function(model){
    	var userWin = Ext.create('MyApp.view.UserForm'),
    		form = userWin.down('form');

    	form.loadRecord(model);

    	userWin.show();
    },

    onSaveUserClick: function(button){
    	var form = button.up('form'),
   ...