0

ユーザーが必要なだけ新しい行を追加するグリッドがあります。すべての行を追加したら、[保存] ボタンをクリックします。[保存] ボタンをクリックすると、ユーザーが入力したすべてのデータを JSON 形式でサーバー側のコード (つまり、私の場合はサーブレット) に送信したいと考えています。

以下は、モデルとストアの定義です。

 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) {

                }
            });
        }

jsonDataしかし、ストアのコンテンツを JSON に変換して ajax リクエストで送信する方法がわかりません。

サーバー側で次のような 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'
},
]
}

これを達成する方法を教えてください。

よろしく、

4

3 に答える 3

1

店

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アーキテクチャを使用することをお勧めします

于 2012-10-25T15:16:26.593 に答える
1

ニールと同意見ですが、これを行う正しい方法は、プロキシとライターを備えた編集可能なストアを使用することです。ここで例を参照してください: http://docs.sencha.com/ext-js/4-1/#!/example/grid/cell-editing.html

于 2012-10-24T20:51:29.513 に答える
0

これは私が試したもので、うまくいくようです：

 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はどこから来ているのですか? デフォルトの null 値を設定するのではなく、いくつかの値を設定する方法はありますか?

于 2012-10-25T12:55:36.457 に答える