Extjs Grid 编辑 新增 删除 保存

//创建edgrid.js
Ext.onReady(function(){
    Ext.QuickTips.init();

    // 格式化日期显示
    function formatDate(value){
        return value ? value.dateFormat('Y, M d') : '';
    }
    // 格式化性别显示,这是个 renderer, 渲染器
    function formatSex(value) {
        return value ? "男" : "女";
    }
    // 弄个缩写的别名
    var fm = Ext.form;

    // 列模型定义了表格所有列的信息,
    // dataIndex 将特定的列映射到数据源(Data Store)中的数据列(在后面创建)
    var cm = new Ext.grid.ColumnModel([
            {
           id:'id',
           header: "编号",
           dataIndex: 'id',
           width: 50
        },
        {
           id:'name',
           header: "用户名",
           dataIndex: 'name',
           width: 250,
           editor: new fm.TextField({
               allowBlank: false// 不能为空
           })
        },
        {
           header: "地区",
           dataIndex: 'area',
           width: 100,
           editor: new Ext.form.ComboBox({
               typeAhead: true,
               triggerAction: 'all',
               transform:'area',// 对应的选择框的ID
               lazyRender:true,
               listClass: 'x-combo-list-small'
            })
        },
        {
           header: "电子邮件",
           dataIndex: 'email',
           width: 220,
           align: 'left',
           editor: new fm.TextField({
               allowBlank: true
           })
        },
        {
           header: "年龄",
           dataIndex: 'age',
           width: 70,
           align: 'right',
           editor: new fm.NumberField({
               allowBlank: true,
               allowNegative: false,
               maxValue: 100
           })
        },
        {
           header: "生日",
           dataIndex: 'birthDay',
           width: 95,
           renderer: formatDate,
           editor: new fm.DateField({
                format: 'y/m/d',
                minValue: '1970/01/01',//最小值
                disabledDays: [0, 6],// 禁止选择的日期
                disabledDaysText: '不许周末出生孩子'
            })
        },
        {
           header: "性别",
           dataIndex: 'sex',
           width: 95,
           renderer: formatSex,
           editor: new fm.Checkbox()
        }
    ]);

    // 默认情况下列是可排序的
    cm.defaultSortable = true;

    // 定义一个用户对象,这样便于我们动态的添加记录,虽然也可以设置成匿名内置对象
    var User = Ext.data.Record.create([
           // 下面的 "name" 匹配读到的标签名称, 除了 "birthDay",它被映射到标签 "birth"
           {name: 'id', type: 'int' },
           {name: 'name', type: 'string'},
           {name: 'area'},
           {name: 'email', type: 'string'},
           {name: 'age', type: 'int'},             // automatic date conversions
           {name: 'birthDay', mapping: 'birth', type: 'date', dateFormat: 'Y/m/d'},
           {name: 'sex', type: 'bool'}
      ]);

    // 创建 Data Store
    var store = new Ext.data.Store({
        // 使用 HTTP 加载
        url: 'users.xml',

        // 因为返回值是 XML, 所以我们创建一个解析器
        reader: new Ext.data.XmlReader({
               // 记录必须包含 "user" 标签
               record: 'user'
           }, User),

        sortInfo:{field:'name', direction:'ASC'}// 排序信息
    });

    // 创建编辑器表格
    var grid = new Ext.grid.EditorGridPanel({
        store: store,
        cm: cm,
        renderTo: 'editor-grid',
        width:800,
        height:300,
        autoExpandColumn:'name',
        title:'功能管理',// 标题
        frame:true,
        clicksToEdit:1,//设置点击几次才可编辑
        selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),//设置单行选中模式, 否则将无法删除数据

        // 顶部工具栏按钮
        tbar: [
        {
            text: '新增',
            iconCls:'xz',//按钮图标的CSS名称
            handler : function(){// 点击按钮执行的操作
                var n = grid.getStore().getCount();// 获得总行数
                var p = new User({
                    id: n + 1,
                    name: '新数据' + n,
                    area: '',
                    email: '[e-mail]',
                    age: 20,
                    birthDay: (new Date()).clearTime(),
                    sex: true
                });
                grid.stopEditing();// 停止编辑
                store.insert(n, p);// 插入到最后一行
                grid.startEditing(n, 1);// 开始编辑1单元格
            }
        },
        {
            text: '删除',
            iconCls:'sc01',
            handler : function(){
           
                //var record = grid.getSelectionModel().getSelected();// 返回值为 Record 类型
                var rows = grid.getSelectionModel().getSelections();// 返回值为 Record 数组
if(rows.length==0){
Ext.MessageBox.alert('警告', '最少选择一条信息，进行删除!');
}else{
Ext.MessageBox.confirm('提示框', '您确定要进行该操作？',function(btn){
if(btn=='yes'){
if(rows){
for (var i = 0; i < rows.length; i++) {
//alert(rows[i].get("id"));
store.remove(rows[i]);
//store.removeAll(); //删除所有数据

}
this.getEl().dom.action='./formservlet?operator=save';
this.getEl().dom.submit();
}
}
});
}                // 弹出对话框警告
            }
        },
        {
            text: '保存',
            iconCls: 'bc',
            handler : function(){
var recordtoedit = grid.getSelectionModel().getSelected();// 返回值为 Record 类型
                if(recordtoedit) {
                    Ext.Msg.alert('查看选中', "您现在选中的用户其名字为:" + recordtoedit.get("name"));// 取得用户名
                    // alert("您现在选中的用户其名字为:" + recordtoedit.get("name"));
                }
            }
        },
        {
            text: '查询',
            iconCls: 'cx',
            handler : function(){
              
            }
        }
        ]
    });

    // 单元格编辑后事件处理
    grid.on("afteredit", afterEdit, grid);
    // 事件处理函数
    function afterEdit(e) {
        var record = e.record;// 被编辑的记录
        // 显示等待对话框
        Ext.Msg.wait("请等候", "修改中", "操作进行中...");

          // 更新界面, 来真正删除数据
            Ext.Msg.alert('您成功修改了用户信息', "被修改的用户是:" + e.record.get("name").value + "\n 修改的字段是:"
            + e.field);// 取得用户名
    };

    // 触发数据加载
    store.load();
});

