PDA

View Full Version : How to load a store using form panel field values?



cstuber
1 Mar 2012, 6:20 PM
Hi everyone,

I'm building a Touch app with Designer 2 (build 298).

I have a form panel and field set defined with various input fields. I also have a model defined and a Json store defined that refers to the model.

What I would like to do is take the form panel input field values, submit them to the server, then load the store based on the response Json contents.

What is the best way in Designer 2 / Touch to accomplish this?

In other parts of the app I have been able to successfully auto-load a store. I've also been able to submit values from a form panel to the server and react to the response. Now I am having trouble figuring out how to get the two concepts to work together.

Any help / pointers would be appreciated!

Chad

aconran
1 Mar 2012, 8:12 PM
Sounds like you are looking for BasicForm's loadRecord (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.Basic-method-loadRecord) and updateRecord (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.Basic-method-updateRecord) methods.

cstuber
1 Mar 2012, 8:30 PM
Aaron - Thanks very much for your response!

I apologize in advance if this question shows my lack of experience: The links you provided are from the ExtJS Docs. Is the BasicForm also valid for a Touch app built with Designer 2?

aconran
1 Mar 2012, 8:32 PM
Sorry for linking to Ext's documentation, that was a mistake.

You can use setRecord (http://docs.sencha.com/touch/2-0/#!/api/Ext.form.Panel-method-setRecord) to load the values.

Once you have the record you can also set teh values from whats in the form.



form.getRecord().set(form.getValues());

sendy
25 Jan 2013, 3:39 AM
Hy,
I have a form panel to set different fields.
when I click on submit button ,I want to send the values of each field to store:
this the store:

Ext.define("UnivMobile.store.EventsPerso", { extend: "Ext.data.Store",
requires: "Ext.data.proxy.LocalStorage",
config:{
model: "UnivMobile.model.EventPerso"
}


});
This is the model:

Ext.define("UnivMobile.model.EventPerso", {
extend: "Ext.data.Model",
config: {
fields: [{
name: 'nomEvent'
//type: 'string'
},
{
name: 'dateDebEvent'
// type: 'date',
// dateFormat: 'c'
},
{
name: 'dateFinEvent'
// type: 'date',
// dateFormat: 'c'
},
{
name: 'lieu'
// type: 'string'
}

]
proxy: {
type: 'localstorage',
id:'eventPerso'
}


}
});

And this is the view:

Ext.define('UnivMobile.view.AddEvent', {
extend: 'Ext.form.Panel',
requires: ['Ext.picker.Date'],

xtype: 'option2card',

config: {
fullscreen: true,
title: 'Add Event',
id:'formPanel',

items: [ {
xtype: 'fieldset',
items: [
{
xtype: 'textfield',
name: 'nomEvent',
id:'nomevent',
label: 'Nom Event:'


},
{
xtype: 'textfield',
name: 'dateDebEvent',
id:'debEvent',
label: 'Date de debut Event:',
value:new Date,
listeners : {
focus:function( ) {
dateFormat:'Y-m-d',
id:'picker1',
//name:'t',
listeners : {
change : function(datePicker1, value) {
console.log(value);
var valueDateDeb=Ext.getCmp('debEvent');
valueDateDeb.setValue(value);

}
}
});
this.parent.parent.parent.parent.push(datePicker1);


}

}
},


{
xtype: 'textfield',
name: 'dateFinEvent',
id:'finEvent',
label: 'Date de fin Event:',
value:new Date,
listeners : {
focus:function( ) {
var datePicker2= Ext.create(Ext.picker.Date, {
dateFormat:'Y-m-d',
id:'picker2',
listeners : {
change : function(datePicker2, value) {
console.log(value);
var valueDateFin=Ext.getCmp('finEvent');
valueDateFin.setValue(value);

}
}
});
this.parent.parent.parent.parent.push(datePicker2);


}

}
},
{
xtype: 'textfield',
name: 'lieu',
id:'lieu',
label: 'Lieu:',

}
] // items
},





{
xtype: 'toolbar',
layout: {
pack: 'center'
}, // layout
ui: 'plain',
items: [
{
xtype: 'button',
text: 'Reset',
id:'resetb',
ui: 'decline',
listeners: {
tap: function(){


this.parent.parent.parent.parent.push(Ext.Msg.confirm('', 'Are you sure you want to reset this form?', function (btn) {
switch (btn) {
case 'yes':
var valueNom=Ext.getCmp('nomevent');
valueNom.setValue('');
var valueDateDeb=Ext.getCmp('debEvent');
valueDateDeb.setValue('');
var valueDateFin=Ext.getCmp('finEvent');
valueDateFin.setValue('');
var valueLieu=Ext.getCmp('lieu');
valueLieu.setValue('');

break;
default:
break;
} // switch
})
);
}
}
},
{xtype: 'button',
text: 'Submit',
ui: 'confirm',
listeners: {
tap: function() {// I want to send the diffrent values to my store

var store=Ext.getStore("EventsPerso");
var form = Ext.getCmp('formPanel');
var values = form.getValues(); // it works
form.submit({

url: 'What should I set here?????',
method: 'POST',
success: function (form, result) {
localStorage.setItem('Nom event',values.nomEvent);
Ext.Msg.alert('Success', action.result.msg);

},
failure: function (form, result) {
alert('failure');
}

});


}
}
}
] // items (toolbar)
}
]


}
});
Any help please how can I send diffrent values from my formPanel to my store???????,