Data Store has empty data property - extjs

Question

I am working with Ext.js and trying to get a data Store set up and mapped to data fields on my FormPanel so that I can easily acess data input.
Something is missing in my mapping:
When I enter data in the textfields and hit my Submit button's submit handler, the data property on the store is blank. I was expecting it to contain data input on the page. Can someone help? Thanks very much:
infoPanel = function () {
this.store = new Ext.data.JsonStore({
autoLoad: true,
root: 'Data',
storeId: 'creditMemoStore',
fields: ['shipto', 'billto', 'reasonCode', 'creditClaimed', 'adjustmentAmount', 'poNumber']
});
this.fieldset = {
xtype: 'fieldset',
flex: 1,
border: false,
defaultType: 'field',
items: [
{
xtype: 'textfield',
labelWidth: 160,
fieldLabel: 'Ship to',
name: 'shipto',
//dropdown
allowBlank: false
},
{
xtype: 'textfield',
labelWidth: 160,
fieldLabel: 'Bill to',
name: 'billto',
//dropdown
allowBlank: false
},
{
xtype: 'textfield',
labelWidth: 160,
fieldLabel: 'Reason Code',
name: 'reasonCode',
//dropdown
allowBlank: false
},
{
labelWidth: 160,
xtype: 'numberfield',
allowNegative: false,
fieldLabel: 'Amount',
allowBlank: false,
name: 'creditClaimed'
},
{
labelWidth: 160,
xtype: 'numberfield',
allowNegative: false,
fieldLabel: 'Adjustment Amount',
name: 'adjustmentAmount',
allowBlank: false,
maxLength: 5
},
{
xtype: 'textfield',
labelWidth: 160,
fieldLabel: 'Customer PO Number',
allowBlank: false,
name: 'poNumber',
maxLength: 15
},
{
xtype: 'textfield',
labelWidth: 160,
fieldLabel: 'Debit Memo Number',
allowBlank: false,
name: 'dmNumber',
maxLength: 50
},
{
xtype: 'textfield',
labelWidth: 160,
fieldLabel: 'Credit Memo Number',
allowBlank: false,
name: 'cmNumber',
maxLength: 6
},
{
xtype: 'textfield',
labelWidth: 160,
fieldLabel: 'Currency Code',
name: 'currencyCode',
//dropdown
allowBlank: false,
maxLength: 3,
value: 'USD'
}
]
};
this.panel = new Ext.form.FormPanel({
renderTo: Ext.getBody(),
width: 700,
title: 'Create Credit Memo',
height: 400,
frame: true,
id: 'creditMemoFormPanel',
layout: 'vbox',
layoutConfig: {
align: 'stretch'
},
items: [
this.fieldset
],
store: this.store,
buttons: [
{
text: 'Reset',
handler: function () {
this.up('form').getForm().reset();
}
},
{
text: 'Submit',
formBind: true,
handler: function () {
var form = this.up('form').getForm();
var store = Ext.StoreMgr.get('creditMemoStore');
var dataObject = { testPost: store.data};
if (form.isValid()) {
Ext.Ajax.request({
url: 'CreateCreditMemo',
jsonData: Ext.JSON.encode(dataObject),
success: function() { Ext.Msg.alert('json post Success'); },
failure: function () { Ext.Msg.alert('json post Fail'); },
});
}
}
}
]
});
}
Ext.onReady(function () {
var ip = new infoPanel();
});

Answer 1

The Ext.js Store is only used for records where more than set of data is displayed at a time.
The Store doesn't apply to a basic form. The Ext.js Form posts the values of all of the fields automatically on submit.