PDA

View Full Version : how do you load data on a Form from a file



WBarnie
13 Aug 2009, 5:04 AM
I am trying to load data into a form and I am not quite sure how to do this. Looking at the postings, I think I should be doing something like:



companyForm.getForm().load(???


Eventually I will be using a url to load the data but for now I have test data set in a local file and the data is being loaded in the JsonStore. How do I load JsonData onto a form?

Where I define the items on the form, can I use a dataIndex to associate the field on the form with the field in the JsonStore?

This is the form:


// company
var companyInfo = [{
labelWidth: 150,
items: [{
layout: "column",
border: false,
defaults: {
columnWidth: ".5",
border: false
},
items: [{
bodyStyle: "padding-left:50px;",
items: {
xtype:"fieldset",
title: "Company Deatil",
autoHeight: true,
defaultType: "textfield",
items: [{
xtype: "combo",
tabIndex: 1,
allowBlank: false,
emptyText : "Please select a Company type",
bodyStyle: "padding-right:5px;",
fieldLabel: "Company Type*",
name: "companyType",
id: "companyType",
store: Ext.company.types,
typeAhead: true,
mode: "local",
forceSelection: true,
triggerAction: "all",
selectOnFocus:true,
listeners: {
'select': {fn:getCompanyType}
},
anchor: "100% -53"
},{
id: "name",
name: "name",
tabIndex: 3,
dataIndex: 'name',
allowBlank: false,
minLength: 1,
maxLength: 35,
fieldLabel: "Name*"
},{
name: "appraiserNumber",
id: "appraiserNumber",
tabIndex: 5,
allowBlank: false,
maxLength: 4,
fieldLabel: "Appraiser Number*"
},{
xtype: "checkbox",
name: "proprietaryFileRequired",
id: "proprietaryFileRequired",
tabIndex: 7,
fieldLabel: "Proprietary File Required"
},{
name: "repairShopNumber",
id: "repairShopNumber",
tabIndex: 9,
fieldLabel: "Repair Shop Number"
},{
name: "lastUpdatedOn",
id: "lastUpdatedOn",
tabIndex: 11,
fieldLabel: "Last Updated On"
}]
}
},{
bodyStyle: "padding-left:50px;",
items: {
xtype:"fieldset",
title: "",
autoHeight: true,
defaultType: "textfield",
items: [{
xtype: "combo",
allowBlank: false,
emptyText : "Please select a status",
bodyStyle: "padding-left:5px;",
fieldLabel: "Company Status*",
name: "companyStatus",
id: "companyStatus",
tabIndex: 2,
store: Ext.company.status,
typeAhead: true,
mode: "local",
forceSelection: true,
triggerAction: "all",
selectOnFocus:true
},{
name: "email",
id: "email",
tabIndex: 4,
allowBlank: false,
fieldLabel: "Email*"
},{
name: "phone",
id: "phone",
fieldLabel: "Phone"
},{
name: "fax",
id: "fax",
tabIndex: 6,
fieldLabel: "Fax"
},{
xtype: "datefield",
name: "expirationDate",
id: "expirationDate",
tabIndex: 8,
vtype: 'daterange',
autoshow: true,
fieldLabel: "Expiration Date"
},{
name: "shopAppraiserLicense",
id: "shopAppraiserLicense",
tabIndex: 10,
allowBlank: false,
fieldLabel: "Shop Appraiser License*"
},{
name: "lastUpdatedBy",
id: "lastUpdatedBy",
tabIndex: 12,
fieldLabel: "Last Updated By"
}]
}
}]
}]
}];

/*====================================================================
* Office info
*====================================================================*/
var officeInfo = {
xtype: 'fieldset',
title: 'Office Information',
defaultType: "textfield",
autoHeight: true,
//bodyStyle: "padding-left:50px;",
items: [{
id: "officeName",
name: "officeName",
tabIndex: 13,
allowBlank: false,
minLength: 1,
maxLength: 35,
fieldLabel: "Office Name*"
},{
id: "address1",
name: "address1",
tabIndex: 14,
allowBlank: false,
minLength: 1,
maxLength: 40,
fieldLabel: "Address Line 1*"
},{
id: "address2",
name: "address2",
tabIndex: 15,
allowBlank: false,
minLength: 1,
maxLength: 40,
fieldLabel: "Address Line 2*"
},{
id: "city",
name: "city",
tabIndex: 16,
allowBlank: false,
minLength: 1,
maxLength: 30,
fieldLabel: "City*"
},{
xtype: "combo",
allowBlank: false,
emptyText : "Please select a status",
fieldLabel: "State*",
name: "state",
id: "state",
tabIndex: 17,
store: Ext.cgi.states,
typeAhead: true,
mode: "local",
forceSelection: true,
triggerAction: "all",
selectOnFocus: true
},{
name: "zipCode",
id: "zipCode",
tabIndex: 18,
fieldLabel: "Zip Code*"
}]
}; // eo officeInfo

/*====================================================================
* CCC info
*====================================================================*/
var pathwayInfo = {
xtype: 'fieldset',
title: "Pathway's Required Information",
defaultType: "textfield",
autoHeight: true,
//bodyStyle: "padding-left:50px;",
items: [{
id: "officeId",
name: "officeId",
//dataIndex: 'officeId',
tabIndex: 19,
allowBlank: true,
minLength: 1,
maxLength: 10,
fieldLabel: "Office Id"
},{
id: "branchCode",
name: "branchCode",
tabIndex: 20,
allowBlank: true,
minLength: 1,
maxLength: 10,
fieldLabel: "Branch Code"
},{
id: "pathwayofficeName",
name: "pathwayofficeName",
tabIndex: 21,
allowBlank: false,
minLength: 1,
maxLength: 35,
fieldLabel: "Office Name"
},{
id: "abbreviation",
name: "abbreviation",
tabIndex: 22,
allowBlank: false,
minLength: 1,
maxLength: 30,
fieldLabel: "Company Abbreviation"
},{
name: "pathwayId",
id: "pathwayId",
tabIndex: 23,
fieldLabel: "Pathway Id"
}]
}; // eo pathInfo

// combine all that into one huge form
var companyForm = new Ext.FormPanel({
title: 'Company Detail',
frame: false,
labelWidth: 125,
items: [
{
layout: 'column',
border: false,
defaults: {
border: false
},
items: companyInfo
},
officeInfo,
pathwayInfo
],
buttons: [{
text: 'Save',
tabIndex: 24,
handler: function(){
if(fp.getForm().isValid()){
Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />'+
fp.getForm().getValues(true).replace(/&/g,', '));
}
}
},{
text: 'Reset',
tabIndex: 25,
handler: function(){
companyForm.getForm().reset();
}
}]
});

