How to get data from a store and display it into a form

[shensi]

Hi, this is a part of my sencha application
I used the feed-viewer example to create my app.

I would like to load data to my form but I don't know how to do...

Here is my json file :

{ 'success': true,
'data': {
'device': 'aaaaa.ec',
'dID': 4,
'source': 'xxxxx',
'label': 'Azeazeaze',
'location': 'rdc',
'brand': 38,
'model': 1,
'enable':1,
'first_datetime':'2012-03-19 14:34:45',
'last_datetime':'2012-03-19 14:34:45'
}
}

This is a tab panel which is displayed when a device is selected from one another device panel. This "devicemainform" layout is normally loaded when this method is called : loadDevice(dID).
With firebug I can see the response of the proxy. My datas seem to be loaded on the store
I tried many onLoad methods to do it, but nothing is loaded into my form panel...

Could you help me to find the good syntax and method to do it ?




Ext.define('ExoWeb.DeviceMainForm', {
extend: 'Ext.form.Panel',
alias: 'widget.devicemainform',
autoHeight: true,
width : 600,
bodyPadding: 10,
initComponent: function(){
console.log("DeviceMainForm::initComponent");
this.addEvents(
/**
* @event rowdblclick
* Fires when a row is double clicked
* @param {FeedViewer.DeviceGrid} this
* @param {Ext.data.Model} model
*/
//'rowdblclick',
/**
* @event select
* Fires when a grid row is selected
* @param {FeedViewer.DeviceGrid} this
* @param {Ext.data.Model} model
*/
//'select'
);


Ext.apply(this, {
cls: 'feed-grid',
store: Ext.create('Ext.data.Store', {
model: 'Mainform',
autoload:true,
proxy: {
type: 'ajax',
url: 'data/mainform.json',
//url: 'app.php/events/find',
reader: {
type: 'json',
root: 'data'
}
},
listeners: {
load: this.onLoad,
scope: this
}
}),
items : [
{
xtype : 'textfield',
name : 'label',
fieldLabel : 'Label'
},{
xtype : 'fieldcontainer',
name: 'location',
combineErrors: true,
msgTarget: 'side',
fieldLabel: 'Location',
defaults: {
hideLabel: true
},
items : [
{
autoWidth: true,


xtype: 'combo',
mode: 'local',
value: '-',
triggerAction: 'all',
forceSelection: true,
editable: false,
fieldLabel: 'Title',
name: 'title',
displayField: 'name',
valueField: 'value',
queryMode: 'local',
store: Ext.create('Ext.data.Store', {
fields : ['name', 'value'],
data : [
{name : '', value: '-'},
{name : 'Bureau', value: 'bureau'},
{name : 'Chambre', value: 'chambre'},
{name : 'Cuisine', value: 'cuisine'},
{name : 'Salle à manger', value: 's-a-m'},
{name : 'Salle de bain', value: 's-d-b'},
{name : 'Salon', value: 'salon'}
]
})
}]
},{
xtype: 'checkboxfield',
name: 'enable',
fieldLabel: 'Enable'
},{
xtype : 'textfield',
name : 'brand',
fieldLabel: 'Brand',
vtype : 'brand',
msgTarget: 'side',
allowBlank: false
},{
xtype : 'textfield',
name : 'model',
fieldLabel: 'Model',
vtype : 'type',
msgTarget: 'side',
allowBlank: false
},{
xtype : 'textfield',
name : 'source',
fieldLabel: 'Source',
vtype : 'source',
msgTarget: 'side',
disabled: true
},{
xtype : 'textfield',
name : 'device',
fieldLabel: 'Device',
vtype: 'source',
msgTarget: 'side'
},{
xtype : 'textfield',
name : 'First ',
fieldLabel: 'Seen from',
vtype: 'source',
msgTarget: 'side'
},{
xtype : 'textfield',
name : 'last_datetime',
fieldLabel: 'To',
vtype: 'source',
msgTarget: 'side'
}
],
buttons: [
{
text : 'Save',
handler: function() {
var form = this.up('tabPanel').getForm(),
s = '';
if (form.isValid()) {
Ext.iterate(form.getValues(), function(key, value) {
s += Ext.util.Format.format("{0} = {1}<br />", key, value);
}, this);


Ext.Msg.alert('Form Values', s);
}
}
},


{
text : 'Reset',
handler: function() {
this.up('tabPanel').getForm().reset();
}
}
]
});
this.callParent(arguments);
//this.on('selectionchange', this.onSelect, this);
},


/**
* Listens for the store loading
* @private
*/
onLoad: function(form, data){
//console.log("DeviceMainForm::onLoad -> "+ this.getSelectionModel().select(0));
this.getSelectionModel().select(0);
//this.store.loadData(this.getForm().reader.getSelection());
//var form = this.getWebItemForm().getForm();
//var data = this.getAt(0);
//form.loadRecord(data);
//this.getActive().selectedIndex;
//this.getForm().waitMsgTarget = this.getEl();
//this.getSelectionModel().records()[0];
//this.setActiveRecord
//this.insert(0, data);
},


onLoad1: function(record){
console.log("DeviceMainForm::setActiveRecord -> "+ record);
this.activeRecord = record;
//this.getForm().loadRecord(record);
if (record) {
//this.down('#save').enable();
this.getForm().loadRecord(record);
console.log("DeviceMainForm::setActiveRecord -> pb : loadrecord");
} else {
//this.down('#save').disable();
this.getForm().reset();
console.log("DeviceMainForm::setActiveRecord -> pb : reset");
}
},

onLoad2: function() {
//this.activeRecord = records;
//if (records[0]) {
console.log("DeviceMainForm::onLoad2");
//this.up('form').getForm().loadRecord(records[0]);
//this.getForm().loadRecord(records);
//this.getValues();
//var record = store.getRecordAt(0);
//this.form.loadRecord(store);
this.form.loadRecord(this.store.data.first());
//}
},

loadDevice: function(dID){
console.log("DeviceMainForm::loadDevice -> " + dID);
var store = this.store;
store.load({
params: {
data: dID
}
});
},

/**
* Title renderer
* @private
*/
formatTitle: function(value, p, record){
//console.log("DeviceGrid::formatTitle");
//return Ext.String.format('<div class="topic"><b>{0}</b><span class="author">{1}</span></div>', value, record.get('type') || "Unknown");
return Ext.String.format('<div class="topic"><b>{0}</b></div>', value);
},


/**
* Date renderer
* @private
*/
formatDate: function(date){
//console.log("DeviceGrid::formatDate");
if (!date) {
return '';
}


var now = new Date(), d = Ext.Date.clearTime(now, true), notime = Ext.Date.clearTime(date, true).getTime();


if (notime === d.getTime()) {
return 'Today ' + Ext.Date.format(date, 'g:i a');
}


d = Ext.Date.add(d, 'd', -6);
if (d.getTime() <= notime) {
return Ext.Date.format(date, 'D g:i a');
}
return Ext.Date.format(date, 'Y/m/d g:i a');
}
});


