ext4.x之Grid

由于项目原因，一直用EXT作前端，版本是几年前1.x的，用的还算顺手，某日找资料一查版本都4.x了，设计的整体的感觉是变化挺大的，平时最常用的就是 form，grid，翻翻了api照着写了小范例

  Ext.application({
    name: 'HelloExt',
    launch: function() {

		var maxPageSize = 8;
		var windowForm = null;

		var store = Ext.create('Ext.data.Store', {
		    storeId:'simpsonsStore',
		    fields:['id', 'name', 'address', 'sex'],
		    pageSize: maxPageSize,
		    proxy: {
		        type: 'ajax',
		    	url:'../service/jsonService/queryPageRecord', 
		        actionMethods: { read: 'post' },
		        reader: {
		            type: 'json',
		            root: 'data.rows',
		            totalProperty: 'data.total'
		        },
		        listeners: {
			        load : function(ds, records, option) {
						}
			    }
		    },
		    baseParams: {
		    		query : "{}"
		    },
		    listeners: {
		        load : function(ds, records, option) {
				}
		    }
		});

		//数据加载分页算法
		store.on('beforeload', function(ds, options) {

				console.log(options.start + "---" + options.limit)

				if (!options.params) {
					options.params = {};
					options.params.start = options.start;
					options.params.limit = maxPageSize;
				}

				if (!ds.baseParams.query) {
					ds.baseParams.query = "{}";
				}

				ds.baseParams.para = "[" + ds.baseParams.query + ","
						+ options.params.start / options.params.limit
						+ "," + options.params.limit + "]";

			    Ext.apply(ds.proxy.extraParams, { para : ds.baseParams.para });
		});

		store.load({
		    params:{
		        start: 0,
		        limit: maxPageSize
		    }
		});

		//创建grid
		var grid = Ext.create('Ext.grid.Panel', {
		    title: 'MyGrid',
		    store: Ext.data.StoreManager.lookup('simpsonsStore'),
		    columns: [
		        { header: 'id',  dataIndex: 'id' },
		        { header: 'name', dataIndex: 'name', flex: 1 },
		        { header: 'address', dataIndex: 'address', width: 100 },
		        { header: 'sex', dataIndex: 'sex', width: 100 }
		    ],
		    //选择框
		    selModel:Ext.create('Ext.selection.CheckboxModel'),                       
		    //表示可以选择行                       
		    disableSelection: false,                       
		    columnLines: true,                        
		    loadMask: true, 
		    height: 300,
		    width: 500,
		    //分页工具并格式化
		    bbar: Ext.create('Ext.PagingToolbar', { 
                        store: store, 
                        displayInfo: true,
                        beforePageText: '第',
                        afterPageText: '页，共 {0} 页',
                        displayMsg: '显示 {0} - {1} 条，共计 {2} 条', 
                        emptyMsg: "没有数据" 
                    }),
            //Grid上加按钮 
		    dockedItems: [{ 
                        xtype: 'toolbar', 
                        items: [{ 
                            text: '增加', 
                            //iconCls: 'icon-add', 
                            handler: function(){ 
                            	addRec();
                            } 
                        }, '-', { 
                            itemId: 'delete', 
                            text: '删除', 
                            //iconCls: 'icon-delete', 
                            //disabled: true, 
                            handler: function(){

                            	var record = grid.getSelectionModel().getSelection();  
                            	if(record.length == 0){    
	                            	Ext.MessageBox.show({                                                                
		                            	title:"提示",                                                                
		                            	msg:"请先选择您要操作的行!"                                                            
	                            	})                                                           
	                            	return;                                                       
                            	}else{                                                           
	                            	var ids = [];                                                            
	                            	for(var i = 0; i < record.length; i++){                                                                
	                            		ids.push(record[i].get("id"));                                                              
	                            	}                                                           
	                            	Ext.MessageBox.show({title:"所选ID列表", msg:ids});
	                            	delRec(ids);                                                     
                            	}
                            } 
                        }, '-' ,{ 
                            text:'刷新', 
                            handler:function(){ 
                            	store.load();
                            } 
                        }] 
                    }], 
		    renderTo: Ext.getDom('grid')
		});


		function delRec(ids) {
			Ext.Ajax.request({
			    url: '../service/jsonService/delRecordById',
			    params: {
			        para : '[' + Ext.encode(ids) + ']'
			    },
			    success: function(response){
			        var text = response.responseText;
			        store.load();
			    }
			});
		}

		function addRec() {
			windowForm = createWindow().show();
		}

		//创建Form
		function createForm() {
			var addForm = Ext.create('Ext.form.Panel', {
			    title: 'My Form',
			    bodyPadding: 5,
			    width: 400,
			    url: '../service/jsonService/addRecord',
			    method: 'post',
			    layout: 'anchor',
			    defaultType: 'textfield',
			    items: [{
			        fieldLabel: 'name',
			        name: 'name',
			        allowBlank: false
			    },{
			        fieldLabel: 'address',
			        name: 'address',
			        allowBlank: false
			    },{ 
			        //xtype: 'datefield',
			        fieldLabel: 'sex',
			        name: 'sex',
			        allowBlank: false
			    }],
			    buttons: [{
			        text: 'Reset',
			        handler: function() {
			            this.up('form').getForm().reset();
			        }
			    }, {
			        text: 'Submit',
			        formBind: true, //only enabled once the form is valid
			        disabled: true,
			        handler: function() {
			            var form = this.up('form').getForm();
			            if (form.isValid()) {

			            	var param = {
			            		name : form.findField('name').getValue(),
			            		address : form.findField('address').getValue(),
			            		sex : form.findField('sex').getValue()
			            	};

			            	//表单提交
			                form.submit({
					            params: {
							         para : '[' + Ext.encode(param) + ']'
							    },
			                    success: function(form, action) {
			                       	console.log(action.result.success)
			                       	var result = action.result;
			                       	if (result.success) {
			                       		Ext.Msg.alert('信息', '成功!', function() {
			                       			windowForm.destroy();
			                       			store.load();
			                       		});
			                       	}
			                    },
			                    failure: function(form, action) {
			                        Ext.Msg.alert('信息', '失败!');
			                    }
			                });
			            }
			        }
			    }]
			    //渲染
			    //renderTo: Ext.getDom('form')
			});
			return addForm;
		}

		//窗口创建
		function createWindow() {
			var addForm = createForm();
			var window = Ext.create('Ext.window.Window', {
			    title: 'Hello Window',
			    height: 200,
			    width: 420,
			    layout: 'fit',
		    	items: addForm
			});

			return window;
		}

    }
});