edit-grid2.js
上传用户:qfccsy
上传日期:2022-03-27
资源大小:716k
文件大小:8k
源码类别:

ListView/ListBox

开发平台:

Java

  1. /*
  2.  * Ext JS Library 2.0.1
  3.  * Copyright(c) 2006-2008, Ext JS, LLC.
  4.  * licensing@extjs.com
  5.  * 
  6.  * http://extjs.com/license
  7.  */
  8. /**
  9.  * 简体中文 Demo 制作: 刘长炯 beansoft@126.com
  10.  * http://beansoft.blogjava.net/
  11.  */
  12. Ext.onReady(function(){
  13.     Ext.QuickTips.init();
  14. // 格式化日期显示
  15.     function formatDate(value){
  16.         return value ? value.dateFormat('Y, M d') : '';
  17.     }
  18. // 格式化性别显示,这是个 renderer, 渲染器
  19. function formatSex(value) {
  20. return value ? "男" : "女";
  21. }
  22.     // 弄个缩写的别名
  23.     var fm = Ext.form;
  24.     // 列模型定义了表格所有列的信息, 
  25. // dataIndex 将特定的列映射到数据源(Data Store)中的数据列(在后面创建)
  26.     var cm = new Ext.grid.ColumnModel([
  27.      {
  28.            id:'id',
  29.            header: "编号",
  30.            dataIndex: 'id',
  31.            width: 50
  32.         },
  33.         
  34. {
  35.            id:'name',
  36.            header: "用户名",
  37.            dataIndex: 'name',
  38.            width: 250,
  39.            editor: new fm.TextField({
  40.                allowBlank: false// 不能为空
  41.            })
  42.         },
  43. {
  44.            header: "地区",
  45.            dataIndex: 'area',
  46.            width: 100,
  47.            editor: new Ext.form.ComboBox({
  48.                typeAhead: true,
  49.                triggerAction: 'all',
  50.                transform:'area',// 对应的选择框的ID
  51.                lazyRender:true,
  52.                listClass: 'x-combo-list-small'
  53.             })
  54.         },
  55. {
  56.            header: "电子邮件",
  57.            dataIndex: 'email',
  58.            width: 220,
  59.            align: 'left',
  60.            editor: new fm.TextField({
  61.                allowBlank: true
  62.            })
  63.         },
  64. {
  65.            header: "年龄",
  66.            dataIndex: 'age',
  67.            width: 70,
  68.            align: 'right',
  69.            editor: new fm.NumberField({
  70.                allowBlank: true,
  71.                allowNegative: false,
  72.                maxValue: 100
  73.            })
  74.         },
  75. {
  76.            header: "生日",
  77.            dataIndex: 'birthDay',
  78.            width: 95,
  79.            renderer: formatDate,
  80.            editor: new fm.DateField({
  81.                 format: 'y/m/d',
  82.                 minValue: '1970/01/01',//最小值
  83.                 disabledDays: [0, 6],// 禁止选择的日期
  84.                 disabledDaysText: '不许周末出生孩子'
  85.             })
  86.         },
  87. {
  88.            header: "性别",
  89.            dataIndex: 'sex',
  90.            width: 95,
  91.    renderer: formatSex,
  92.            editor: new fm.Checkbox()
  93.         }
  94.     ]);
  95.     // 默认情况下列是可排序的
  96.     cm.defaultSortable = true;
  97.     // 定义一个用户对象,这样便于我们动态的添加记录,虽然也可以设置成匿名内置对象
  98.     var User = Ext.data.Record.create([
  99.            // 下面的 "name" 匹配读到的标签名称, 除了 "birthDay",它被映射到标签 "birth"
  100.            {name: 'id', type: 'int' },
  101.            {name: 'name', type: 'string'},
  102.    {name: 'area'},
  103.            {name: 'email', type: 'string'},
  104.            {name: 'age', type: 'int'},             // automatic date conversions
  105.            {name: 'birthDay', mapping: 'birth', type: 'date', dateFormat: 'Y/m/d'},
  106.            {name: 'sex', type: 'bool'}
  107.       ]);
  108.     // 创建 Data Store
  109.     var store = new Ext.data.Store({
  110.         // 使用 HTTP 加载
  111.         url: 'users.xml',
  112.         // 因为返回值是 XML, 所以我们创建一个解析器
  113.         reader: new Ext.data.XmlReader({
  114.                // 记录必须包含 "user" 标签
  115.                record: 'user'
  116.            }, User),
  117.         sortInfo:{field:'name', direction:'ASC'}// 排序信息
  118.     });
  119.     // 创建编辑器表格
  120.     var grid = new Ext.grid.EditorGridPanel({
  121.         store: store,
  122.         cm: cm,
  123.         renderTo: 'editor-grid',
  124.         width:800,
  125.         height:300,
  126.         autoExpandColumn:'name',
  127.         title:'用户管理',// 标题
  128.         frame:true,
  129.         clicksToEdit:1,//设置点击几次才可编辑
  130.         selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),//设置单行选中模式, 否则将无法删除数据
  131. // 顶部工具栏按钮
  132.         tbar: [
  133. {
  134.             text: '添加用户',
  135. iconCls:'add',//按钮图标的CSS名称
  136.  
  137.             handler : function(){// 点击按钮执行的操作
  138.              var n = grid.getStore().getCount();// 获得总行数
  139.              // 调用 DWR 进行添加操作, 操作完成后调用方法来更新界面
  140.              JUserManager.addUser('新用户' + n, '北京', function(data) {
  141.               if(data) {
  142.                 var p = new User({
  143.                  id: data,
  144.                     name: '新用户' + n,
  145.                     area: '北京',
  146. email: 'beansoft@126.com',
  147.                     age: 20,
  148.                     birthDay: (new Date()).clearTime(),
  149.                     sex: true
  150.                 });
  151.                 
  152.                 grid.stopEditing();// 停止编辑
  153.                 store.insert(n, p);// 插入到最后一行
  154.                 grid.startEditing(n, 1);// 开始编辑1单元格
  155.      }
  156.              });
  157.             }
  158.         },
  159. {
  160.             text: '查看所选',
  161. iconCls: 'details',
  162.             handler : function(){
  163.                 var recordtoedit = grid.getSelectionModel().getSelected();// 返回值为 Record 类型
  164.                 if(recordtoedit) {
  165. Ext.Msg.alert('查看选中', "您现在选中的用户其名字为:" + recordtoedit.get("name"));// 取得用户名
  166. // alert("您现在选中的用户其名字为:" + recordtoedit.get("name"));
  167. }
  168.             }
  169.         },
  170. {
  171.             text: '删除所选',
  172. iconCls:'remove',
  173.             handler : function(){
  174.                 var record = grid.getSelectionModel().getSelected();// 返回值为 Record 类型
  175.                 
  176.                 if(!record){
  177. Ext.Msg.alert("提示","请先选择要删除的行!");
  178. return;
  179. }
  180. // 弹出对话框警告
  181. if(record) {
  182. Ext.MessageBox.confirm('确认删除', 
  183.           '你真的要删除所选用户吗?', 
  184.           function(btn) {
  185.           if(btn == 'yes') {// 选中了是按钮
  186.             // 调用 DWR, 执行结果成功时方删除所有数据
  187.           JUserManager.removeUser( record.get("id"), function(data) {
  188.            if(data) {
  189.            // 更新界面, 来真正删除数据
  190.   store.remove(record);
  191.   } else {
  192.   Ext.Msg.alert("出错了!","单个用户数据删除失败!");
  193.   }
  194.  });
  195.  
  196.  }
  197. }
  198. );
  199. }
  200.             }
  201.         },
  202. {
  203.             text: '删除所有',
  204. iconCls: 'user-delete',
  205.             handler : function(){
  206. Ext.MessageBox.confirm('确认删除', 
  207.           '你真的要删除所有用户信息吗?', 
  208.           function(btn) {
  209.           if(btn == 'yes') {// 选中了是按钮
  210.             // 调用 DWR, 执行结果成功时方删除所有数据
  211.           JUserManager.removeAllUser( function(data) {
  212.            if(data) {
  213.            // 更新界面, 来真正删除数据
  214.   store.removeAll();
  215.   } else {
  216.   Ext.Msg.alert("出错了!","批量数据删除失败!");
  217.   }
  218.  });
  219.  }
  220. }
  221. );
  222.             }
  223.         }
  224. ]
  225.     });
  226. // 单元格编辑后事件处理
  227. grid.on("afteredit", afterEdit, grid);
  228. // 事件处理函数
  229. function afterEdit(e) {
  230. var record = e.record;// 被编辑的记录
  231. // 显示等待对话框
  232. Ext.Msg.wait("请等候", "修改中", "操作进行中..."); 
  233.       // 调用 DWR, 执行结果成功时方删除所有数据
  234.          JUserManager.editUser( record.get("id"), e.field, e.value, function(data) {
  235.           if(data) {
  236.           // 更新界面, 来真正删除数据
  237. Ext.Msg.alert('您成功修改了用户信息', "被修改的用户是:" + e.record.get("name") + "n 修改的字段是:" 
  238. + e.field);// 取得用户名
  239.   } else {
  240.   Ext.Msg.alert("出错了!","修改数据失败,将重置为修改前的值!",function(){
  241.              record.set(e.field, e.originalValue);
  242.             });
  243.   }
  244.  });
  245. };
  246.     // 触发数据加载
  247.     store.load();
  248. });