Olá,
Estou realizando testes com VRaptor + ExtJS e estou com dificuldades em manipular as informações.
Possuo um grid de “Contatos” e ao tentar inserir/atualizar um registro, o objeto chega para o VRaptor (Controller) nulo.
Códigos:
ContatosController.java:
@Post
public void update(Contato data){
this.daoGenerico.update(data);
result.use(ExtJSJson.class).from(data).success(true).serialize();
}(ExtJS Controller) Contatos.js:
[code]Ext.define(‘ExtMVC.controller.Contatos’, {
extend: ‘Ext.app.Controller’,
stores: ['Contatos'],
models: ['Contato'],
views: ['contato.Formulario', 'contato.Grid'],
refs: [{
ref: 'contatoPanel',
selector: 'panel'
},{
ref: 'contatoGrid',
selector: 'grid'
}
],
init: function() {
this.control({
'contatogrid dataview': {
itemdblclick: this.editarContato
},
'contatogrid button[action=add]': {
click: this.editarContato
},
'contatogrid button[action=delete]': {
click: this.deleteContato
},
'contatoform button[action=save]': {
click: this.updateContato
}
});
},
editarContato: function(grid, record) {
var edit = Ext.create('ExtMVC.view.contato.Formulario').show();
if(record){
edit.down('form').loadRecord(record);
}
},
updateContato: function(button) {
var win = button.up('window'),
form = win.down('form'),
record = form.getRecord(),
values = form.getValues();
var novo = false;
if (values.id > 0){
record.set(values);
} else{
record = Ext.create('ExtMVC.model.Contato');
record.set(values);
this.getContatosStore().add(record);
novo = true;
}
win.close();
var teste = this.getContatosStore();
alert( teste );
this.getContatosStore().sync();
if (novo){ //faz reload para atualziar
this.getContatosStore().load();
}
},
deleteContato: function(button) {
var grid = this.getContatoGrid(),
record = grid.getSelectionModel().getSelection(),
store = this.getContatosStore();
store.remove(record);
this.getContatosStore().sync();
//faz reload para atualziar
this.getContatosStore().load();
}
});[/code]
(ExtJS Model) Contato.js:
Ext.define('ExtMVC.model.Contato', {
extend: 'Ext.data.Model',
fields: ['id', 'name', 'phone', 'email']
});
(ExtJS Store) Contatos.js
[code]Ext.define(‘ExtMVC.store.Contatos’, {
extend: ‘Ext.data.Store’,
model: ‘ExtMVC.model.Contato’,
autoLoad: true,
pageSize: 35,
autoLoad: {start: 0, limit: 35},
proxy: {
simpleSortMode: true,
type: 'ajax',
api: {
read: 'contatos/list',
create: 'contatos/create',
update: 'contatos/update.json',
destroy: 'contatos/delete'
},
reader: {
type: 'json',
root: 'data'
},
writer: {
type: 'json',
writeAllFields: true,
encode: false,
root: 'data'
}
}
});
[/code]
(ExtJS View) Formulario.js
[code]Ext.define(‘ExtMVC.view.contato.Formulario’, {
extend: ‘Ext.window.Window’,
alias : ‘widget.contatoform’,
requires: ['Ext.form.Panel','Ext.form.field.Text'],
title : 'Editar/Criar Contato',
layout: 'fit',
autoShow: true,
width: 280,
iconCls: 'icon-user',
initComponent: function() {
this.items = [
{
xtype: 'form',
padding: '5 5 0 5',
border: false,
style: 'background-color: #fff;',
fieldDefaults: {
anchor: '100%',
labelAlign: 'left',
allowBlank: false,
combineErrors: true,
msgTarget: 'side'
},
items: [
{
xtype: 'textfield',
name : 'id',
fieldLabel: 'id',
hidden:true
},
{
xtype: 'textfield',
name : 'name',
fieldLabel: 'Nome'
},
{
xtype: 'textfield',
name : 'phone',
fieldLabel: 'Telefone'
},
{
xtype: 'textfield',
name : 'email',
fieldLabel: 'Email'
}
]
}
];
this.dockedItems = [{
xtype: 'toolbar',
dock: 'bottom',
id:'buttons',
ui: 'footer',
items: ['->', {
iconCls: 'icon-save',
text: 'Salvar',
action: 'save'
},{
iconCls: 'icon-reset',
text: 'Cancelar',
scope: this,
handler: this.close
}]
}];
this.callParent(arguments);
}
});[/code]
A única forma que eu consegui fazer apresentação do grid, foi através de uma JSP. Não sei se esta forma esta correta:
[code]<%@taglib uri=“http://java.sun.com/jsp/jstl/core” prefix=“c”%>
<%@taglib uri=“http://java.sun.com/jsp/jstl/fmt” prefix=“fmt”%>
<link rel="stylesheet" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="<c:url value="/extjs/ext-all-dev.js"/>"></script>
<script type="text/javascript" src="app.js"></script>
</head>
(ExtJS) app.js
[code]// Carregamento dinâmico
Ext.Loader.setConfig({enabled: true});
Ext.application({
// Nome da aplicação
name: ‘ExtMVC’,
// Controllers da Aplicação
controllers: [
'Contatos'
],
// Se verdadeiro, a aplicação vai instanciar a classe Viewport automaticamente. Para isso, temos que ter um arquivo chamado Viewport.js dentro da pasta app/view.
autoCreateViewport: true
});[/code]
Enfim, resumindo o problema: Quando eu tento inserir/atualizar um registro, o controller do java recebe o parâmetro “data” null.