Extjs-行编辑器 Ext.ux.grid.RowEditor()

最新推荐文章于 2014-08-18 23:49:50 发布

itlwc

最新推荐文章于 2014-08-18 23:49:50 发布

阅读量7.6k

点赞数 1

分类专栏： Extjs 文章标签： stylesheet header plugins function json string

本文链接：https://blog.csdn.net/itlwc/article/details/7865514

版权

Extjs 专栏收录该内容

42 篇文章 1 订阅

订阅专栏

1.效果图

2.list.jsp

<%@ page language="java" pageEncoding="UTF-8"%>

<%	
	request.setCharacterEncoding("UTF-8");
	response.setCharacterEncoding("UTF-8");
	String json = "{totalProperty : 10,root:["+
		"{id:1, code:1001,name:'tom',sex:1,age:12},"+
		"{id:2, code:1002,name:'lwc',sex:0,age:18},"+
		"{id:3, code:1003,name:'wr',sex:1,age:25},"+
		"{id:4, code:1004,name:'nxj',sex:1,age:30},"+
		"{id:5, code:1005,name:'cat',sex:0,age:22}"
	+"]}";
	System.out.print(json);
	response.getWriter().write(json);
%>

3.index.jsp

<%@ page language="java"  pageEncoding="UTF-8"%>
<%	String rootpath = request.getContextPath();%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
	<link rel="stylesheet" type="text/css" href="<%=rootpath%>/ext/resources/css/ext-all.css"/>
	<script type="text/javascript" src="<%=rootpath%>/ext/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="<%=rootpath%>/ext/ext-all.js"></script>
	<script type="text/javascript" src="<%=rootpath%>/ext/ext-lang-zh_CN.js"></script>
	<!-- 使用行编辑器必须引入下面这两个文件 -->
	<script type="text/javascript" src="<%=rootpath%>/ext/ux/RowEditor.js"></script>
    <link rel="stylesheet" type="text/css" href="<%=rootpath%>/ext/examples/14.core/ext3/roweditorgrid.css" />
        
	<script type="text/javascript">
		Ext.onReady(function(){
			Ext.QuickTips.init();
			Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';
			
			var record = new Ext.data.Record.create([
				{name : 'id'},
				{name : 'code'},
				{name : 'name'},
				{name : 'sex'},
				{name : 'age'}
			]);
			var store = new Ext.data.Store({
				proxy : new Ext.data.HttpProxy({
					url : 'list.jsp'
				}),
				reader : new Ext.data.JsonReader({
					totalProperty : 'totalProperty',
					root : 'root',
					fields: record
				})
			});
			var grid = new Ext.grid.GridPanel({
				//启用行编辑器需要在表格plugins属性中添加一个RowEditor实例
				plugins: [new Ext.ux.grid.RowEditor()],
				title : '学生信息列表',
				store : store,
				columns : [
					{header:'编号',dataIndex:'id',align :'center',editor:{xtype: 'textfield'}},
					{header:'学号',dataIndex:'code',align :'center',editor:{xtype: 'textfield'}},
					{header:'名字',dataIndex:'name',align :'center',editor:{xtype: 'textfield'}},
					{header:'性别',dataIndex:'sex',align :'center',renderer:sexRenderer,editor:{xtype: 'textfield'}},
					{header:'年龄',dataIndex:'age',align :'center',editor:{xtype: 'textfield'}}
				],
				listeners : {
					'beforerender' : function(){
						store.load();
					}
				}
			});
			
			var vp = new Ext.Viewport({
				layout : 'fit',
				items : [grid]
			});
		});

		var sexRenderer = function(value){
			if('1'==value){
				return '<span style="color:green">男</span>';
			}else{
				return '<span style="color:red">女</span>';
			}
		}
		
    </script>
  </head>
  <body>
  </body>
</html>