Ext JS 4行编辑保存问题

Ext JS 4 row editing save issues

本文关键字：保存问题编辑 4行 JS Ext 更新时间：2023-09-26

我试图使用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>

任何帮助都是非常感激的。谢谢!

好吧，我切换到celllediting而不是rowEditing，现在它似乎工作得很好(内置tab/shift+tab使用太)。