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>
どんな助けでも大歓迎です。ありがとう！