Ext.grid.EditorGridPanel使用方法
首先定义一个EditorGridPanel,
- var maintainceOrderGrid = new Ext.grid.EditorGridPanel( {// 创建Grid表格组件
- applyTo : 'maintainorderinfo-grid-div',// 设置表格现实位置
- frame : true,// 渲染表格面板
- tbar : toolbar,// 设置顶端工具栏
- stripeRows : true,// 显示斑马线
- autoScroll : true,// 当数据查过表格宽度时,显示滚动条
- store : maintainceProjectStore,// 设置表格对应的数据集
- viewConfig : {// 自动充满表格
- autoFill : true
- },
- sm : sm,// 设置表格复选框
- cm : cm,// 设置表格的列
- bbar : new Ext.PagingToolbar( {
- pageSize : 25,
- store : maintainceProjectStore,
- displayInfo : true,
- displayMsg : '显示第{0}条到{1}条记录,一共{2}条记录',
- emptyMsg : '没有记录'
- })
- });
接着定义grid中用到的sm和cm,
- var sm = new Ext.grid.CheckboxSelectionModel();// 创建复选择模式对象
- var cm = new Ext.grid.ColumnModel( [// 创建表格列模型
- new Ext.grid.RowNumberer(), sm, {
- header : "维修价格",
- width : 60,
- dataIndex : 'price',
- sortable : true,
- editor : new Ext.form.NumberField( {
- editable : true,
- allowNegative : false,
- allowBlank : false,
- decimalPrecision : 2,
- minValue : 0
- // ,
- // maxValue : 1
- })
- } ]);
再定义一个保存维修价格的toolbar,用于调用保存维修价格的方法。
- var toolbar = new Ext.Toolbar( [ {
- text : '保存维修价格',
- iconCls : 'add',
- handler : setMaintaincePrice
- } ]);
保存维修价格的方法如下:
- function setMaintaincePrice() {//设置维修价格
- var mr = maintainceProjectStore.getModifiedRecords();// 获取所有更新过的记录
- var recordCount = maintainceProjectStore.getCount();// 获取数据集中记录的数量
- if (mr.length == 0) {
- Ext.MessageBox.alert('提示', '没有修改数据!');
- }
- else
- {
- var msgTip = Ext.MessageBox.show( {
- title : '提示',
- width : 250,
- msg : '正在提交更改请稍后......'
- });
- var recordModStr = "[";// 以josn方式保存数据
- for ( var i = 0; i < mr.length; i++) {
- recordModStr += "{maintainceProjectId:"
- + mr[i].data["maintainceProjectId"] + ",price:"
- + mr[i].data["price"] + "}";
- if (i < mr.length - 1)
- recordModStr += ",";
- }
- recordModStr += "]";
- var requestConfig = {
- //url : 'material.do?method=modifyMaterialQuantity×tamp=' + new Date(),
- url : 'maintianceproject.do?method=setMaintaincePrice×tamp=' + new Date(),
- jsonData : recordModStr,
- params : {
- mlist : recordModStr
- },
- callback : function(options, success, reponse) {
- msgTip.hide();
- if (success) {
- Ext.Msg.alert('提示', '保存成功');
- maintainceProjectStore.commitChanges();
- } else {
- Ext.Msg.alert('提示', '保存失败');
- }
- }
- }
- Ext.Ajax.request(requestConfig);
- }
这里使用了
- Ext.Ajax.request(requestConfig);
Ajax动态向后台发送请求的方法。这也是ExtJs前后台传递消息的有效方法之一。
下面列出后台读取josn的方法:
- private ModelAndView setMaintaincePrice(HttpServletRequest request,
- HttpServletResponse response) throws IOException {
- String jsonstr = request.getParameter("mlist");
- // test
- System.out.println(jsonstr);
- jsonstr = URLDecoder.decode(jsonstr, "utf-8");
- JSONArray array = JSONArray.fromObject(jsonstr);
- MaintianceprojectForm[] obj = new MaintianceprojectForm[array.size()];
- boolean b = false;
- for (int i = 0; i < array.size(); i++) {
- JSONObject jsonObject = array.getJSONObject(i);
- obj[i] = (MaintianceprojectForm) JSONObject.toBean(jsonObject,
- MaintianceprojectForm.class);
- // test
- System.out.println(obj[i].getMaintainceProjectId() + "*****"
- + obj[i].getPrice());
- Maintianceproject record = new Maintianceproject();
- record.setPrice(obj[i].getPrice());
- b = this.getMaintianceprojectService().updateMaintaincePrice(
- obj[i].getMaintainceProjectId(), record);
- if (b == false)
- break;
- }
- if (b) {
- response.getWriter().write("{success:true}");
- } else {
- response.getWriter().write("{success:false}");
- }
- return null;
- }
本文转自xwdreamer博客园博客,原文链接:http://www.cnblogs.com/xwdreamer/archive/2010/12/29/2297054.html,如需转载请自行联系原作者
Ext.grid.EditorGridPanel使用方法相关推荐
- Ext.grid.EditorGridPanel的使用、修改记录的获取及提交
<HTML> <HEAD> <TITLE>可编辑表格面板EditorGridPanel</TITLE> <metahttp-equi ...
- Ext.grid.EditorGridPanel viewConfig 设置表格 UniDBGrid
extjs命令 必须在UniFormCreate事件里写 //可以复制单元格文字 UniDBGrid1.JSInterface.JSConfigObject('viewConfig', 'enable ...
- [转]Ext Grid控件的配置与方法
http://www.blogjava.net/wangdetian168/archive/2011/04/12/348651.html 1.Ext.grid.GridPanel 主要配置项: sto ...
- ext Grid(三)
想让用户体验更高就应该让用户可以在自己刚刚查询出来的数据表格上进行数据编辑,可以进行增删改查.可编辑的表格就在在想要能编辑的列里注册一个TextField组件,这个组件需要使用Ext.grid.Gri ...
- 关于Ext中EditorGridPanel数据校验
用了2年的Ext 渐渐对Ext熟络起来,经常去看下源码,自己瞎琢磨些功能,最近做了个EditorGridPanel数据校验,原理不难,不过绝对原创,有点意思,发下和大家分享~ 原理:通过EditorG ...
- Ext.grid.ColumnModel设置
Ext.grid.ColumnModel 用于定义Grid的列 用例 var colModel = new Ext.grid.ColumnModel([ {header: "Ticker&q ...
- ext Ext.grid.ColumnModel自适应宽度去除右边空白
列自适应玩了以后发现右边有一列空白,加上scrollOffset: 0//去除最右边空白 grid = new Ext.grid.EditorGridPanel({ region:"cent ...
- 使用Dynamic LINQ实现Ext Grid的远程排序
要实现Ext Grid的远程排序其实很简单,只要修改查询语句的排序关键字就可以了,但是,如果你的项目是使用Linq进行开发的,会发现动态修改排序关键字并不是那么容易的事,解决办法就是使用LINQ Dy ...
- Ext DeskTop的使用方法简易教程及相关例子Demo(转)
Ext DeskTop的使用方法简易教程及相关例子Demo(转) ExtJS 2010-12-31 10:11:15 阅读196 评论0 字号:大中小 订阅 http://qwikioffice. ...
- 完善ext.grid.panel中的查询功能(紧接上一篇)
今天的代码主要是实现,Ext.grid.panel中的查询,其实我也是一名extjs新手,开始想的实现方式是另外再创建一个新的grid类来存放查询出的数据(就是有几个分类查询就创建几个grid类),这 ...
最新文章
- Equalizing Two Strings 冒泡排序or树状数组
- UML总结—时序图(Sequence Diagram)和协作图(Collaboration Diagram)
- UWP使用AppService向另一个UWP客户端应用程序提供服务
- 倒排文件索引(Inverted File Index)的建立
- System.Diagnostics.Process 执行.EXE
- 第一章:React入门
- java四类八种基本数据类型
- js中arguments的用法
- 【CV】如何使用Tensorflow提供的Object Detection API --2--数据转换为TFRecord格式
- 使用lua实现redis分布式锁
- 图书管理系统软件测试报告_软件测试新手入门小知识点,一定要牢记
- 【MQTT编程】Last will and Testament(LWT Payload设置)
- 分数乘法怎么用计算机计算,分数乘法计算与简单运用
- 输入一个字符串,判断它的所有字符中否全部是大写字母,如不是,统计小写字母个数,并将其转换成大写字母后输出
- 精英都是方法控,做人做事必备的100套思维框架工具
- Oracle_02查询函数
- import()函数和import语句
- 嵌入式软件工程师一般都在开发什么?
- 20 函数的极值和最大(小)值
- RFI、RFQ、RFP、IFB分别是什么阶段?