gridpanel某一列可编辑和某一列加复选框

a349051255 2014-04-25 11:08:49
菜鸟现在有两个问题:1,gridpanel和store绑定之后,数据也能正常显示在grid上,可现在要求把数据中的某一列编辑为手动输入,不知道是在远grid上设置,还是在store中设置;
2,在另外一个grid前面添加一个复选框,就是可以选择某一行数据,然后可以点“修改”按钮,现在这个复选框的问题不知道怎么添加进去,而且只能单选其中一行进行修改。
两个问题现在主要是第一个问题,要编辑数据之后,保存返回到后台,现在就卡在我这个地方,后面的数据进行不了。
请求大神帮忙,能有可行的代码加进去更好。
...全文
292 6 打赏 收藏 转发到动态 举报
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
a349051255 2014-04-25
  • 打赏
  • 举报
回复
引用 1 楼 bdmh 的回复:
可编辑在column中设置,editor:{xtype:'textfield',allowBlank:false},
刚刚我们项目组长给了另外一个方法,版主可以看下 我是在Sencha Architect上运行实现的,组长在store显示的数据组中添加了CellEditingPlugin事件,再在grid中添加了
xtype: 'gridcolumn',
                                            width: 50,
                                            dataIndex: 'mark',
                                            text: 'Mark',
                                            editor: {
                                                xtype: 'textfield',
                                                enableKeyEvents: true
                                            }
这一句,也能实现列的编辑问题。 不过版主知道怎么在下面添加的保存按钮中添加保存的代码? 组长写的是var store=Ext.getCmp('gridZhuguan').store; 还要添加updataData()代码么?
引用 1 楼 bdmh 的回复:
可编辑在column中设置,editor:{xtype:'textfield',allowBlank:false},
a349051255 2014-04-25
  • 打赏
  • 举报
回复
版主很强大,这个方法可行。
bdmh 2014-04-25
  • 打赏
  • 举报
回复
可编辑在column中设置,editor:{xtype:'textfield',allowBlank:false},

 	 var rolecols = [{
	 		width:25,
	 		renderer:function(value)
	 		{
	 			return '<img src= ././image/role.png />';
	 		}
	 	},{
 	 	text:'角色编号',
 	 	dataIndex:'rolecode',
 	 	width:100
 	 },{
 	 	text:'角色名称',
 	 	dataIndex:'rolename',
 	 	editor:{xtype:'textfield',allowBlank:false},
 	 	width:200
 	 },{
 	 	text:'描述',
 	 	dataIndex:'describe',
 	 	editor:{xtype:'textfield'},
 	 	flex:1
 	 }];
gridpanel中设置列为上面的变量

	 var gridrole = Ext.create('RoleGrid',{
	 	id:'gridrole',
	 	columns:rolecols,
	 	tbar:rolebar,
	 	border:false,
	 	plugins: [
	        Ext.create('Ext.grid.plugin.CellEditing', {
	            clicksToEdit: 1
	        })]
	 });
bdmh 2014-04-25
  • 打赏
  • 举报
回复
引用 3 楼 a349051255 的回复:
不过版主知道怎么在下面添加的保存按钮中添加保存的代码?
[/quote]

	 			{
	 				text:'保存',
	 				iconCls:'saveicon',
	 				handler:function(){
	 					gridrolestore.sync({
	 						success:function(optional){
	 							Ext.MessageBox.alert('提示','保存成功');
	 						}
	 					});
	 				}
	 			},
