1.EXTJS??Row?Editor?Grid??點取消時插入的新行?的解決方法?<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />

????<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',

width:?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='新增'?οnclick='add_row("+rowIndex+",\""+grid_id+"\");'/>?"?+"<input?type='button'? style='background-Color:#FFF;border:0;font-size:?12px;'?value='刪除'? οnclick='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();??點擊取消時調用刪除方法。防止插入的行留空問題

????????????????????}

????????????????}?

????????????}

});

轉載于:https://www.cnblogs.com/holyes/archive/2012/06/01/97fa7b99d59c9931fea2bcc1c02467a7.html

總結

以上是生活随笔為你收集整理的1.EXTJS Row Editor Grid 点取消时插入的新行 的解决方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。