PDA

View Full Version : Using MVC architecture - Automatically Load data in Ext.FormPanel



roykrish
22 Feb 2012, 5:17 AM
Hi,

I am a beginner with Sencha. I am trying to use the MVC style of it in my project. I have a grid which is connected with a store and a model. When I load that grid, I get data into that. Now I want to add some more features into it.

This is what I am trying to do.

[1] Click data from one column in that grid.
[2] It should load a view which has a form.
[3] That form should load data from backend related to the cell I click in the grid.

I thought when a grid can load data with a model - view - store style, Probably a form can also do that. I created a store and model for my form panel. When I click the cell in grid it loads the view which has the form but there is no data in it.

What mistake I am doing? Please help !!

Thank You !!

vietits
22 Feb 2012, 5:40 AM
Ext.form.Panel does not have a store linked to it. Basing on what you mentioned, I have suggestion as follow:
1. When user click on a row of the grid, get out the information needed to load remote data to load to your form.
2. Get reference to the form on the view you want to load data into and then call <form>.load() and pass to it information you get from step 1 to load data from server.
The other way is use Ext.Ajax.request() to load data from server and then use <form>.getForm().setValues() to load data into fields on form.

roykrish
22 Feb 2012, 5:52 AM
Thank you for replying !!

This is how my form(view) looks


Ext.define('PSPortal.view.com.fimt.asts.paas.EditProjectInformation' , {
extend: 'Ext.FormPanel',
alias : 'widget.editprojectinformation',
items:[{
xtype: 'tabpanel',
activeTab: 0, // index or id
items:[{
fieldLabel:'Intake Form Contact',
labelWidth:150
,xtype:'textfield'
,id:'intakeformcontact'
,name:'base_intakeFormContact',
allowBlank: false
},
{
fieldLabel:'Project Purpose',
xtype:'textarea',
name:'sbi_projectpurpose',
width: 500,
height:150,
value:'Define your project purpose here'
},
{
title: 'Tab 3',
html: 'This is tab 3 content.'
}]
}],
renderTo: Ext.getBody()
});




and this is how the things are happening when user is clicking cell in grid


this.on('select', function(cellModel, record, rowIndex, columnIndex) {
var projectName = record.data["platformName"];
var vahName = record.data["vahName"];
Ext.Ajax.request({
url: 'getprojectDetails',
params: { projname: projectName },
callback : function(options, success, response){
var content = Ext.getCmp('portal-container');
content.removeAll();
content.add(Ext.ComponentMgr.create({
itemId: 'func2',
xtype: 'editprojectinformation',
border: true
}));
}
});
}, this);

could you please tell me how to implement
<form>.getForm().setValues()here. Some pointers or code snippet will be a great help.

Thanks.

vietits
22 Feb 2012, 6:51 AM
Basing on the code you supplied, here is my suggestion.


this.on('select', function(cellModel, record, rowIndex, columnIndex) {
var projectName = record.data["platformName"];
var vahName = record.data["vahName"];
Ext.Ajax.request({
url: 'getprojectDetails',
params: { projname: projectName },
callback : function(options, success, response){
var content = Ext.getCmp('portal-container');
content.removeAll();
var values = Ext.decode(response); // <- you should modify this to get the values from response
var form = Ext.ComponentMgr.create({
itemId: 'func2',
xtype: 'editprojectinformation',
border: true
});
content.add(form);
form.getForm().setValues(values);
}
});
}, this);

roykrish
22 Feb 2012, 7:05 PM
Awesome man !! Thank you very much. I appreciate your help !! =D>

My project is moving now. For setting values in bulk I am using something like this -

form.getForm().setValues({
fielda: 'value1',
fieldb: 'value2'
})Thanks again !!