Ext4.1 Grid 分頁查詢

最近用Ext4.1自己做了做項目的練習：把一些知識點，在這裏記錄下來了！

上面一個form表單，用作添加用戶信息，包含了一些驗證技巧。下面是一個帶查詢參數的分頁Grid。

/**預加載的組件**/
Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.util.*',
    'Ext.toolbar.Paging',
    'Ext.ModelManager',
    'Ext.tip.QuickTipManager',
    'Ext.layout.container.Border'
]);

Ext.onReady(function(){

	Ext.Ajax.timeout = 60000; // 60秒
	
	var pageSize = 10;
	
	//自定義正則表達式驗證
	Ext.apply(Ext.form.VTypes,{
  		phonecheck : function(val) {
  			return /(^[1][358][0-9]{9}$)/.test(val);
 		},
		phonecheckText : "號碼不匹配!"
	},{
		usercheck : function(val) {
			//var reg = /(^[1][358][0-9]{9}$)/;
			//if(reg.test(val)==false){
			//	return false;
			//}
  			return /^[a-z]+$/.test(val);
 		},
		usercheckText : "格式不正確，只接受小寫字母！"
	});
	
	var form = Ext.create('Ext.form.Panel', {
		id:'userForm',
		title:'添加系統用戶',
        layout: 'column',
        defaultType: 'textfield',
        width: '100%',
	    height: 140,
	    bodyStyle: 'padding:5px',
	    animCollapse:true,
	    region : 'north',
	    collapsible:true,
        border: true,
        frame: true,
        plan: true,
        items: [{
	        columnWidth: .3,
	        id:'userId',
	        name:'userId',
	        fieldLabel: '用戶編號',
            fieldWidth: 30,
            labelStyle : "text-align:right;width:30;padding-right:10px;",
            blankText: '請輸入用戶編號',
            allowBlank: false,
            maxLength:18,
            minLength:5,
            vtype:'usercheck'
	    },{
	    	id:'userName',
	        name:'userName',
	        fieldLabel: '用戶姓名',
            fieldWidth: 30,
            labelStyle : "text-align:right;width:30;padding-right:10px;",
            blankText: '請輸入用戶名',
            allowBlank: false,
            maxLength:18,
            minLength:5,
	        columnWidth: .3
	    },{
	    	id:'password',
	        name:'password',
	        fieldLabel: '密碼',
            fieldWidth: 30,
            inputType:'password',
            labelStyle : "text-align:right;width:30;padding-right:10px;",
            blankText: '請輸入密碼',
            allowBlank: false,
	        columnWidth: .3
	    },{
	    	id:'userMail',
	        name:'userMail',
	        fieldLabel: '電子郵箱',
            fieldWidth: 30,
            labelStyle : "text-align:right;width:30;padding-right:10px;",
            blankText: '請輸入電子郵箱',
            allowBlank: false,
            vtype: 'email',
            style: {
	            marginTop: '10px'
	        },
	        columnWidth: .3
	    },{
	    	id:'phoneno',
	        name:'phoneno',
	        fieldLabel: '手機號',
            fieldWidth: 30,
            labelStyle : "text-align:right;width:30;padding-right:10px;",
            blankText: '請輸入手機號',
            allowBlank: false,
            vtype:'phonecheck',
            style: {
	            marginTop: '10px'
	        },
	        columnWidth: .3
	    },{
	    	id:'remark',
	        name:'remark',
	        fieldLabel: '備註信息',
            fieldWidth: 30,
            labelStyle : "text-align:right;width:30;padding-right:10px;",
            blankText: '請輸入備註信息',
            allowBlank: true,
            style: {
	            marginTop: '10px'
	        },
	        columnWidth: .3
	    }],
        buttons: ['->', {
            text: '添加用戶',
            iconCls: 'icon-add',
            formBind: true,
			handler:function(){
				var form = Ext.getCmp('userForm').getForm();
				if(form.isValid()){
					form.submit({
						url: '/mymis/system/userinfo/addUserInfo.action',
	                    method:'post',
						waitTitle: "請稍候",  
						waitMsg : '提交數據，請稍候...', 
						success: function(form, action) {
	                    	Ext.Msg.alert('Success', '保存成功!');
	                    	var flag = action.result.reason;
	                     	if(flag == "exists"){
								Ext.Msg.alert('警告', '系統中已存該用戶編號，請重新輸入！');
	                     	}else{
	                     		Ext.Msg.alert('提示', '用戶信息成功添加!');
								var grid = Ext.getCmp("myGrid");
				   	            var store = grid.getStore();
				   	            store.load({ params: { start: 0, limit: pageSize} });
								grid.reconfigure();
	                     	}
	                 	},
	                  	failure: function(form, action) {
	                    	Ext.Msg.alert('錯誤', '用戶信息添加失敗，請聯繫管理員！');
	                  	}
					});
        		}
			}
		},'-',{
			text: '重  置',
            iconCls: 'icon-reset',
            handler:function(){
            	Ext.getCmp('userForm').getForm().reset();
            }
        }]
    });
    
    /**grid**/
	Ext.define('MsgList', {
        extend: 'Ext.data.Model',
        fields: [
            {name: 'USER_ID',  type: 'string'},
            {name: 'USER_NAME',  type: 'string'},
            {name: 'USER_MAIL',  type: 'string'},
            {name: 'PHONE_NO',  type: 'string'}
        ],
    });
    
    var myStore = Ext.create('Ext.data.Store', {
    	id:'myStore',
	    model: 'MsgList',
	    pageSize:pageSize,
	    autoLoad: true,
        remoteSort: true,
	    proxy: {
	        type: 'ajax',
	        url : '/mymis/system/userinfo/queryUserInfo.action',
	        reader: {
	            type: 'json',
				root: 'rows',
				totalProperty: 'total'
	        },
	        simpleSortMode: true
	    },
	});
	
	var titleBar = Ext.create('Ext.toolbar.Toolbar', {
        renderTo: Ext.getBody(),
        width : 600,
        layout: {
            overflowHandler: 'Menu'
        },
        items: [{
        	xtype:'textfield',
        	id:'searchMsg',
        	name: 'searchMsg',
	        fieldLabel: '請輸入查詢條件',
	        allowBlank: true
        },'-',{
        	xtype:'button',
        	text:'查詢',
        	iconCls: 'icon-search-form',
        	handler: function(){
				var txtSearch = Ext.String.trim(Ext.getCmp("searchMsg").getValue());
				var grid = Ext.getCmp("myGrid");
   	            var store = grid.getStore();
   	            //var pagingTB = Ext.getCmp("pagingBT");
   	            store.load({ params: { start: 0, limit: pageSize,searchMsg: txtSearch} });
				grid.reconfigure();
				//alert(pagingTB);
				//pagingTB.doRefresh();
			}
        }]
    });
    
	var grid = Ext.create('Ext.grid.Panel', {
		id:'myGrid',
		tbar:titleBar,
	    store: myStore,
	    frame: true,
	    region:'center',
	    border: true,
	    split: true,
	    loadMask:{msg:"數據加載中，請稍等..."},
	    //collapsible: true,
	    //autoHeight : true,
	    columns: [
	        { header: '編號', dataIndex: 'USER_ID', flex: 2 },
	        { header: '姓名', dataIndex: 'USER_NAME', flex: 6 },
	        { header: '郵箱', dataIndex: 'USER_MAIL', flex: 3 },
	        { header: '手機號', dataIndex: 'PHONE_NO', flex: 3 }
	    ],
	    //features: [{ftype:'grouping'}],
	    width: '100%',
	   	height: Ext.getBody().getHeight() - 140,
	    //loadMask: true,
	    bbar: Ext.create('Ext.PagingToolbar', {
	    	id:'pagingBT',
            store: myStore,
            displayInfo: true,
            displayMsg: '顯示 第 {0} - {1} 條記錄 一共 {2} 條記錄',
            emptyMsg: "沒有一第記錄顯示"
        })
	});
	
	Ext.create('Ext.container.Viewport',{
		layout : 'border',
		items : [form,grid]
	});
	//帶自定義參數的分頁
	myStore.on('beforeload', function (store, options) {  
   		var searchMsg = Ext.getCmp('searchMsg').getValue();
    	Ext.apply(store.proxy.extraParams, {searchMsg: searchMsg});
    });
	myStore.load({ params: { start: 0, limit: pageSize} });
});

