我正在尝试使用 Ext JS 创建一个简单的网格,它允许我快速浏览和编辑每一行。基本上我想开始编辑一行,点击向下箭头并能够开始编辑下一行。如果我不保存到最后也没关系,但现在当我尝试向下导航到下一个字段时,它告诉我需要先提交或取消编辑。是否有我错过的设置或我只是忽略的东西?我对 Ext JS 还是很陌生,还没有完全理解一切是如何工作或联系在一起的。
这是我的代码:
<!DOCTYPE html>
<html>
<head>
<title>Grid Testing</title>
<script type="text/javascript" src="js/ext-4.1.1a/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.sencha.com/ext-4.1.1a-gpl/resources/css/ext-all-debug.css" />
<style type="text/css">
.x-selectable, .x-selectable * {
-moz-user-select: text!important;
-khtml-user-select: text!important;
}
.x-grid-row-editor-buttons{
display: none;
}
</style>
</head>
<body>
<div id="grid-example"></div>
<script type="text/javascript">
Ext.application({
name: 'myGrid',
autoCreateViewport: false,
launch: function() {
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.state.*',
'Ext.form.*',
]);
/**
* MODEL
**/
var model = Ext.define('Answer', {
extend: 'Ext.data.Model',
fields: [{
name: 'answer_number',
type: 'float',
convert: null,
defaultValue: undefined
},
{
name: 'answer_text',
type: 'float',
convert: null,
defaultValue: undefined
},
{
name: 'data_column',
type: 'float',
convert: null,
defaultValue: undefined
}],
idProperty: 'answer_number'
});
/**
* STORE
**/
// sample static data for the store
var myData = [[1, 'test answer 1', 12], [2, 'test answer 2', 12], [3, 'test answer 3', 12], [4, 'test answer 4', 12], [5, 'test answer 5', 12]];
// create the data store
var store = Ext.create('Ext.data.ArrayStore', {
model: 'Answer',
data: myData,
autoSync: true,
autoLoad: true,
});
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 1,
autoCancel: false,
});
var columns = [{
text: '#',
width: 40,
sortable: false,
dataIndex: 'answer_number'
},
{
text: 'Answer',
flex: 1,
sortable: false,
dataIndex: 'answer_text',
editor: {
allowBlank: true
}
},
{
text: 'Data Column',
width: 75,
sortable: false,
dataIndex: 'data_column'
}];
// create the Grid
var grid = Ext.create('Ext.grid.Panel', {
store: store,
stateful: true,
collapsible: false,
multiSelect: true,
columns: columns,
height: 150,
width: 600,
renderTo: 'grid-example',
plugins: [rowEditing],
}); //end grid
grid.getEl().addKeyMap({
eventName: "keyup",
binding: [
{
// Navigate through the answers or create a new one if at the end
key: Ext.EventObject.DOWN,
fn: function(){
store.commitChanges(); //this doesnt seem to be working
var currentRow = grid.getSelectionModel().getSelection()[0];
var rowCount = store.count();
if((currentRow['index']+1) < rowCount){
//select next row
rowEditing.startEdit((currentRow['index']+1), 1);
}else{
//create new one with dummy data
var r = Ext.create('Answer', {
answer_number: '9',
answer_text: '',
data_column: '50'
});
store.insert(rowCount, r);
rowEditing.startEdit(rowCount, 1)
}
}
},
{
// Navigate up through the answers
key: Ext.EventObject.UP,
fn: function(){
store.commitChanges();
var currentRow = grid.getSelectionModel().getSelection()[0];
rowEditing.startEdit((currentRow['index']-1), 1);
}
}
]
});
},
});
</script>
</body>
</html>
很感谢任何形式的帮助。谢谢!