//创建edgrid.jsp

<%@page contentType="text;html; charset=GBK"%>
<%@page import="com.luke.hm.tree.EJBContext"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312">
<title>表格编辑器示例</title>

<link rel="stylesheet" type="text/css" href="<%= EJBContext.getRootPath()%>/ext/resources/css/ext-all.css" />

<!-- 图标样式 CSS 信息 -->

<link rel="stylesheet" type="text/css" href="<%= EJBContext.getRootPath()%>/menujscss/edgrid.css" />

    <!-- GC -->
     <!-- LIBS -->
     <script type="text/javascript" src="<%= EJBContext.getRootPath()%>/ext/adapter/ext/ext-base.js"></script>
     <!-- ENDLIBS -->

    <script type="text/javascript" src="<%= EJBContext.getRootPath()%>/ext/ext-all.js"></script>
    <!-- 中文提示信息支持 -->
     <script type="text/javascript" src="<%= EJBContext.getRootPath()%>/ext/source/locale/ext-lang-zh_CN.js"></script>

    <!-- 本页的功能代码 -->
    <script type="text/javascript" src="edgrid.js"></script>
    <!--  DWR JavaScript 类库 -->
    <!--script type='text/javascript' src='/dwrtest/dwr/interface/JUserManager.js'></script-->
  <!--script type='text/javascript' src='/dwrtest/dwr/engine.js'></script-->

</head>
<body>

<h1>
  <select name="area" id="area" style="display: none;">
      <option value="历城区">历城区</option>
      <option value="历下区">历下区</option>
      <option value="槐荫区">槐荫区</option>
  </select>

  <!-- 放置可编辑控件的 DIV -->
</h1>
<div id="editor-grid"></div>

</body>
</html>

//创建users.xml
<?xml version="1.0" encoding="GBK"?>
<users>
  <user>
      <id>1</id>
    <name>XXX1</name>
    <area>XXX2</area>
    <email>[e-mail]</email>
    <age>88</age>
    <sex>true</sex>
    <birth>1980/01/01</birth>
  </user>
    <user>
    <id>2</id>
    <name>Benson</name>
    <area>山东济南</area>
    <email>[e-mail]</email>
    <age>27</age>
    <sex>true</sex>
    <birth>1982/12/12</birth>
  </user>
    <user>
    <id>3</id>
    <name>Benson_GG</name>
    <area>济南历下</area>
    <email>[e-mail]</email>
    <age>28</age>
    <sex>false</sex>
    <birth>1982/12/11</birth>
  </user>

</users>

//创建edgrid.css
/** 定义了一些工具栏按钮的 CSS 样式 */
.xz {
    background-image:url(./xz.gif) !important;
}

.sc01 {
    background-image:url(./sc.gif) !important;
}

.sc02 {
    background-image:url(./sc.gif) !important;
}

.cx {
    background-image:url(./cx.gif) !important;
}

.bc {
    background-image:url(./bc.gif) !important;
}