ExtJS4.2 Grid行编辑、新增行及删除行
本节主要学习ExtJS4.2 Grid行编辑、新增行及删除行,示例图片:
主要内容如下:
行编辑模式
新增行
删除行
1.行编辑模式
在Grid中定义中配置插件Ext.grid.plugin.RowEditing,点击单元格时即启动行编辑模式,见上图。
var rowEditing = Ext.create(‘Ext.grid.plugin.RowEditing‘, { clicksToMoveEditor: 1, autoCancel: false }); plugins: [rowEditing]
2.新增行和删除行
在Grid顶部添加“添加”和“删除”按钮,点击“添加”按钮时新增一行数据,点击“删除”按钮时删除选中行数据。
tbar: [{ text: ‘Add‘, iconCls: ‘add‘, handler : function() { rowEditing.cancelEdit(); // Create a model instance var r = Ext.create(‘Itdatum.model.UserModel‘, { name: ‘New Guy‘, email: ‘[email protected]‘, birthday: Ext.Date.clearTime(new Date()) }); Ext.getCmp(‘testGrid‘).getStore().insert(0, r); rowEditing.startEdit(0, 0); } }, { itemId: ‘removeUser‘, text: ‘Remove‘, iconCls: ‘delete‘, handler: function() { Ext.MessageBox.confirm(‘Confirm‘, ‘确定删除该记录?‘, function(btn){ if(btn!=‘yes‘) { return; } var sm = Ext.getCmp(‘testGrid‘).getSelectionModel(); rowEditing.cancelEdit(); var store=Ext.getCmp(‘testGrid‘).getStore(); store.remove(sm.getSelection()); if (store.getCount() > 0) { sm.select(0); } }); }, disabled: true }]
新增行实例图片:
删除行实例图片:
本文出自 “Itdatum” 博客,请务必保留此出处http://itdatum.blog.51cto.com/1152235/1541812
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。