我用的是批量提交的方法,调用store的sync方法,它会将所有修改的记录组织成json传递到后台 下面是store的定义,里面定义了api

 	 var gridrolestore = Ext.create('Ext.data.Store',{
 	 	model:Role_Model,
 	 	proxy:{
 	 		type:'ajax',
// 	 		url:'././RoleServlet',
 	 		api:{
					read:'././RoleServlet',
					create:'././RoleServlet?optype='+OPERATION_NEW,
					update:'././RoleServlet?optype='+OPERATION_EDIT,
					destroy:'././RoleServlet?optype='+OPERATION_DEL
				},
 	 		reader:{
 	 			type:'json',
 	 			root:'items',
 	 			idProperty:'rolecode',
 	 			messageProperty:'msg'
 	 		},
 	 		writer:{
					type:'json',
					writeAllFields:false,
					root:'data',
					allowSingle:false
			}
 	 	}
 	 });
googny 2014-04-25
  • 打赏
  • 举报
回复
引用 3 楼 a349051255 的回复:
[quote=引用 1 楼 bdmh 的回复:] 可编辑在column中设置,editor:{xtype:'textfield',allowBlank:false},
刚刚我们项目组长给了另外一个方法,版主可以看下 我是在Sencha Architect上运行实现的,组长在store显示的数据组中添加了CellEditingPlugin事件,再在grid中添加了
xtype: 'gridcolumn',
                                            width: 50,
                                            dataIndex: 'mark',
                                            text: 'Mark',
                                            editor: {
                                                xtype: 'textfield',
                                                enableKeyEvents: true
                                            }
这一句,也能实现列的编辑问题。 不过版主知道怎么在下面添加的保存按钮中添加保存的代码? 组长写的是var store=Ext.getCmp('gridZhuguan').store; 还要添加updataData()代码么?
引用 1 楼 bdmh 的回复:
可编辑在column中设置,editor:{xtype:'textfield',allowBlank:false},
[/quote] 刚用Ext做完一个工程,也是操纵大量ChineseTable的 。 回到问题。”“” 不过版主知道怎么在下面添加的保存按钮中添加保存的代码?“”“ 简单说下我理解的store 你从后台取得的数据,应该是先配置到store里面,然后再将store配置到grid里面。(注意columns和fields的对应,col应该是fields的子集。) 这时候你在前台做的任何编辑表格的东西,都不回对store造成实质的数据变化。因为每一条record都有一个raw数值,来保存原来的数据。 这时候::: 1、你如果只是想暂时的保存在客户端,可以使用sync方法,就可以将数据同步到前台也就是单元格的左上角的小红点消失了。 2、如果想保存到客户端,就从store里取数据,发送到server保存,然后回显到前台,也能实现同步。 可能一些名词或想法解释有错。 具体的可以查下DOCS。 祝好!
这是我花费数月写的关于Extjs的原创教程,共29个章节。下面是目录: 目 录 1 第一章:序 6 第二章:准备与资源 9 一、下载 9 二、拦路虎 9 三、布署环境 11 四、SpketIDE 12 五、资源 16 六、小结 16 第三章:Ext OOP基础 17 一、javascript类的定义 17 二、Extjs命名空间的定义 17 三、Extjs OOP 17 四、配置(config)选项 19 五、Ext.apply()和Ext.applyIf() 20 六、小结 21 第四章:消息框 22 一、话说消息框 22 二、最简单的消息框——提示框 23 三、输入框 23 四、确认框 24 五、自定义消息框 24 六、进度条对话框 25 七、让消息框飞出来 26 八、小结 27 第五章:页面与脚本完全分离 28 一、Extjs是脚本的世界 28 二、Ext.onReady事件 28 三、来自Extjs的问候 29 四、让界面动起来 29 五、Ext.Fx类 30 六、Ext.Element类中的动画函数 34 七、小结 35 第六章:元素操作与模板 36 一、重要也不重要的东西 36 二、Ext.DomHelper类 36 三、Ext.XTemplate 38 四、小结 39 第七章:格式化 40 一、用户需要优秀体验的内容 40 二、Ext.util.Format类 40 三、再谈XTemplete 44 四、如果连Format都不能满足XTemplete的需要呢? 45 五、小结 45 第八章:Extjs组件结构 46 一、Extjs的组件结构远比我们想象的复杂 46 二、组件分类 47 三、组件的生命周期 48 四、组件渲染方法render 50 五、小结 52 第九章:按钮与日期选择器 53 一、开始组件学习之旅 53 二、被设计得面目全非的按钮 53 三、日期选择器Ext.DatePicker 55 四、小结 56 第十章:数据与ComboBox 57 一、数据在这里是动词 57 二、Ext.data.DataProxy类 57 三、Ext.data.DataReader类 58 四、Ext.data.Store类 59 五、下拉列表框 60 六、得到下拉列表框的值 62 七、源代码 63 八、小结 64 第十一章:Ajax与ComboBox 65 一、Ajax 65 二、Ext.Ajax类 65 三、Ajax文件上传 67 四、你来自远方 72 五、小结 73 第十二章:分页与ComboBox 74 一、关于分页 74 二、从Servlet获取当前页数据 74 三、创建ComboBox 76 四、小结 77 第十三章:面板(Panel) 78 一、漂亮的窗格从这里开始 78 二、Ext.Panel类 78 三、小结 83 第十四章:Panel的子类——Window窗口 85 一、概述 85 二、Ext.Window类 85 三、实现Window的最小化功能 87 四、小结 91 第十五章:Panel的子类——FormPanel 93 一、无处不在的表单 93 二、Ext.form.FormPanel类 93 三、提交表单至服务器 97 四、小结 100 第十六章:更多表单组件 102 一、您能说出哪些表单组件呢? 102 二、表单组件关系图 102 三、组件配置选项介绍 103 四、完整源代码 107 五、小结 112 第十七章:悬停提示与验证 113 一、悬停提示 113 二、悬停提示的用法 114 三、表单组件验证 118 四、小结 120 第十八章:FormPanel布局与初始化 121 一、布局概述 121 二、分割吧! 121 三、表单初始化 126 四、小结 131 第十九章:叹为观止的表格组件——GridPanel 132 一、表格、表格面板 132 二、列模型与数据 132 三、强版的列模型 135 四、小结 138 第二十章:行模型与Grid视图 139 一、行选择模型 139 二、Grid视图 143 三、小结 147 第二十一章:GridPanel分页 148 一、跑跑题——JSON-LIB 148 二、分页工具栏 154 三、分页 154 四、小结 157 第二十二章:GridPanel扩展 158 一、学会自学吧,朋友 158 二、带摘要的GridPanel 158 三、RowExpander 162 四、分组GridPanel 165 五、将带摘要的GridPanel和分组GridPanel合二为一 168 六、小结 171 第二十三章:可编辑GridPanel——EditGridPanel 172 一、EditGridPanel 172 二、编辑订单数据 173 三、保存修改的数据至服务器 178 四、处理请求 179 五、完整源代码 181 六、验证 186 七、替换选择模型 187 八、小结 187 第二十四章:树与选择模型 188 一、树——TreePanel 188 二、创建简单的TreePanel 189 三、选择模型 192 四、MultiSelectionModel 195 五、带复选框的节点 195 六、小结 199 第二十五章:动态操作树节点 200 一、概述 200 二、基本操作 201 三、事件 203 四、小结 204 第二十六章:远程获取节点数据 205 一、 概述 205 二、异步载解析 206 三、小结 212 第二十七章:选项卡面板——Ext.TabPanel 214 一、关于魅族和M8 214 二、TabPanel概述 214 三、TabPanel标签操作 216 四、标签弹出菜单 217 五、小结 220 第二十八章:Viewport类 221 一、概述 221 二、Viewport的基本使用 221 三、小结 226 第二十九章:综合项目 227 一、概述 227 二、数据库设计 228 三、持久层封装 229 四、DAO 235 五、业务层 238 六、控制器Action 242 七、Spring配置文件 249 八、主界面 251 九、添新员工 253 十、员工信息维护 255 十一、效果图 261 十二、小结 262

87,920

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