Question

我是ext js的新手，想为Grid做一些POC。我需要从oracle数据库中读取数据并单击编辑器更新程序然后将其更新，然后将其传递给servlet进行编辑。

我一直在从数据库中呈现数据，但现在无法获得如何获取更新数据并将其传递给servlet的信息。

请找到我的网格代码 -

Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.util.*',
    'Ext.state.*'
]);

// Define Person entity
// Null out built in convert functions for performance *because the raw data 


  Ext.onReady(function() {


Ext.QuickTips.init();

// setup the state provider, all state information will be saved to a cookie
Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));


    Ext.define('person', {
                extend: 'Ext.data.Model',
                fields: [


                    {name: 'sso', type: 'string'},
                    {name: 'fname', type: 'string'},

                    {name: 'lname', type: 'string'},
                    {name: 'msso', type: 'string'},
                    {name: 'email_address', type: 'string'},
                    {name: 'person_status', type: 'string'}                     
                ]
            });

 var ds = new Ext.data.Store({
            model:'person',
              autoLoad: true, 
            //url:'/FormAction',
             actionMethods: {create: "POST", read: "POST", update:          "POST", destroy: "POST"},
         proxy: {  
             type: 'ajax',      
             url: '/identityiq/FormAction',       
             reader: {      
                 type: 'xml',
                 record: 'record'
              },
           }                

            });

var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
                clicksToEdit: 1
            });

   // create the Grid
var grid = Ext.create('Ext.grid.Panel', {
    store: ds,
    columns: [
        {
            text     : 'SSO',
            width:80,
            sortable : true,
            dataIndex: 'sso'
        },
        {
                    id: 'fname',
                    header: 'First Name',
                    dataIndex: 'fname',
                    width:80,
                    flex: 1,
                    field: {
                        allowBlank: false
                    }
        },
        {

            id: 'lname',
            header     : 'Last Name',
            width:80,               
            sortable : true,
            dataIndex: 'lname',
            field: {
                        allowBlank: false
                    }
        },
        {
            text     : 'Manager SSO',
            width    : 80,
            sortable : true,               
            dataIndex: 'msso'
        },
        {
            text     : 'Email Address',
            width    : 80,
            sortable : true,               
            dataIndex: 'email_address'
        },
        {
            text     : 'Personstatus',
            width    : 35,
            sortable : true,               
            dataIndex: 'person_status'
        }
    ],
    selModel: {
        selType: 'cellmodel'
    },
    height: 350,
    width: 600,
    title: 'Array Grid',
    renderTo: 'myDiv',
    viewConfig: {
        stripeRows: true,
        enableTextSelection: true
    },
    frame: true,
    tbar: [
 {
     text: 'Save',


     handler: function ()
     {
        // myGrid is a reference to your Ext.grid.Panel instance
        if (grid.editingPlugin.editing) {


            var value = grid.editingPlugin.getActiveEditor().field.value;

            alert('Value: ' + value);
        }
     }
 }
 ],
    plugins: [cellEditing]
});
});

- 在这段代码中，我收到错误 TypeError：grid.editingPlugin.getActiveEditor（...）为null

请你回答这个问题，因为我被困住了，需要提出这个POC。

谢谢，阿什维尼

根据下面的答案，如果我替换保存处理程序 -

，下面的代码工作正常

    handler: function ()
     {
        alert(ds.getModifiedRecords());
        console.log(ds.getModifiedRecords());

        var modified_data ={};
        modified_data = ds.getModifiedRecords();

        for (var i = 0; i < modified_data.length; i++) {
    var record =          modified_data[i];                 
                alert(record.data.fname);
        }
     }

Answer 1

尝试使用grid的SelectionModel来获取数据，例如

var valueList = grid.getSelectionModel().getSelection(); //Returns an array of the currently selected records.
var value =  valueList[0].data.fname; //Should get First Name

Answer 2

我猜你的Save按钮处理程序的问题是你正在尝试获取一个单元格的活动编辑器，但是一旦它失去焦点就会自动删除单元格编辑器，因此grid.editingPlugin.getActiveEditor()返回null }。

好消息是您不必这样做，Ext.grid.plugin.CellEditing会自动为您更新相应的商店记录，因此您需要做的就是在Save按钮处理程序中进行所有修改：

// Simply use your store method for fetching modified records
console.log(ds.getModifiedRecords());

如果您需要在编辑单元格后执行某些操作，则应该查看Ext.grid.plugin.CellEditing edit event。

无法读取extjs Grid中的已编辑数据

2 个答案: