ext中editorgrid怎么实现？

 我来答

1个回答

#热议# 海关有哪些禁运商品？查到后怎么办？

peng_peng2011
推荐于2016-01-14 · TA获得超过211个赞

知道答主

回答量：54

采纳率：0%

帮助的人：58.5万

我也去答题访问个人页

关注

展开全部

这是一个简单的EXT中运用EditorGrid的例子，希望你能帮到你。
<%@ 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>可编辑表格EditorGridPanel的应用</title>
    <!-- 可编辑表格是指可以直接在表格的单元格对表格的数据进行编辑，ExtJS 中的可编辑表格由
      类Ext.grid.EditorGridPanel 表示，xtype 为editorgrid -->
	<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="styles.css">
	-->

<!-- 这个顺序不能乱，乱了就会出错 -->
	<link rel="stylesheet" href="js/ext/resources/css/ext-all.css" type="text/css"></link>
	<link rel="stylesheet" href="js/ext/resources/css/xtheme-green.css" type="text/css"></link>
	<script type="text/javascript" src="js/ext/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="js/ext/ext-all.js"></script>
  </head>
  
  <body>
    <script type="text/javascript">
    Ext.onReady(function(){
		var data=[{id:1,
		name:'小王',
		email:'xiaowang@easyjf.com',
		sex:'男',
		bornDate:'1991-4-4'},
		{id:1,
		name:'小李',
		email:'xiaoli@easyjf.com',
		sex:'男',
		bornDate:'1992-5-6'},
		{id:1,
		name:'小兰',
		email:'xiaoxiao@easyjf.com',
		sex:'女',
		bornDate:'1993-3-7'}
		];
	var store=new Ext.data.JsonStore({
		data:data,
		fields:["id","name","sex","email",{name:"bornDate",type:"date",dateFormat:"Y-n-j"}]
	});
	var colM=new Ext.grid.ColumnModel([
	new Ext.grid.RowNumberer(),//EXT.Grid 自动增长列
	{
		header:"姓名",
		dataIndex:"name",
		sortable:true,
		editor:new Ext.form.TextField()},
		{header:"性别",
		dataIndex:"sex",
		editor:new Ext.form.ComboBox({transform: "sexList",triggerAction: 'all',lazyRender:true})},
		{header:"出生日期",
		dataIndex:"bornDate",
		width:120,
		renderer:Ext.util.Format.dateRenderer('Y年m月d日'),
		editor:new Ext.form.DateField({format:'Y年m月d日'})},//日期编辑器可以直接使用Ext.form.DateField组件
		{header:"电子邮件",
		dataIndex:"email",
		sortable:true,
		editor:new Ext.form.TextField()}//editor属性，是该区域可编辑
	]);
	var grid = new Ext.grid.EditorGridPanel({
		renderTo:"hello",
		title:"学生基本信息管理",
		height:200,
		width:600,
		cm:colM,
		store:store,
		autoExpandColumn:3,
		clicksToEdit:2//表示点击一次单元格即可编辑,默认是点击两下
	});
	//this.grid.on("afteredit",this.afterEdit,this); 直接用afteredit时间来保存修改后的数据
	});
    </script>
    <div id="hello"></div>
    <select id="sexList">
    <option>男</option>
    <option>女</option>
    </select>
  </body>
</html>


本回答被提问者采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起

微测检测5.10
2023-05-10 广告

您好！建议咨深圳市微测检测有限公司，已建立起十余个专业实验室，企业通过微测检测就可以获得一站式的测试与认证解决方案；(EMC、RF、MFi、BQB、QI、USB、安全、锂电池、快充、汽车电子EMC、汽车手机互联、语音通话质量），认证遇... 点击进入详情页

本回答由微测检测5.10提供

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

ext中editorgrid怎么实现？

其他类似问题

为你推荐：