网格内容 JSON 转换

Question

我有一个网格，用户可以根据需要在其中添加新行。添加所有行后，他们单击“保存”按钮。单击保存按钮时，我想将用户以 JSON 格式输入的所有数据发送到服务器端代码（在我的例子中是一个 servlet）

下面是模型和商店的定义：

 Ext.define('Plant', {
    extend: 'Ext.data.Model',
    fields: [
        // the 'name' below matches the tag name to read, except 'availDate'
        // which is mapped to the tag 'availability'
        {name: 'common', type: 'string'},
        {name: 'botanical', type: 'string'},
        {name: 'light'},
        {name: 'price', type: 'float'},
        // dates can be automatically converted by specifying dateFormat
        {name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y'},
        {name: 'indoor', type: 'bool'}
    ]
});


// create the Data Store
var store = Ext.create('Ext.data.Store', {
    // destroy the store if the grid is destroyed
    autoDestroy: true,
    model: 'Plant'
});

点击保存按钮后，我可以像这样获得商店：

{
        text: 'Save',
        handler : function(){
            //Getting the store
            var records = grid.getStore();
            console.log(records.getCount());
            Ext.Ajax.request({
                url: '/CellEditing/CellEditingGridServlet',
                method: 'POST',
                jsonData: {
                    //How to assign the store here such that 
                    //it is send in a JSON format to the server?
                },
                callback: function (options, success, response) {

                }
            });
        }

但我不知道如何将商店内容转换为JSON并在ajax请求的jsonData中发送。

我希望服务器端的 JSON 数据是这样的：

{"plantDetails":
[
{
    "common": Plant1,
    "light": 'shady',
    "price": 25.00,
    "availDate": '05/05/2013',
    "indoor": 'Yes'
}, 
{
    "common": Plant2,
    "light": 'most shady',
    "price": 15.00,
    "availDate": '12/09/2012',
    "indoor": 'No'
},
]
}

请告诉我如何实现这一目标。

问候，

Answer 1

同意 Neil 的观点，正确的做法是通过配备代理和作家的可编辑商店。在此处查看示例：http://docs.sencha.com/ext-js/4-1/#!/example/grid/cell-editing.html

Answer 2

商店

writer :
            {
            type : 'json',
            allowSingle : true
            }

根据您的用例使用 allowSingle 进行实验

在你的控制器中

//if you want to set extra params
  yourStore.getProxy().setExtraParam("anyParam",anyValue);
// sync the store
  yourStore.sync({success : function() {
         yourGrid.setLoading(false); 
    .. },
    scope : this // within the scope of the controller
  });

您应该使用新 id 创建模型（您可以在服务器端忽略它并使用自己的密钥生成，但它让 extjs4 出于内部目的知道已创建新记录）。

创建模型实例

var r = Ext.create('yourModel', { id: idGen++, propA : valA , ... });

插入网格

store.insert(0,r);
var editPlugin = grid.getPlugin(editPluginId);
editPlugin.startEdit(0,1);

一旦您收到回复，ID 就可以更新为真实值。

在商店中

reader :
    {
        type : 'json',
        root : 'yourdata',
        successProperty : 'success',
        idProperty : 'id'
    }

如果您要使用相同的网格进行处理和编辑，那么您可以使用 write 事件或适当的事件

在商店中进行更高级的处理

listeners :
    {
        write : function(store,operation, eOpts)
        {
            var insertedData = Ext.decode(operation.response.responseText);
                    .. do something
        }
    }

我会推荐使用 Extjs4 的 mvc 架构

Answer 3

这是我尝试过的，它似乎有效：

 var store = Ext.create('Ext.data.Store', {
    // destroy the store if the grid is destroyed
    autoDestroy: true,
    model: 'Plant',
    proxy: {
        type: 'ajax',
        url: '/CellEditing/CellEditingGridServlet',
        writer: {
            type: 'json',
            root: 'plantDetails'
        }
    }

handler : function(){
            grid.getStore().sync();

但我在服务器端的 JSON 中获得了一个附加参数：

"id": null

我的模型中没有这个id，那么这是从哪里来的？有没有办法给它设置一些值而不是默认的空值？