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

2014-04-25 11:08:49 375 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

给GridPanel增加行复选框按钮大家都知道GridPanel是一个非常好用的控件，但是没有像C#一样的自定义的复选框。那我们就手工给它加一个复选框列，并实现全选清除获取选中的数据。以下GridPanel简称GP。 1.首先在GP的Store里面增加一个是否选中的字段源：。因为不用数据库返回，所以直接设置默认值为0，不选中。 2.在GP的ColumnModel里，增加我们的第一行复选框：。 3.实现点击复选框的时候界面能够阅读详情

菜鸟现在有两个问题：1，gridpanel和store绑定之后，数据也能正常显示在grid上，可现在要求把数据中的某一列编辑为手动输入，不知道是在远grid上设置，还是在store中设置；
2，在另外一个grid前面添加一个复选框，就是可以选择某一行数据，然后可以点“修改”按钮，现在这个复选框的问题不知道怎么添加进去，而且只能单选其中一行进行修改。
两个问题现在主要是第一个问题，要编辑数据之后，保存返回到后台，现在就卡在我这个地方，后面的数据进行不了。
请求大神帮忙，能有可行的代码加进去更好。

...全文

避坑指南：STM32移植CanFestival时那些没人告诉你的细节（含TJA1050硬件适配）本文深入解析STM32移植CanFestival协议栈时的关键细节与TJA1050硬件适配技巧，涵盖AVR残留代码清理、定时器中断优化及CAN通信稳定性提升方案。特别针对TJA1050在特定波特率下的信号畸变问题提供实战解决方案，帮助开发者规避移植过程中的隐形陷阱，实现工业级稳定通信。阅读详情

a349051255

JavaScript 87,983 成员 224,681 内容

+ 关注 + 加入社区

切换为时间正序

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},

xtype: 'gridcolumn',
                                            width: 50,
                                            dataIndex: 'mark',
                                            text: 'Mark',
                                            editor: {
                                                xtype: 'textfield',
                                                enableKeyEvents: true
                                            }

引用 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。祝好！

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

相关推荐