2012-04-09 13 views
0

私はExtjs4と一般的なJavaScriptの世界を慣れていません。私はドキュメンテーションとサンプルを調べ、基本的なCRUDグリッドを作成して、春のバックエンドで実行しようとしています。Extjs4 RESTfulなCRUDグリッド(Springコントローラあり)

私はextjsのプロキシに関連して混乱しています、彼らはMVCのパラダイムに従って店舗やモデルに入っていますか?

私はこれらをまとめたcontroller.jsを定義しました。 私はREST呼び出しが指定されているURLにアライメントされると考えていましたが、これは今のところですが、作成呼び出しはまだリスト全体を送信しています。私はJavaオブジェクトへの自動変換のバックエンドでjacksonを使用していますが、何とか動作していません(追加と更新のみ)。

これらをリンクするにはどうすればよいですか?

a)ユーザーを追加します。新しいUserModelを作成して、そのような休憩コールを呼び出すのですか、モデルで指定されたプロキシによって自動的にサポートされていますか?

var record = new App.model.UserModel(); 
    store = Ext.getStore('UsersStore'); 
    store.insert(0, record); 
    store.save(); // .. this invokes the /createUser method 
        // .. what about /update ? 

b)は、私は私がビューのための参照が可能です私controller.js事前に

おかげ

関連するコード・リストにroweditorを取得することができますどのように.. RowEditingプラグインを使用しています...

//UserController.js

Ext.define('App.controller.UsersController', { 
extend : 'Ext.app.Controller', 
init: function() { 
    this.control({ 
     'userList button[action=add]' : { 
       click : this.editUser 
      }   }); }, 
views : ['user.List','user.Edit'], 
stores : ['UsersStore'] , 
models : ['UserModel'], 
editUser : function(grid,record) 
{ 
    // empty record 
    var record = new App.model.UserModel(); 
    // created new record 

//How to get a reference to the roweditor here and then save that to the backend ? 

//store = Ext.getStore('UsersStore'); 
    //store.insert(0, record); 
    //store.save(); 
    // this.getView('user.List').getP('rowEditor').startEdit(0, 0); 

}}); 

//リスト。 JS

var rowEditor = Ext.create('Ext.grid.plugin.RowEditing', { 
clicksToEdit: 2 
} 
Ext.define('App.view.user.List' ,{ 
extend: 'Ext.grid.Panel', 
alias : 'widget.userList', 
title : 'All Users', 
store : 'UsersStore', 
selType: 'rowmodel', 
plugins: rowEditor, 
initComponent: function() { 
    this.columns = [ 
     {header: 'SNo', dataIndex: 'userID', width:50}, 
     {header: 'UID', dataIndex: 'userUID', flex: 1, editor: 'textfield', allowBlank:false}, 
     {header: 'Name', dataIndex: 'userName', flex: 1, editor:'textfield',allowBlank:false}, 
     { header: 'Level', dataIndex: 'userLevel', flex: 1, 
      editor: {xtype: 'combobox', typeAhead: true, triggerAction: 'all', selectionOnTab:true, 
        store : [ 
           ['Level 1','Level 1'], 
           ['Level 2','Level 2'], 
           ['Level 3','Level 3'] 

          ] 
       } 
     }, 
     {header: 'Email', dataIndex: 'emailID', flex: 1, editor: 'textfield'} 
    ]; 
    this.callParent(arguments); 
}, 
dockedItems : [{ 
    xtype : 'toolbar', 
    items : [{ 
     text: 'Add', 
     iconCls: 'icon-add', 
     action: 'add' 

    }] 
}]}); 

//Model.js

Ext.define('App.model.UserModel', { 
extend: 'Ext.data.Model', 
fields: ['userID','userUID','userName', 'userLevel' ,'emailID'], 
proxy : { 
    type: 'ajax', 
    api : 
     { 
      read : 'rest/user/fetchAll', 
      update:'rest/user/updateUser', 
      create :'rest/user/createUser', 
      destroy : 'rest/user/deleteUser' 
     }, 

    reader : 
     { 
     type : 'json', 
     root : 'users', 
     successProperty : 'success' 
     }, 

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

// USERSTORE

Ext.define('App.store.UsersStore', { 
extend: 'Ext.data.Store', 
model: 'App.model.UserModel', 
autoLoad : true}); 

//サンプルのJavaコントローラ

@Controller 
@RequestMapping("/rest/user") 
public class UserController { 

@RequestMapping(value = "/fetchAll" , method= RequestMethod.GET) 
public @ResponseBody Map<String,? extends Object> 
    fetchUsers()   { 
    Map<String,Object> responseMap = new HashMap<String,Object>(); 
    responseMap.put("success",true); 
    responseMap.put("users",userService.getUserRepository().findAll()); 
    return responseMap; } 

    // was expecting a single object here ? 

@RequestMapping(value = "/createUser") 
public @ResponseBody Map<String,? extends Object> 
         createUser(@RequestBody List<User> users) 
{ ... } 

} 

答えて

2
  1. 私は考えモデルではなく、プロキシのストアオブジェクトを配置します。しかしそれは単に個人的な好みです。

  2. autoSyncプロパティがtrueに設定されている場合、ストアオブジェクトにレコードを追加すると、自動的に作成要求が生成されます。あなたの作成リクエストではどういうことが起こっていますか?何が送られていますか?

+0

二デフものリスト全体を送り返し、私はJSONが汚れレコードを認識させるためにidPropertyを追加する必要がありましたJSONリーダー

reader : { type : 'json', root : 'users', successProperty : 'success' //added idProperty : 'userID' }, 

であります: 1)私はroweditingプラグインを介してレコードを追加したい。だから私はどのようにビューでそれを参照するのですか?一度私はその行の '更新'プロパティでそれを行うには、私は作成要求を発射する必要がありますか?それは自動的にしない...ですか?2)私は手動でレコードの作成をテストする場合:新しいモデルを作成し、ストアに挿入し、ストアを保存すると、グリッドに存在するデータセット全体を含むサーバーへの作成要求が送信されます。理想的には送られてきました。それは行動ではないでしょうか? – sunny

+0

1.新しいレコードを作成するボタンまたはメニューアイテムがあると思われます。次に、コントローラ内でrowEditor.startEdit(0,0)を実行します。 – sha

+0

2.はい、新しいレコードのみが送信されるはずです – sha

0

上記のShaのコメントを試したところ、私は最後に問題を解決することができました。 問題は、そうでなければ、新たなレコードとしてすべてを扱い、

+0

idpropertyをモデル定義に移動することをお勧めします。私が手伝ってくれてうれしい – sha

関連する問題