網格內容JSON轉換

我有一個網格，其中用戶和添加新行數儘可能多。添加完所有行後，點擊「保存」按鈕。在保存按鈕的點擊，我想給用戶以JSON格式輸入到服務器端代碼（即在我的情況下，一個servlet）網格內容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) { 

       } 
      }); 
     }

但我不知道怎麼樣去商店的內容轉換成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' 
}, 
] 
}

請讓我知道如何做到這一點。

問候，

來源

2012-10-24 user182944

你應該使用代理這個。 http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.proxy.Ajax –

確保並查找商店的同步功能，讓您的生活更加輕鬆，已經通過其ajax代理正確設置了商店。 –

評論真的幫了很多，請問我能告訴我以下幾個原因嗎？ – user182944

同意尼爾，這樣做正確的方式是通過與代理和作家outfited可編輯的商店。看到這裏例如：http://docs.sencha.com/ext-js/4-1/#!/example/grid/cell-editing.html

來源

2012-10-24 20:51:29 dbrin

評論真的幫了很多，請問我能告訴我以下幾個原因嗎？ – user182944

這是我嘗試和它似乎工作：

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那麼這是從哪裏來的？有沒有一些方法來設置一些值，而不是有一個默認的空值？

來源

2012-10-25 12:55:36 user182944

idProperty默認設置爲id，並且是必填字段。您應該將模型上的此屬性設置爲記錄的主鍵。 – dbrin

商店

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 
    });

你應該用新的標識來創建模型（你可以忽略它服務器端並使用您自己的密鑰生成，但是爲了其內部目的，它允許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-25 15:16:26 sunny

網格內容JSON轉換

回答

相關問題