Ext Js 3.2 EditorGirdPanel增加一行和删除一行

最新推荐文章于 2021-08-06 10:33:44 发布

波哥的技术积累

最新推荐文章于 2021-08-06 10:33:44 发布

阅读量8.1k

点赞数 1

分类专栏： Ext Js 文章标签： ext header function stylesheet object string

本文链接：https://blog.csdn.net/woshisap/article/details/6957331

版权

Ext Js 专栏收录该内容

61 篇文章 1 订阅

订阅专栏

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'}
			])
		});
		
		var p = new Ext.data.Record({
		   	sortId: '',
		   	sortName: '',
		   	parentSort: '',
		   	sortDescn: '',
		   	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,
			tbar: new Ext.Toolbar(['-', {
				text: '添加一行',
				handler: function() {
				     cumgrid.stopEditing();
				     store.insert(0, p); 
				     cumgrid.startEditing(0, 0);  //激活该行的编辑状态
				}
			}, '-', {
				text: '删除一行',
				handler: function() {
				    Ext.Msg.confirm('信息', '确定要删除', function(btn) {
				    	if(btn == 'yes') {
				    		var sm = cumgrid.getSelectionModel(); //得到表格的选择模型
				    		var cell = sm.getSelectedCell(); //通过选择模型得到选择的单元格  
				    		var record = store.getAt(cell[0]);  //得到store对应的Record
				    		store.remove(record);  
				    	}
				    })
				}
			}])
	    });
});
	</script>
  </head>
  
  <body>
    <div id="cumGrid"> </div>
  </body>
</html>

2：效果图

增加一行的效果：

删除一行的效果：

波哥的技术积累

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Ext Js 3.2 EditorGirdPanel增加一行和删除一行

1：源代码<%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%> "> gridPanel
复制链接

扫一扫