Load data to form in mvc - extjs

Question

In my appliacation , I have a list and detail(form).I want to load data to Detail view(set data to textfields of form) when list item is clicked. For both list and detail, I am getting data from remote server. I am following MVC.
Now, When listItem is clicked, I am able to get data from server and save it to store and also showing detail view. But I am not able to bind data from store to textfields in form.
Model
Ext.define('App.model.Details', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'Name', type: 'string'},
{name: 'BillingStreet', type: 'string'},
{name: 'BillingCity', type: 'string'}
]
}
});
Store
Ext.define('App.store.Details', {
extend: 'Ext.data.Store',
config: {
model: 'App.model.Details',
autoLoad :true,
grouper : function(record) {
return record.get('Name')[0];
},
}
});
list view
Ext.define('App.view.View', {
extend: 'Ext.List',
alias:'widget.contactlist',
fullscreen: true,
id: 'contactlist',
config:{
disableSelection:true,
store:'Contacts',
itemTpl:'{Name}',
items:[
{
xtype:'toolbar',
docked:'top',
title:'Leeds List'
}
]
}
});
Detail view
Ext.define("App.view.ListDetail", {
extend: "Ext.form.Panel",
requires: "Ext.form.FieldSet",
alias: "widget.listDetail",
config:{
scrollable:'vertical'
},
initialize: function () {
this.callParent(arguments);
var topToolbar = {
xtype: "toolbar",
docked: "top",
title: "Details"
};
this.add([
topToolbar,
{ xtype: "fieldset",
items: [{
xtype: 'textfield',
store: 'Details',
value : 'Name',
label: 'Name'
},
{
xtype: 'emailfield',
store: 'Details',
value : 'BillingStreet',
label: 'Email'
},
{
xtype: 'passwordfield',
store: 'Details',
value : 'BillingCity',
label: 'Password'
}
]
}
]);
}
});
Controller
Ext.define('App.controller.Main', {
extend: 'Ext.app.Controller',
config: {
refs: {
// We're going to lookup our views by xtype.
contactlist: "contactlist",
contactdetail: "listDetail",
//f_name:"#f_name"
},
control: {
contactlist: {
// The commands fired by the notes list container.
itemtap: "oneditLeadCommand"
}
},
routes: {
'contactlist': 'activateList'
}
},
activateList: function ()
{
Ext.Viewport.animateActiveItem(this.getContactlist(), this.slideRightTransition);
},
slideLeftTransition: { type: 'slide', direction: 'left' },
slideRightTransition: { type: 'slide', direction: 'right' },
oneditLeadCommand: function (list, index, target, record, e, eOpts)
{
console.log("onEditLead"+record.data.Id);
this.activateLeadDetail(record);
},
activateLeadDetail: function (record)
{
var contactDetail = this.getContactdetail();
//console.log("activateLeadDetail"+contactDetail.textfield);
//contactDetail.setRecord(record); // load() is deprecated.
//this.getF_name().setDisplayField("");
store = Ext.StoreMgr.get('Details');
//console.log("activateLeadDetail"+store);
store.setProxy({
type: 'ajax',
url : 'http://10.0.2.2:8080/SalesForce/leads/get-lead-details/00D90000000jvoU!AR4AQB6Xcjz4UNBKf12WOcYHWc31QxK2.fXTcbCvOq.oBosCrjBezhqm8Nqc1hrf8MKK5LjLAu8ZC5IqB1kdpWvJGLdWd5pJ/'+record.data.Id, // the json file that holds all our contact info.
reader: {
type: 'json'
}
});
store.load();
var record1 = Ext.StoreMgr.get('Details').getAt(0);
console.log("activateLeadDetail"+record1);
Ext.StoreMgr.get('Details').each(function(test){
console.log("for loop"+test.data);
});
contactDetail.setRecord(record1);
Ext.Viewport.animateActiveItem(contactDetail, this.slideLeftTransition);
},
// Base Class functions.
launch: function () {
this.callParent(arguments);
console.log("launch");
},
init: function () {
this.callParent(arguments);
console.log("init");
}
})
Please help to bind data to detail view.

Answer 1

