Extjs-行编辑器 Ext.ux.grid.RowEditor()
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>