This is the JsonStore and Fields



var fields = [
{name: 'key', mapping: 'key', type: 'float'},
{name: 'companyType', mapping: 'companyType'},
{name: 'companyStatus', mapping: 'companyStatus'},
{name: 'name', mapping: 'name'},
{name: 'pathwayAlias', mapping: 'pathwayAlias'},
{name: 'proprietaryFileRequired', mapping: 'proprietaryFileRequired', type:'boolean'},
{name: 'repairShopNumber', mapping: 'repairShopNumber'},
{name: 'shopAppraiserLicense', mapping: 'shopAppraiserLicense'},
{name: 'licenseExpirationDate', mapping: 'licenseExpirationDate', type:'date', dateFormat: 'Y-m-d H:i:s'},
{name: 'appraiserCompanyNumber', mapping: 'appraiserCompanyNumber'},
{name: 'status', mapping: 'status'},
{name: 'officeId', mapping: 'officeId'},
{name: 'branchCode', mapping: 'branchCode'},
{name: 'pathwayOfficeName', mapping: 'pathwayOfficeName'},
{name: 'abbreviation', mapping: 'abbreviation'},
{name: 'pathwayId', mapping: 'pathwayId'},
{name: 'createdTimestamp', mapping: 'createdTimestamp'},
{name: 'createdUserId', mapping: 'createdUserId'},
{name: 'modifiedTimestamp', mapping: 'modifiedTimestamp'},
{name: 'modifiedUserId', mapping: 'modifiedUserId'},
{name: 'contactKey', mapping: 'contact.key', type: 'float'},
{name: 'email', mapping: 'contact.email' },
{name: 'phone', mapping: 'contact.phone'},
{name: 'extension', mapping: 'contact.extension'},
{name: 'fax', mapping: 'contact.fax'},
{name: 'mobile', mapping: 'contact.mobile'},
{name: 'officeKey', mapping: 'office.key', type: 'float'},
{name: 'officeName', mapping: 'office.name'},
{name: 'officeStatus', mapping: 'office.status'},
{name: 'vendorNumber', mapping: 'office.vendorNumber'},
{name: 'addressKey', mapping: 'address.key', type: 'float'},
{name: 'line1', mapping: 'address.line1'},
{name: 'line2', mapping: 'address.line2'},
{name: 'city', mapping: 'address.city'},
{name: 'state', mapping: 'address.state'},
{name: 'country', mapping: 'address.country'},
{name: 'zip', mapping: 'address.zip'}
];

// create the data store
var companyStore = new Ext.data.JsonStore({
autoDestroy: true,
fields: fields,
totalProperty: 'recordCount',
autoLoad: true,
idProperty: 'key',
data: Ext.company.companyData,
remoteSort: true,
reader: new Ext.data.JsonReader(),
root: 'records'
});