So I'm guessing your Contacts Store is defined somewhere else but since this one is working you didn't paste the code here.
So one quick note on the model, where you should always define an idProperty. This is what Sencha use internally to define the "primary key" on your store and therefore work properly when you reload/refresh your store.
Ext.define('App.model.Details', {
extend: 'Ext.data.Model',
config: {
idProperty: 'Name', // Or something from your server maybe?
fields: [
{name: 'Name', type: 'string'},
{name: 'BillingStreet', type: 'string'},
{name: 'BillingCity', type: 'string'}
]
}
});
Secondly, why did you use the initialize method in your ListDetail view when you used the config method in your listView? if you specify the config instead, you will be able to to reuse some of this component in a more easy way somewhere else by doing something like
items: [
{
xtype: 'ListDetail',
anyOtherAttribute: value
}
]
But that's kinda out of scope here. But anyway. So what is wrong here I think is that you have defined a Store for each field of your panel. I'm sorry i can't test my hypothesis, but here is what I would do:
Ext.define("App.view.ListDetail", {
extend: "Ext.form.Panel",
requires: "Ext.form.FieldSet",
alias: "widget.listDetail",
config:{
scrollable:'vertical'
items:[
{
xtype: "toolbar",
docked: "top",
title: "Details"
},
{
xtype: "fieldset",
itemId: 'detailedListFiledset', //Overall, prefer itemId
items: [
{
xtype: 'textfield',
value : 'Name',
label: 'Name' // may be you want placeholders here?
},
{
xtype: 'emailfield',
value : 'BillingStreet',
label: 'Email' // and here..
},
{
xtype: 'passwordfield',
value : 'BillingCity',
label: 'Password' // and here..
}
]
}
]
}
});
Alright, and now the issue seems to be in your controller:
Add a ref to your fieldset
Add a reference to your store
create a afterload callback when your store is loaded (Details)
Either clear the store every time or append data and apply to filter to get the correct record (this is why the idProperty is very useful)
set the record of the fieldset and not the panel
I haven't had the chance to try that, but I'll do it later tonight. But git it a go though.
-- EDIT --
Ok I've finally been abe to code something for you.
A few issues were in your code. I don't really know why you need two stores, but let's say you do. I'm going to give you all the files I used (the two stores, the two models, the three views and the controller). Three main thing were wrong in your code:
you should not load the second store and try to get the record right after. use and 'load' or 'refresh' event for that
SetValues for a form is the correct function to use
You were missing the name property in your form so that the form know to which value of the store/model to bind to the field.
ContactModel:
Ext.define('App.model.Contact', {
extend: 'Ext.data.Model',
config: {
idProperty: 'id',
fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'}
]
}
});
ContactStore:
Ext.define('App.store.ContactStore', {
extend: 'Ext.data.Store',
requires:['App.model.Contact'],
config: {
storeId: 'ContactStore',
model: 'App.model.Contact',
autoLoad :true,
data: [
{id: 0, name: 'Foo'},
{id: 1, name: 'Bar'}
]
}
});
DetailModel:
Ext.define('App.model.Detail', {
extend: 'Ext.data.Model',
config: {
idProperty: 'id',
fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'},
{name: 'billingStreet', type: 'string'},
{name: 'billingCity', type: 'string'}
]
}
});
DetailStore:
Ext.define('App.store.DetailStore', {
extend: 'Ext.data.Store',
config: {
model: 'App.model.Detail',
autoLoad :true,
data: [
{id: 0, name: 'Foo', billingStreet:'here', billingCity: 'Somewhere'},
{id: 1, name: 'Bar', billingStreet:'there', billingCity: 'Somewhere else'}
]
}
});
ContactView:
Ext.define('App.view.ContactList', {
extend: 'Ext.List',
xtype: 'contactList',
fullscreen: true,
config: {
itemId: 'contactList',
store:'ContactStore',
emptyText: 'test',
itemTpl: new Ext.XTemplate(
'{name}'
),
items:[
{
xtype:'toolbar',
docked:'top',
title:'Leeds List'
}
]
}
});
DetailView:
Ext.define('App.view.Detail', {
extend: 'Ext.form.Panel',
requires: ['Ext.form.FieldSet'],
xtype: "detail",
config:{
scrollable:'vertical',
items: [
{
xtype: 'toolbar',
docked: 'top',
title: 'Details'
},
{
xtype: 'fieldset',
itemId: 'detailForm',
items: [{
xtype: 'textfield',
store: 'Details',
name: 'name',
placeHolder : 'Name',
label: 'Name'
},
{
xtype: 'textfield',
store: 'Details',
placeHolder : 'BillingStreet',
name: 'billingStreet',
label: 'BillingStreet'
},
{
xtype: 'textfield',
store: 'Details',
placeHolder : 'BillingCity',
name: 'billingCity',
label: 'BillingCity'
}
]
}
]
}
});
Main view:
Ext.define('App.view.Main', {
extend: 'Ext.Container',
xtype: 'main',
config: {
layout: 'hbox',
items: [
{
xtype: 'contactList',
flex:1
},
{
xtype: 'detail',
flex:2.5
}
]
}
});
Main Controller:
Ext.define('App.controller.Main', {
extend : 'Ext.app.Controller',
requires: [
'Ext.Toolbar',
'Ext.List',
'App.store.ContactStore',
'App.store.DetailStore',
'App.view.Detail',
'App.view.ContactList'
],
config: {
//#private
detailStore: null,
currentListIndex: -1,
views : [
'App.view.ContactList',
'App.view.Detail'
],
refs: {
list: 'contactList',
detail: 'detail',
detailForm: 'detail #detailForm'
},
control: {
list: {
itemtap: 'handleItemTapList'
}
}
},
launch: function() {
var store = Ext.getStore('DetailStore');
store.on('refresh', 'handleDetailStoreLoad', this);
this.setDetailStore(store);
},
handleItemTapList: function(list, index, target, record) {
this.setCurrentListIndex(index);
this.getDetailStore().load();
},
handleDetailStoreLoad: function (store) {
debugger;
var record = store.getAt(this.getCurrentListIndex());
this.getDetail().setValues(record.data);
}
});
We could argue on a few things but I tried to go straight to the point and make it work. If you have more questions please ask but this example is working for me. In my opinion, you might not need the second store, as the contact detail could be nested in the COntact store, and you could use the hasMany property of the store.

Answer 2

use form.setRecord() to load a record into a form
make sure your form elements have name property values that match the model name properties
as you have a store, you will have to get a reference to ONE model to load, using say getAt() or find() methods to get or find a model in your store