1.EXTJS Row Editor Grid 点取消时插入的新行 的解决方法
<link rel="stylesheet" type="text/css" href="/public/css/RowEditor.css" />
<script type="text/javascript" src="/public/js/Plugins/RowEditor.js"></script>
将新增 删除放到行后面。
{header: '操作',
dataIndex: 'opt',
name:'opt',
align: 'center',
100,
renderer:function(val, metadata, record, rowIndex, colIndex, store){
var grid_id=this.name;
return "<input type='button' style='background-Color:#FFF;border:0;font-size: 12px;' value='新增' onclick='add_row("+rowIndex+",\""+grid_id+"\");'/> " +"<input type='button' style='background-Color:#FFF;border:0;font-size: 12px;' value='删除' onclick='del_row(\""+grid_id+"\");'/>";
}
外部函数
function add_row(Index,grid_id) {
var grid = Ext.getCmp(grid_id);
grid.addRow(Index);
}
function del_row(grid_id) {
var grid = Ext.getCmp(grid_id);
grid.isEdit = false;
grid.delRow(true);
}
初始化时的函数 控制内的函数。
addRow : function(Index){
var Employee = Ext.data.Record.create([{
name: 'id'
}]);
var u = new Employee({
id: ""
});
this.editor.stopEditing();
this.store.insert(Index+1,u); //在当前行的下一行插入
this.getView().refresh();
this.getSelectionModel().selectRow(Index+1);
this.editor.startEditing(Index+1);
},
delRow:function(){
this.editor.stopEditing();
if(!this.isEdit) {
if(this.store.getCount() != 1)
{
var rec = this.getSelectionModel().getSelected();
this.store.remove(rec);
this.getView().refresh();
}else{
alert('至少要有一个属性。')
}
}
}
New一个编辑的面板
var editor = new Ext.ux.grid.RowEditor({
clicksToEdit : 2, //去掉单击编辑情况
saveText: '确定' ,
cancelText: '取消',
onRowDblClick: function(g, rowIndex, e){
this.startEditing(rowIndex, false);
this.doFocus.defer(this.focusDelay, this, [e.getPoint()]);
_this.isEdit = true; //双击的时候设置为true 利用这个来控制取消的时候不删除。
},
listeners : {
canceledit : function(re,isPress){
if(isPress){
_this.delRow(); 点击取消时调用删除方法。防止插入的行留空问题
}
}
}
});