pdegit
13 Aug 2009, 6:54 AM
I would suggest writing your own Ext.form.Action.Load class. There you can handle all the specifics of dealing with your data format. You should probably override the processResponse method to deal with your data, and maybe the run method if you want to change the way the request is made.

michaelc
13 Aug 2009, 7:29 AM
Saki has a very good example of what your after
http://examples.extjs.eu/

look under forms - forms load and submit

I think once you review all your questions will be answered.

WBarnie
14 Aug 2009, 9:51 AM
Unfortunate the suggested sample uses a SimlpeStore , believe this has been deprecated. So it really does not answer the question. I actually had 2 questions 1. how to get the JsonStore to load
2. Can you use a dataIndex in an item to map it to the data source

Debugging the javascript it appears that the store is loading the data, however, the data is not being displayed on the page. If you cannot use a dataIndex for an item, then how do you populate the fields within the item?

Here is the field definition:



var fields = [
{name: 'key', mapping: 'key', type: 'float'},
{name: 'companyType', mapping: 'companyType'},
{name: 'companyStatus', mapping: 'companyStatus'},
{name: 'name', mapping: 'name'},
.......

here is the JsonStore



var companyStore = new Ext.data.JsonStore({
autoDestroy: true,
fields: fields,
totalProperty: 'recordCount',
autoLoad: true,
idProperty: 'key',
data: Ext.company.companyData,
remoteSort: true,
reader: new Ext.data.JsonReader(),
root: 'records'
});


here is the item



,{
id: "name",
name: "name",
tabIndex: 3,
dataIndex: 'name',
allowBlank: false,
minLength: 1,
maxLength: 35,
fieldLabel: "Name*"
},{
name: "appraiserNumber",
id: "appraiserNumber",
tabIndex: 5,
allowBlank: false,
maxLength: 4,
fieldLabel: "Appraiser Number*"
},{

Thank you for your help

Animal
14 Aug 2009, 10:01 AM
What's all this complexity?

Read the docs and it's VERY, VERY simple.

If you tell me what information this http://extjs.com/deploy/dev/docs/?class=Ext.form.Action.Load is lacking, then I will add it.

AFAIC, this tells you EXACTLY how to load a form.

tryanDLS
14 Aug 2009, 10:09 AM
Also, SimpleStore is not really deprecated, it's just renamed ArrayStore in 3.0.

pdegit
14 Aug 2009, 10:33 AM
I haven't got an out-of-the-box solution for mapping the data to form fields with different names. Why not just give the form fields the same name as the fields have in the data?

Regarding the load issue, I've been having sort-of the same issue myself. I have server side scripts which populate grids and wanted to use those scripts to load the records into forms as well. What I did was write my own load action.

It creates a store which loads the record from the backend, then it uses the record data to create a object which is in the specified format. Now I'm using a DirectStore and also using the JsonReader so you will have to change this to use the type of store you like.



Ext.ux.app.form.action.DirectLoad = Ext.extend(Ext.form.Action.Load, {
type: 'directload',
record: null,

constructor: function(form, opts) {
Ext.ux.app.form.action.DirectLoad.superclass.constructor.call(this, form, opts);
},

run: function(){
if (!this.store){
this.store = new Ext.data.DirectStore({
directFn: this.form.api.load,
paramOrder: this.form.paramOrder,
paramsAsHash: false,
autoLoad: false,
fields: [] // Fields are defined in the data itself
});
}

this.store.on('load', this.success, this);
this.store.on('loadexception', this.failure, this, {single: true});
this.record = null;
this.store.load({
params: this.options.params
});
},

failure: function(store){
store.un('load', this.success, this);
store.un('loadexception', this.failure, this);
Ext.ux.app.form.action.DirectLoad.superclass.failure.call(this, store);
},

success: function(store){
store.un('load', this.success, this);
store.un('loadexception', this.failure, this);
Ext.ux.app.form.action.DirectLoad.superclass.success.call(this, store);
},

processResponse: function(store) {
var response = {};
if (store && store.getCount() === 1){
this.record = store.getAt(0);
response.success = true;
response.data = this.record.data;
}
return response;
}
});

// Register the action with the form
Ext.form.Action.ACTION_TYPES.customload = Ext.ux.app.form.action.DirectLoad;

Animal
14 Aug 2009, 10:46 AM
If you need to change the data, how about adding a beforesetvalues event to the BasicForm which gets passed the form and the values object and you can poke around with it in a handler.



Ext.override(Ext.form.BasicForm, {
setValues: Ext.form.BasicForm.prototype.setValues.createInterceptor(function(values){
return this.fireEvent('beforesetvalues, this, values);
});
});