Extjs4.2 MVC Grid的CURD简单例子

Grid是第一个要学的，Ext也一样，体验了一把，感觉MVC下用起来还是很爽的啊！
记录一下，免得忘了。
功能很简单，显示用户密码，然后CURD
view在此

Ext.define('PJ.view.UserInfoPanel', {
    extend: 'Ext.panel.Panel',
	alias : 'widget.userinfopanel',	
	store : 'UserInfo',
    layout: {
        type: 'border'
    },
    title: '用户管理',
    initComponent: function() {
        var me = this;
        Ext.applyIf(me, {
        	tbar : [{
        		text : '添加',
        		action : 'add',
        		iconCls : 'add_btn'
        	},{
        		text : '删除',
        		action : 'del',
        		iconCls : 'del_btn'
        	},{
        		text : '保存',
        		action : 'save',
        		iconCls : 'save_btn'
        	}],
            items: [
                {
                    xtype: 'gridpanel',
                    region: 'center',

                    selType: 'rowmodel',
     				plugins: [
        				Ext.create('Ext.grid.plugin.RowEditing', {
        				id : 'rowEditing',	
            			clicksToEdit: 1
        				})
    				],                   

                    store : 'UserInfo',
                    columns: [
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'username',
                            text: '用户名',
                            editor : {
                            	xtype : 'textfield',
                            	allowBlank : false
                            }
                        },
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'password',
                            text: '密码',
                            editor : {
                            	xtype : 'textfield',
                            	allowBlank : false
                            }
                        }
                    ],
                    dockedItems: [{
        				xtype: 'pagingtoolbar',
        				store: 'UserInfo',   
        				dock: 'bottom',
        				displayInfo: true
    				}]
                }
            ]
        });
        me.callParent(arguments);
    }
});

简单的model

Ext.define('PJ.model.UserInfo',{
	extend : 'Ext.data.Model',
	fields : ['username','password']
});

小小的store

Ext.define('PJ.store.UserInfo',{
	extend : 'Ext.data.Store',
	model : 'PJ.model.UserInfo',
	autoLoad : false,
	autoSync : false,
	proxy : {
		type : 'ajax',
		api : {
			read : '/sshe/userAction!userlist.action',
			create : '/sshe/userAction!reg.action',
			update : '/sshe/userAction!changepassword.action',
			destroy : '/sshe/userAction!delUser.action'
		},
        reader: {
        	root : 'obj',
        	type: 'json',
        	successProperty: 'success'
        },
        writer : {
        	type : 'singlepost'
        }
	}	
}); 

最后是核心controller

Ext.define('PJ.controller.UserInfoList',{
	extend : 'Ext.app.Controller',
	views : ['UserInfoPanel'],
	stores : ['UserInfo'],
	models : ['UserInfo'],

	init : function(){
		this.control({
			'userinfopanel>gridpanel':{
				render : this.loadUserInfo
			},
			'userinfopanel>toolbar button[action=add]':{
				click : this.addUser
			},
			'userinfopanel>toolbar button[action=del]':{
				click : this.delUser
			},			
			'userinfopanel>toolbar button[action=save]' : {
				click : this.saveUserInfo
			}
		});
	},

	loadUserInfo : function(obj){
		var store = obj.getStore();
		store.load();
	},

	addUser : function(btn){
		var store = btn.up('panel').down('gridpanel').getStore();
		var r = Ext.create('PJ.model.UserInfo',{
			username : '用户名',
			password : '密码'
		});
		store.insert(0,r);
		var rowEditing = btn.up('panel').down('gridpanel').editingPlugin;
		rowEditing.startEdit(0, 0);
	},

	delUser : function(btn){
		var store = btn.up('panel').down('gridpanel').getStore();
		var grid = btn.up('panel').down('gridpanel');
        var sm = grid.getSelectionModel();
        store.remove(sm.getSelection());
        if (store.getCount() > 0) {
        	sm.select(0);
        }; 
	},

	saveUserInfo : function(btn){
		var store = btn.up('panel').down('gridpanel').getStore();
		store.sync({
			callback : function(store){	          		
                   Ext.Msg.alert('提示',store.proxy.reader.jsonData.msg);		
			}
		});
	}
});

层次分明，结构合理，一目了然，咳咳，当然这个是一次递交一个修改，批量的话还是要修改一下
截图留念 :wink:
[img]http://dl2.iteye.com/upload/attachment/0091/9970/78ddf873-13ee-3882-be0a-7e93ab827a5a.png[/img]