添加用戶的Form表單提交Action：

/*
	 * 添加用戶
	 */
	public String addUserInfo() throws IOException{
		UserInfo user = new UserInfo();
		user.setUser_id(userId);
		user.setUser_name(userName);
		user.setUser_pass(password);
		user.setUser_mail(userMail);
		user.setPhone_no(phoneno);
		user.setRemark(remark);
		//驗證是否在重名的用戶
		String result = userInfoService.addUserInfo(user);
		String msg = "{\"success\":\"true\",\"reason\":\""+result+"\"}";
		writeToResponse(msg);
		return NONE;
	}

分頁的Grid，表單Action：

/*
	 * 分頁查詢用戶基本信息
	 */
	public String queryUserInfo() throws IOException{
		String nowPage = getRequest().getParameter("start");
		String pageSize = getRequest().getParameter("limit");
		String searchMsg = getRequest().getParameter("searchMsg");
		Map<String,Object> map = userInfoService.queryUserInfo(nowPage, pageSize, searchMsg);
		int total = Integer.parseInt(String.valueOf(map.get("total")));
		List<Map<String,Object>> list = (List<Map<String, Object>>) map.get("list");
		JSONArray jsonArray = JSONArray.fromObject(list);
		String rows = jsonArray.toString();
		String result = "{\"success\":true," + "\"total\":" + total + ",\"rows\":" + rows + "}";
		writeToResponse(result);
		return NONE;
	}