Question

我正在尝试使用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>

非常感谢任何帮助。谢谢！

Answer 1

好吧，我切换到了cellEditing而不是rowEditing，现在看起来效果很好（内置tab / shift + tab也是如此）。

Ext JS 4行编辑保存问题

1 个答案: