PDA

View Full Version : JSON to load form



fsa3
10 Jun 2009, 9:25 AM
My understanding is that a FormPanel whose items are named the same as JSON returned by the server will automatically map to the right elements when the load function is called.

I have a simple form:


var fs = new Ext.FormPanel({
frame: false,
title:'Account Information',
labelAlign: 'right',
labelWidth: 85,
width:340,
waitMsgTarget: true,
header:false,
hideBorders:true,
items: [
new Ext.form.FieldSet({
title: 'Account Information',
defaultType: 'textfield',
autoHeight:true,
hideBorders:true,
hideLabel:true,

items: [{
fieldLabel: 'Email',
name: 'email',
readOnly:true,
width:190
}, {
fieldLabel: 'Nickname',
name: 'nickname',
allowBlank: false,
width:190
}, {
fieldLabel: 'Name',
name: 'name',
width:190
}, {
fieldLabel: 'Zip Code',
name: 'zip',
width:190
},
{
fieldLabel: 'My URL',
name: 'url',
vtype: 'url',
width:190
},
{
xtype: 'textarea',
fieldLabel: 'About Me',
name: 'aboutMe',
width:190
}
]
})]
});

That is loaded using:



acPanel.form.load({
url:'/A_GetAccountInfoJSON.jsp',
method:'GET',
success:function(form, action) {
},
failure:function(form, action) {
Ext.MessageBox.alert('Message', 'Load failed');
}
});

And my JSON is hardcoded as:


{success: true,
data: {
nickname: "1",
name: "2",
email: "3"
}
}

Yet no luck! - I see the AJAX call and the response, and I know if I put in bad JSON I get an error, but I can't get the mapping to occur.

Thanks for any guidance.

mohaaron
10 Jun 2009, 10:52 AM
If this helps this is how I am doing the same thing.



var jsonStore = new Ext.data.JsonStore({
url: '/Bugs/GetBugs',
method: 'GET', // Or 'POST'
totalProperty: 'totalRows', // This would be used for data set paging.
root: 'data', // This must match your data root name.
id: 'PKId',
fields: [
'PKId',
'more fields'
],
listeners: {
load: function(store, records, options) {
try {
// On store load get record at index 0.
var currentRecord = store.getAt(0);
// Get a reference to my FormPanel.
var form = Ext.getCmp('mainForm');
if (form) // Exists?
// load the record object into the form.
form.getForm().loadRecord(currentRecord);
} catch(err) {
console.log(err);
}
},
loadexception: function(store, options, response, e) {
console.log(e);
}
}
});

// Call the store.load method to execute and get the data.
// You could use JSonStore autoLoad: true for this.
jsonStore.load();


I hope this helps.

10 Jun 2009, 11:17 AM
Why setup a data store just to load a single record?? that makes no sense to me.

fsa3
10 Jun 2009, 1:09 PM
I found my issue, it was that I was calling the form.load at the wrong time. After tying it to an event on on the form (rather than before it was just the next step in the JS) it worked.

mohaaron
10 Jun 2009, 3:06 PM
In my case I'm doing more with code that is not shown. I'm actually loading the data store and binding it to a grid, then selecting the first row to load into the form so the form automatically has the first row from the grid loaded. I then also load the selected row into the form when it's changed on the grid.

Does that answer your question? Is there a better way to do this?

maxraeder
12 Jun 2009, 6:19 PM
IN this code a have that loading data into of form for edit and save in mysql.
How to make this?

function xcadastrocli(acao,id) {

//store.getAt(0).data.cnpj
//vcnpj=store.data.cnpj;
//alert(store.cnpj);
//vempresa:store.data.empresa;

Ext.QuickTips.init();
// Add the additional 'advanced' VTypes
Ext.apply(Ext.form.VTypes, {
password: function(val, field) {
if (field.initialPassField) {
var fp = Ext.getCmp(field.initialPassField);
return (val == fp.getValue());
}
return true;
},
passwordText: 'Passwords do not match'
});

Ext.onReady(function() {
var store = new Ext.data.JsonStore({
root: 'Resultados',
totalProperty: 'Total',
idProperty: 'threadid',
remoteSort: true,
fields: [
{name: 'id',mapping: 'id', type: 'int'},
{name: 'cnpj', mapping: 'cnpj'},
{name: 'empresa', mapping: 'empresa'},
{name: 'email', mapping: 'email'},
{name: 'telefone', mapping: 'telefone'}
],
load: function(store, records, options) {
try {
// On store load get record at index 0.
var currentRecord = store.getAt(0);
//alert(store.getAt(0).cnpj);
// Get a reference to my FormPanel.
var xform = Ext.getCmp('form');
if (xform) // Exists?
// load the record object into the form.
xform.getForm().loadRecord(currentRecord);
} catch(err) {
console.log(err);
}
},

// load using script tags for cross domain, if the data in on the same domain as
// this page, an HttpProxy would be better
proxy: new Ext.data.ScriptTagProxy({
url: 'http://www.locaudiovisual.com.br/adm/paginas/busca_clientes_ex.php?id='+id
}),

});
store.setDefaultSort('id', 'empresa');
store.load();
store.on('load', function() {


//alert(vcnpj)
if (acao=='e') {
var xuri='excluircli.php';
}else{
var xuri='alterarcli.php';
}

// create the Data Store

var form = new Ext.form.FormPanel({
id: 'clienteid',
baseCls: 'x-plain',
layout:'absolute',
bodyStyle:'z-index:1000;',
url:xuri (http://extjs.com/forum/xuri),
method: 'post',
monitorValid:true ,
defaultType: 'textfield',
waitMsgTarget: true,
items: [{
x: 0,
y: 5,
xtype:'label',
text: 'CNPJ:'
},{
x: 60,
y: 0,
name: 'cnpj',
anchor:'100%'
//value:ds.cnpj
},{
x: 0,
y: 35,
xtype:'label',
text: 'Empresa:'
},{
x: 60,
y: 30,
name: 'empresa',
anchor: '100%'
//value:vempresa
},{
x: 0,
y: 60,
xtype:'label',
text: 'Email:'
},{
x: 60,
y: 60,
name: 'email',
anchor: '100%',
value: vemail
},{
x: 0,
y: 90,
xtype:'label',
text: 'telefone:'
},{
x:60,
y: 90,
name: 'telefone',
anchor: '100%',
value: vtelefone
}
,{
x: 0,
y: 120,
xtype:'label',
text: 'Cidades:'
},
new Ext.form.ComboBox({
x: 60,
y: 120,
id:'cidades',
fieldLabel: 'Cidades',
store: new Ext.data.JsonStore({
url:'cidades.php' (http://extjs.com/forum/'cidades.php'),
root:'resultados',
fields: ['id', 'nome']
}),
value:vcidades,
valueField:'id',
displayField:'nome',
typeAhead: true,
forceSelection:true,
mode: 'remote',
triggerAction: 'all',
emptyText:'Selecione uma Cidade...',
selectOnFocus:true,
loginText:'Carregando',
allowBlank: false,
blankText:'Cidade requerida',
width:300
}),
{
x: 0,
y: 150,
xtype:'label',
text: 'Estados:'
},
new Ext.form.ComboBox({
id:'estados',
x: 60,
y: 150,
//name : 'estados',
fieldLabel: 'Estados',
store: new Ext.data.JsonStore({
url:'estados.php' (http://extjs.com/forum/'estados.php'),
root:'resultados',
fields: ['id', 'nome']
}),
value:vestados,
valueField:'id',
displayField:'nome',
typeAhead: true,
forceSelection:true,
//queryParam:'pesquisar',
mode: 'remote',
triggerAction: 'all',
emptyText:'Selecione uma estado...',
selectOnFocus:true,
loginText:'Carregando',
allowBlank: false,
blankText:'Estado requerida',
width:300
}),
{
x: 0,
y: 180,
xtype:'label',
text: 'Senha:'
},
{
x: 60,
y: 180,
xtype : 'textfield',
name : 'senha',
id: 'senha',
inputType : 'password',
allowBlank : false,
blankText: 'Senha requerida',
value:vsenha
},
{
x: 0,
y: 210,
xtype:'label',
text: 'Confirmação:'
},
{
x:60,
y: 210,
xtype : 'textfield',
name : 'resenha',
id: 'resenha',
inputType : 'password',
allowBlank : false,
blankText: 'Confirmação de Senha requerida',
value:vresenha
},
{
x: 0,
y: 240,
xtype:'label',
text:'É cliente:'
},
{
x:60,
y: 240,
xtype:'checkbox',
name:'ecliente',
boxLabel:'Sim',
checked:vecliente
}

]
});

if (acao=='e') {
var xtitulo='Exclusão - Cadastro de Clientes';
}else{
var xtitulo='Alteração - Cadastro de Clientes';
}
if (acao=='e') {
var xbotao='Excluir';
}else{
var xbotao='Salva';
}


var window = new Ext.Window({
title: xtitulo,
width: 500,
height:400,
minWidth: 300,
minHeight: 200,
layout: 'fit',
plain:true,
bodyStyle:'padding:5px;',
buttonAlign:'center',
items: form,
buttons: [{
text: xbotao,
handler: function(){
if(form.getForm().isValid()){
form.getForm().submit({
url: this.url,
method: 'POST',
waitMsg: 'Salvando dados...',
success: function(o){
Ext.Msg.show({
title:'Success'
,msg:'Salvo com sucesso'
,modal:true
,icon:Ext.Msg.INFO
,buttons:Ext.Msg.OK
});
window.close();
},
failure: function(o){
Ext.Msg.show({
title:'Falha ao salvar'
,msg:o.responseText
,modal:true
,icon:Ext.Msg.INFO
,buttons:Ext.Msg.OK
});
},
params: {xid:id}
}
);
}
}
},{
text: 'Cancelar',
handler: function(){
window.close();
}
}]
});


window.show();

});
});
}

maxraeder
12 Jun 2009, 6:21 PM
Im use the version ext-2.2.1

maxraeder
13 Jun 2009, 5:16 AM
When the form appears the fields are blank, but it appears the data fields

how can I read data via JSON and assign the data from mysql for the fields to the form the code below, the version I'm using ext-2.2.1.

Please if someone can help me?


var vcnpj;
var vempresa;
var vemail;
var vtelefone;
var vcidades;
var vestados;
var vsenha;
var vresenha;
var vecliente;

function xcadastrocli(acao,id) {

//store.getAt(0).data.cnpj
//vcnpj=store.data.cnpj;
//alert(store.cnpj);
//vempresa:store.data.empresa;

Ext.QuickTips.init();
// Add the additional 'advanced' VTypes
Ext.apply(Ext.form.VTypes, {
password: function(val, field) {
if (field.initialPassField) {
var fp = Ext.getCmp(field.initialPassField);
return (val == fp.getValue());
}
return true;
},
passwordText: 'Passwords do not match'
});

Ext.onReady(function() {
var store = new Ext.data.JsonStore({
root: 'Resultados',
totalProperty: 'Total',
idProperty: 'threadid',
remoteSort: true,
fields: [
{name: 'id',mapping: 'id', type: 'int'},
{name: 'cnpj', mapping: 'cnpj'},
{name: 'empresa', mapping: 'empresa'},
{name: 'email', mapping: 'email'},
{name: 'telefone', mapping: 'telefone'}
],
// load using script tags for cross domain, if the data in on the same domain as
// this page, an HttpProxy would be better
proxy: new Ext.data.ScriptTagProxy({
url: 'http://www.locaudiovisual.com.br/adm/paginas/busca_clientes_ex.php?id='+id
}),
listeners: {
load: function(store, records, options) {
try {
// On store load get record at index 0.
var currentRecord = store.getAt(0);
//alert(store.getAt(0).cnpj);
// Get a reference to my FormPanel.
var xform = Ext.getCmp('form');
if (xform) // Exists?
// load the record object into the form.
xform.getForm().loadRecord(currentRecord);
} catch(err) {
console.log(err);
}
}
}

});
store.setDefaultSort('id', 'empresa');
store.load();
store.on('load', function() {


//alert(vcnpj)
if (acao=='e') {
var xuri='excluircli.php';
}else{
var xuri='alterarcli.php';
}

// create the Data Store

var form = new Ext.form.FormPanel({
id: 'clienteid',
baseCls: 'x-plain',
layout:'absolute',
bodyStyle:'z-index:1000;',
url:xuri (http://extjs.com/forum/xuri),
method: 'post',
monitorValid:true ,
defaultType: 'textfield',
waitMsgTarget: true,
items: [{
x: 0,
y: 5,
xtype:'label',
text: 'CNPJ:'
},{
x: 60,
y: 0,
name: 'cnpj',
anchor:'100%'
//value:ds.cnpj
},{
x: 0,
y: 35,
xtype:'label',
text: 'Empresa:'
},{
x: 60,
y: 30,
name: 'empresa',
anchor: '100%'
//value:vempresa
},{
x: 0,
y: 60,
xtype:'label',
text: 'Email:'
},{
x: 60,
y: 60,
name: 'email',
anchor: '100%',
value: vemail
},{
x: 0,
y: 90,
xtype:'label',
text: 'telefone:'
},{
x:60,
y: 90,
name: 'telefone',
anchor: '100%',
value: vtelefone
}
,{
x: 0,
y: 120,
xtype:'label',
text: 'Cidades:'
},
new Ext.form.ComboBox({
x: 60,
y: 120,
id:'cidades',
fieldLabel: 'Cidades',
store: new Ext.data.JsonStore({
url:'cidades.php' (http://extjs.com/forum/'cidades.php'),
root:'resultados',
fields: ['id', 'nome']
}),
value:vcidades,
valueField:'id',
displayField:'nome',
typeAhead: true,
forceSelection:true,
mode: 'remote',
triggerAction: 'all',
emptyText:'Selecione uma Cidade...',
selectOnFocus:true,
loginText:'Carregando',
allowBlank: false,
blankText:'Cidade requerida',
width:300
}),
{
x: 0,
y: 150,
xtype:'label',
text: 'Estados:'
},
new Ext.form.ComboBox({
id:'estados',
x: 60,
y: 150,
//name : 'estados',
fieldLabel: 'Estados',
store: new Ext.data.JsonStore({
url:'estados.php' (http://extjs.com/forum/'estados.php'),
root:'resultados',
fields: ['id', 'nome']
}),
value:vestados,
valueField:'id',
displayField:'nome',
typeAhead: true,
forceSelection:true,
//queryParam:'pesquisar',
mode: 'remote',
triggerAction: 'all',
emptyText:'Selecione uma estado...',
selectOnFocus:true,
loginText:'Carregando',
allowBlank: false,
blankText:'Estado requerida',
width:300
}),
{
x: 0,
y: 180,
xtype:'label',
text: 'Senha:'
},
{
x: 60,
y: 180,
xtype : 'textfield',
name : 'senha',
id: 'senha',
inputType : 'password',
allowBlank : false,
blankText: 'Senha requerida',
value:vsenha
},
{
x: 0,
y: 210,
xtype:'label',
text: 'Confirmação:'
},
{
x:60,
y: 210,
xtype : 'textfield',
name : 'resenha',
id: 'resenha',
inputType : 'password',
allowBlank : false,
blankText: 'Confirmação de Senha requerida',
value:vresenha
},
{
x: 0,
y: 240,
xtype:'label',
text:'É cliente:'
},
{
x:60,
y: 240,
xtype:'checkbox',
name:'ecliente',
boxLabel:'Sim',
checked:vecliente
}

]
});

if (acao=='e') {
var xtitulo='Exclusão - Cadastro de Clientes';
}else{
var xtitulo='Alteração - Cadastro de Clientes';
}
if (acao=='e') {
var xbotao='Excluir';
}else{
var xbotao='Salva';
}


var window = new Ext.Window({
title: xtitulo,
width: 500,
height:400,
minWidth: 300,
minHeight: 200,
layout: 'fit',
plain:true,
bodyStyle:'padding:5px;',
buttonAlign:'center',
items: form,
buttons: [{
text: xbotao,
handler: function(){
if(form.getForm().isValid()){
form.getForm().submit({
url: this.url,
method: 'POST',
waitMsg: 'Salvando dados...',
success: function(o){
Ext.Msg.show({
title:'Success'
,msg:'Salvo com sucesso'
,modal:true
,icon:Ext.Msg.INFO
,buttons:Ext.Msg.OK
});
window.close();
},
failure: function(o){
Ext.Msg.show({
title:'Falha ao salvar'
,msg:o.responseText
,modal:true
,icon:Ext.Msg.INFO
,buttons:Ext.Msg.OK
});
},
params: {xid:id}
}
);
}
}
},{
text: 'Cancelar',
handler: function(){
window.close();
}
}]
});


window.show();

});
});
}