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'
    }

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

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

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，这是从哪里来的？有没有办法为它设置一些值而不是默认的空值？

网格内容JSON转换

3 个答案: