私は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)
{ ... }
}
二デフものリスト全体を送り返し、私はJSONが汚れレコードを認識させるためにidPropertyを追加する必要がありましたJSONリーダー
であります: 1)私はroweditingプラグインを介してレコードを追加したい。だから私はどのようにビューでそれを参照するのですか?一度私はその行の '更新'プロパティでそれを行うには、私は作成要求を発射する必要がありますか?それは自動的にしない...ですか?2)私は手動でレコードの作成をテストする場合:新しいモデルを作成し、ストアに挿入し、ストアを保存すると、グリッドに存在するデータセット全体を含むサーバーへの作成要求が送信されます。理想的には送られてきました。それは行動ではないでしょうか? – sunny
1.新しいレコードを作成するボタンまたはメニューアイテムがあると思われます。次に、コントローラ内でrowEditor.startEdit(0,0)を実行します。 – sha
2.はい、新しいレコードのみが送信されるはずです – sha