Ext Js 3.2 EditorGridPanel 的使用方法

来源：互联网发布：sql 获取update行数编辑：程序博客网时间：2024/06/06 00:31
1：
<%@ 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>gridPanel</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"><link rel="stylesheet" type="text/css" href="ext3.2/resources/css/ext-all.css"></link><script type="text/javascript" src="ext3.2/adapter/ext/ext-base.js"></script><script type="text/javascript" src="ext3.2/ext-all.js"></script><script type="text/javascript" src="ext3.2/src/local/ext-lang-zh_CN.js"></script><script type="text/javascript">   Ext.onReady(function() {      var cum = new Ext.grid.ColumnModel([{  header:'类型ID',      dataIndex: 'sortId',      editor: new Ext.grid.GridEditor(      new Ext.form.TextField({      allowBlank: false      })),      }, {      header: '类型姓名',       dataIndex: 'sortName',      editor: new Ext.grid.GridEditor(      new Ext.form.TextField({      allowBlank: false      }))      },{      header: '父类型',       dataIndex: 'parentSort',      editor: new Ext.grid.GridEditor(      new Ext.form.TextField({      allowBlank: false      }))      }, {      header: '类型描述',       dataIndex: 'sortDescn',      editor: new Ext.grid.GridEditor(      new Ext.form.TextField({      allowBlank: false      }))      }, {      header: '日期',       dataIndex: 'kdtime',      editor: new Ext.grid.GridEditor(      new Ext.form.TextField({      allowBlank: false      }))      }]);var cumdata = [    ['1', 'String', 'Object', '字符串类型', '2010-05-22'],    ['2', 'Integer', 'Object', '整数类型', '2010-06-07'],    ['3', 'GridView', 'Observable', '用户界面的封装', '2010-05-05'],    ['4', 'ColumnModel', 'Observable', 'Grid列模型的默认实现', '2001-07-05'],    ['5', 'EditorGridPanel', 'GridPanel', '用于在指定某些的列可以编辑单元格', '2007-06-01'],    ['6', 'PropertyRecord', 'Object', '用于表示一对"名称/值"的数据', '2009-09-03']];var store = new Ext.data.Store({proxy: new Ext.data.MemoryProxy(cumdata),reader: new Ext.data.ArrayReader({}, [     {name: 'sortId'},     {name: 'sortName'},     {name: 'parentSort'},     {name: 'sortDescn'},     {name: 'kdtime'}])});store.load();var cumgrid = new Ext.grid.EditorGridPanel({renderTo: 'cumGrid',store: store,stripeRows: true,viewConfig: {    forceFit: true,    scrollOffset: 30,    sortAscText: '升序',    sortDescText: '降序'},height: 200,    width: 500,colModel: cum    });Ext.get('scroll').on('click', function() {cumgrid.getView().getScrollToTop();});Ext.get('focus').on('click', function() {cumgrid.getView().focusCell(2, 3);var cell1 = cumgrid.getView().getCell(2, 3);cell1.style.backgroundColor = 'yellow';cumgrid.getView().focusCell(1, 2);    var cell2 = cumgrid.getView().getCell(1, 2);    cell2.style.backgroundColor = 'green';});});</script>  </head>    <body>    <div id="cumGrid"> </div>    <input type="button" id="scroll" value="添加滚动条"/>    <input type="button" id="focus" value="设置单元格" />  </body></html>
2：程序效果