ext4.0簡單表格

Ext.require(["Ext.grid.*", "Ext.data.*"]);
Ext.onReady(function() {
    Ext.QuickTips.init();

    Ext.define("MyData", {
        extend : "Ext.data.Model",
        fields : ["id", {
            name : "id",
            mapping : "id"
        }, {
            name : "username",
            mapping : "username"
        }, {
            name : "sex",
            type : "int"
        }, {
            name : "createDate",
            mapping : "createDate",
            type : "date",
            dateFormat : 'Y-m-d H:i:s'
        }, {
            name : "registDate",
            type : "date",
            dateFormat : 'Y-m-d H:i:s',
            mapping : "registDate"
        }]
    });
    var pageSize = 10;
    var store = Ext.create("Ext.data.Store", {
        model : "MyData",
        proxy : {
            type : "ajax",
            url : "admin_infos.do",
            reader : {
                type : "json",
                root : "items"
            }
        },
        autoLoad : true
    });
    var grid = Ext.create("Ext.grid.Panel", {
        store : store,
        selType : 'checkboxmodel',
        selModel : {
            mode : 'id', // or SINGLE, SIMPLE ... review API for
            // Ext.selection.CheckboxModel
            checkOnly : false
        // or false to allow checkbox selection on click anywhere in row
        },
        layout : "fit",
        columns : [{
            text : "用戶名",
            width : 200,
            dataIndex : "username",
            sortable : true,
            renderer : function change(val) {
                return '<span style="color:red;font-weight:bold;" class="bold" >'
                        + val + '</span>';
            }
        }, {
            text : "性別",
            flex : 1,
            width : 100,
            dataIndex : "sex",
            sortable : false,
            renderer : function(v) {
                if (v == 1) {
                    return "男";
                } else {
                    return "女";
                }
            }
        }, {
            text : "創建日期",
            width : 200,
            dataIndex : "createDate",
            sortable : true,
            renderer : Ext.util.Format.dateRenderer('Y-m-d')
        }, {
            text : "注冊日期",
            width : 200,
            dataIndex : "registDate",
            sortable : true,
            renderer : Ext.util.Format.dateRenderer('Y-m-d')
        }, {
            text : '操作',
            xtype : 'actioncolumn',
            width : 50,
            items : [{
                icon : 'totosea/images/delete.gif', // Use a URL in the
                // icon config
                tooltip : '刪除管理員',
                iconCls : 'delete',
                handler : function(grid, rowIndex, colIndex) {
                    var rec = store.getAt(rowIndex);
                    function showResult(btn) {
                        if (btn == 'yes') {
                            Ext.Ajax.request({
                                url : 'admin_delete.do',
                                params : {
                                    id : rec.get("id")
                                },
                                method : 'POST',
                                callback : function(options, success, response) {
                                    if (success) {
                                        var responseJson = Ext.JSON
                                                .decode(response.responseText);
                                        Ext.Msg.alert("提示信息", responseJson.msg);
                                        store.load({
                                            params : {
                                                start : 0,
                                                limit : pageSize
                                            }
                                        });
                                    } else {
                                        Ext.Msg.confirm('失敗',
                                                '請求超時或網絡故障,錯誤編號：['
                                                        + response.status
                                                        + ']是否要重新發送？',
                                                function(btn) {
                                                    if (btn == 'yes') {
                                                        Ext.Ajax
                                                                .request(options);
                                                    }
                                                });
                                    }
                                }
                            });
                        }
                    }
                    Ext.MessageBox.confirm('提示信息', '真的要刪除一個管理員么?', showResult);
                }
            }]
        }],
        height : 400,
        width : 800,
        x : 120,
        y : 40,
        title : "用戶信息",
        renderTo : "admindata",
        trackMouseOver : true, // 鼠標特效
        autoScroll : true,
        stateful : true,
        stateId : 'stateGrid',
        viewConfig : {
            columnsText : "顯示/隱藏列",
            sortAscText : "正序排列",
            sortDescText : "倒序排列",
            forceFit : true,
            stripeRows : true
        },
        bbar : new Ext.PagingToolbar({
            store : store, // 數據源
            pageSize : pageSize,
            displayInfo : true,
            displayMsg : '當前記錄 {0} -- {1} 條 共 {2} 條記錄',
            emptyMsg : "暫無數據顯示",
            prevText : "上一頁",
            nextText : "下一頁",
            refreshText : "刷新",
            lastText : "最后頁",
            firstText : "第一頁",
            beforePageText : "當前頁",
            afterPageText : "共{0}頁"
        }),
        tbar : // 工具條
        [{
            text : '刷新',
            cls : 'refresh',
            handler : function(btn, pressed) {// 重置查詢條件
                store.load({
                    params : {
                        start : 0,
                        limit : pageSize
                    }
                });
            }
        }]
    });
});

	/**
	 * 刪除一個用戶
	 */
	public void delete() {
		String id = this.servletRequest.getParameter("id");
		this.service.removeObject(AdminUser.class, id);
		JSONObject jsono = new JSONObject();
		jsono.put("msg", "刪除成功");
		JsonResult.json(jsono.toString(), servletResponse);
	}

　　

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'admin.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<style type="text/css">
	.bold:hover{
		       cursor: pointer;
	}
   .x-grid-row-over .x-grid-cell-inner {
           font-weight: bold;
       }
   .delete:hover{
   CURSOR: pointer;
   }
	</style>
  </head>
	<script type="text/javascript" src="ext-4.0/locale/ext-lang-zh_CN.js"></script>
	<script type="text/javascript" src="totosea/js/admin.js"></script>
  <body>
		<div id="admindata"></div>
	</body>
</html>