私はExtjs4とJavaScriptの世界全般に不慣れです。ドキュメントとサンプルを調べて、基本的な CRUD グリッドを立ち上げて、Spring バックエンドで実行しようとしました。
extjs のプロキシに関連する混乱があります。それらは MVC パラダイムに従ってストアまたはモデルにありますか?
これらをまとめる controller.js を定義しました。指定された URL に応じて REST 呼び出しが行われると思っていたのですが、今のところ、作成呼び出しはまだリスト全体を送信しています。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) RowEditing プラグインを使用しています。ビューの参照が利用可能な controller.js で行エディターを取得するにはどうすればよいですか?
前もって感謝します
関連するコード リスト ...
//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);
}});
//List.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'
}
}});
//ユーザーストア
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)
{ ... }
}