With this syntax, The first value is displayed correctly but not the others :
this.form.loadRecord(this.store.data.first());

I am lost lol...
Thanks for your help,
Regards

[scottmartin]

You can create a listener for your grid:



this.grid.getSelectionModel().on('select', function(selModel, model, idx) {
this.form.loadRecord(model); // from record
}, this);


Regards,
Scott.

[shensi]

Hi,
There is no grid in my example. It seems
getSelectionModel()
doesn't work with a form. And this.grid doesn't exist, this.grid is undefined...

So where should I put your code ? And how can I load this store in my form.panel ?


onLoad: function(){
this.grid.getSelectionModel().on('select', function(selModel, model, idx) {
this.form.loadRecord(record); // from record
},
this);
},


OR directly into my store


listeners: {
load: this.onLoad,
scope: this
}


Tell me where it's wrong ??
Sincerely,

[shensi]

Hi,
I finally found the solution :-)
Let's see if I understood lol !

When I select my device from another panel, I create a panel wich contains this formpanel.
The form is empty. But by the loadDevice function I load datas into my store. But the formpanel was created before, so how can the form be filled by the onLoad function ? It's working well but I was wondering how it can be possible ...


Ext.apply(this, {
store: Ext.create('Ext.data.Store', {
model: 'Mainform',
proxy: {
type: 'ajax',
//url: 'data/mainform.json',
url: 'app.php/mainforms/view',
reader: {
type: 'json',
root: 'data'
}
},
listeners: {
load: this.onLoad,
scope: this
}
}),
items : [
{
xtype : 'textfield',
name : 'label',
fieldLabel : 'Label'
},{
xtype : 'fieldcontainer',
name: '_brand',
fieldLabel: 'Brand',
items : [
{
xtype: 'combo',
displayField: '_brand',
valueField: 'bID',
//value:'arc',
store: Ext.create('Ext.data.Store', {
model: 'Brand',
//mode:'local',
proxy: {
type: 'ajax',
//url: 'data/brand.json',
url: 'app.php/brands/view',
reader: {
type: 'json',
root: 'data'
},
listeners: {
scope: this
}
}
})
}]
},{
xtype: 'checkboxfield',
name: 'enable',
fieldLabel: 'Enable'
}
],
buttons: [
{
text : 'Save',
handler: function() {
var form = this.up('tabPanel').getForm(),
s = '';
if (form.isValid()) {
Ext.iterate(form.getValues(), function(key, value) {
s += Ext.util.Format.format("{0} = {1}<br />", key, value);
}, this);


Ext.Msg.alert('Form Values', s);
}
}
}/*,


{
text : 'Reset',
handler: function() {
this.up('tabPanel').getForm().reset();
}
}*/
]
});
this.callParent(arguments);
//this.on('selectionchange', this.onSelect, this);
},


onLoad: function() {
var store = this.store;
var record = store.getAt(0);
this.loadRecord(record);
},

loadDevice: function(dID){
var store = this.store;
store.load({
params: {
data: dID
}
});
},