A little help loading a simple form

[gp40]

I'm trying to piece together what I need to know to develop an app. Right out of the gate I'm having an issue loading data into a form. When I run my application I don't get any data in my form. My confidence is shaken....can someone give me a little push in the right direction? Thanks /Greg


Code:


var opp = Ext.regModel('Opp', {
fields: [
{name: 'first', type: 'string'},
{name: 'last', type: 'string'}
]
});

var _opp_data = new Ext.data.Store({
model: 'Opp',
autoLoad: true,
listeners: {
load: function(store, records, options){
alert('Records loaded: ' + records.length);
},
loadexception: function(proxy, options, response, e){
alert('Error occurred: ' + e);
}
},
proxy: {
type: 'ajax',
url: '/Sencha/data.json',
reader: {
type: 'json'
}
}
})

var formBase = new Ext.form.FormPanel( {
scroll: 'vertical',
url: 'index.jsp',
standardSubmit: 'false',
xtype: 'fieldset',
title: 'Personal Info',
instructions: 'Please enter the information above.',
defaults: {
required: true,
labelAlign: 'left',
labelWidth: '40%'
},
items:[{
xtype: 'textfield',
name: 'first',
label: 'First Name',
autoCapitalize : true,
required: true,
useClearIcon: true
}, {
xtype: 'textfield',
name: 'last',
label: 'Last Name',
useClearIcon: true
}]
});


new Ext.Application ({
name: 'Post',
launch: function() {

new Ext.TabPanel({

fullscreen: true,
dockedItems: [{ xtype:'toolbar', title: 'Hello World'}],
items: [
{title: 'hello'}, // first tab
formBase
]
})

formBase.load(opp);
}
});


JSON data:


{
"first": "Greg",
"last": "Preston"
}

[AndreaCammarata]

Hi gp40.
The first thing to do is edit your data.json in the following way



[{
"first": "Greg",
"last": "Preston"
}]


Then create a .js file named "myAppTabPanel.js" and place this code inside



Ext.ns('ux');

ux.myAppTabPanel = Ext.extend (Ext.TabPanel, {

initComponent: function(){

Ext.regModel('Opp', {
fields: [
{name: 'first', type: 'string'},
{name: 'last', type: 'string'}
]
});


this.store = new Ext.data.Store({
model: 'Opp',
autoLoad: true,
listeners: {
load: function(store, records, options){

//Here you load the record inside the form
this.getComponent('myForm').loadRecord(records[0]);

},
loadexception: function(proxy, options, response, e){
alert('Error occurred: ' + e);
},
scope: this
},
proxy: {
type: 'ajax',
url: 'data.json',
reader: {
type: 'json'
}
}
})

this.formBase = new Ext.form.FormPanel({
id: 'myForm',
scroll: 'vertical',
url: 'index.jsp',
standardSubmit: 'false',
xtype: 'fieldset',
title: 'Personal Info',
instructions: 'Please enter the information above.',
defaults: {
required: true,
labelAlign: 'left',
labelWidth: '40%'
},
items:[{
xtype: 'textfield',
name: 'first',
label: 'First Name',
autoCapitalize : true,
required: true,
useClearIcon: true
}, {
xtype: 'textfield',
name: 'last',
label: 'Last Name',
useClearIcon: true
}]
});


Ext.apply(this, {
fullscreen: true,
dockedItems: [{
xtype:'toolbar',
title: 'Hello World'
}],
items: [{title: 'hello'}, this.formBase]
});

ux.myAppTabPanel.superclass.initComponent.call(this);
}

});


And finally put this code in your index.js file



new Ext.Application ({
name: 'Post',
launch: function() {
new ux.myAppTabPanel();
}
});


Obviously if you add more data to your data.json, this code will always load into the form the first record, how is easy to understand looking at the line



...
this.getComponent('myForm').loadRecord(records[0]);
...


However this is just an example to makes you load your data inside the form, and this could be develop better, but this reply to your help request.

Hope this helps.

[AndreaCammarata]

Hi gp40.
I already reply to your thread, but you have to wait that the moderator approve my post.
So try to read this thread later.

[gp40]

Thanks Andrea...I look forward to your response. In the meantime I've discovered if I setup my json data as an array I can read it into a store and pass the first element of the store to the form e.g. formBase.load( store.first() ). Doesn't seem very eloquent. Thanks. /Greg

[mitchellsimoens]

FormPanel.loadRecord(model);

If you are loading from the Store, you will have to get the Model from the Store first.

API docs would have solved this question easily.

[gp40]

Hi gp40.
I already reply to your thread, but you have to wait that the moderator approve my post.
So try to read this thread later.

Thanks for the response. Per the API DOC there doesn't appear to be any difference between formPanel.load and formPanel.loadRecord. I was able to get it to work by rendering my json object as an array. Thanks

[gp40]

Andrea -

That was exactly what I needed. Thank you very much!!!! /Greg

[AndreaCammarata]

Andrea -

That was exactly what I needed. Thank you very much!!!! /Greg

You are welcome gp40 ;)