ext4.0简单表格-Ext.grid.Panel

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>

转载自：http://www.cnblogs.com/tatame/archive/2012/04/28/2475391.html