How can I insert new record to a store?

[AesonErryl]

Problem Overview: I am new to Ext JS 4 and been learning it for three weeks now. I apologize for my codes to be not-so good yet. Anyway, could someone please provide a code how to add/insert new records into a store and explain what it does? I have tried some things but found no output (or might be I'm using them the wrong way). I really don't have any idea and quite lost here. I've been looking for tutorials how to add/insert data into a store but found none(or if there are any, can I have some link?). I am using Memory as Proxy since the data will be lost upon page refresh.

Application Overview:
I have two views aliased as:
-pnlAmortizationParameters (a panel with fields and a button IDedly, btnCalculate) and
-grdAmortizationSched (a grid that has the store, amortizationcalc.AmortizationSched )
Also, I have a controller which listens for the click event of btnCalculate and contains a function, calculateAmortization().

Goal: When the user clicks btnCalculate, the function calculateAmortization should add sets of records to a store, storeIDed as strAmortSched. And when the records are added into the store, grdAmortizationSched will then refreshed.


VIEW code for my Parameters:


Ext.define('App.view.amortizationcalc.AmortizationParameters', {
extend: 'Ext.panel.Panel',
alias: 'widget.pnlAmortizationParameters',
cls: 'pnlAmortizationParameters',

initComponent: function () {
Ext.apply(this, {
title: 'Parameters',
border: false,
layout: 'vbox',
margin: '6 5 3 5',
frame: true,
items: [
{
xtype: 'numberfield',
id: 'nfLoanAmount',
fieldLabel: 'Loan Amount',
margin: '6 5 3 5',
anchor: '100%',
minValue: 1,
labelAlign: "right",
width: 200
},
{
xtype: 'panel',
layout: 'hbox',
border: false,
style: {
border: 0,
padding: 0
},
margin: '6 5 3 5',
frame: true,
items: [
{
xtype: 'numberfield',
id: 'nfLoanTermYears',
fieldLabel: "Term",
anchor: '100%',
labelAlign: 'right',
minValue: 0,
width: 200,
decimalPrecision: 3
},{
xtype: 'numberfield',
id: 'nfLoanTermMonths',
fieldLabel: "yrs or",
labelWidth: 40,
minValue: 1,
width: 170,
margin: '0 0 0 2'
},
{
xtype: 'label',
text: 'mos',
margin: '2 0 0 5'
}
]
},{
xtype: 'numberfield',
id: 'nfInterestRate',
fieldLabel: "Interest Rate (%)",
margin: '6 5 3 5',
anchor: '100%',
//value: 0,
minValue: 0.01,
step: .01,
labelAlign: "right",
width: 200,
emptyText: 0
},{
xtype: 'container',
layout: {
type: 'hbox',
pack: 'center',
align: 'stretch'
},
border: true,
anchor: '100%',
width: 420,
items: [
{
xtype: 'button', //this is where btnCalculate is
id: 'btnCalculate',
text: 'Calculate',
arrowAlign: 'bottom',
scale: 'large',
width: 120,
menu: new Ext.menu.Menu({
items: [
{ text: 'Monthly' },
{ text: 'Yearly' }
]
})
}
]
}
]
});
this.callParent();
}
});


VIEW code for my Grid:


Ext.define('App.view.amortizationcalc.AmortizationSched', {
extend: 'Ext.grid.Panel',
alias: 'widget.grdAmortizationSched',
cls: 'grdAmortizationSched',

initComponent: function () {
Ext.apply(this, {
title: 'Amortization Schedule',
store: 'amortizationcalc.AmortizationSched',
columns: this.getColumnConfig()
});
this.callParent();
},

getColumnConfig: function () {
return [
{ header: '#', dataIndex: 'paynumber', width: 30 },
{ header: 'Date', dataIndex: 'paydate', flex: 1 },
{ header: 'Payment Amount', dataIndex: 'payamount', flex: 1 },
{ header: 'Principal', dataIndex: 'principal', flex: 1 },
{ header: 'Interest', dataIndex: 'interest', flex: 1 },
{ header: 'Total Principal', dataIndex: 'totprincipal', flex: 1 },
{ header: 'Total Interest', dataIndex: 'totinterest', flex: 1 },
{ header: 'Balance', dataIndex: 'balance', flex: 1 }
]
}
});



CONTROLLER code:


Ext.define('App.controller.amortizationcalc.AmortizationCalc', {
extend: 'Ext.app.Controller',

views: [
'amortizationcalc.AmortizationParameters',
'amortizationcalc.AmortizationSched',
],
stores: [
'amortizationcalc.AmortizationSched'
],
models: [
'amortizationcalc.AmortizationSched'
],

init: function () {
this.control({
'#btnCalculate > menuitem': {
click: this.calculateAmortization
}
});
},


calculateAmortization: function (item) {
//parameters
var principal = Ext.getCmp('nfLoanAmount').getValue();
var time = Ext.getCmp('nfLoanTermMonths').getValue();
var rate = ((Ext.getCmp('nfInterestRate').getValue()) / 100) / 12;
var addMonthlyPay = Ext.getCmp('nfAddMonthlyPay').getValue();

//monthly pay calculation
var numerator = rate * (Math.pow((1 + rate), time));
var denominator = (Math.pow((1 + rate), time)) - 1;
var monthlyPay = (principal * (numerator / denominator)) + addMonthlyPay;

//additional calculations here

//store records insertion here
//I am stuck here and quite lost. :/
//How can I insert these records to strAmortSched?
/*
{
paynumber: "1",
paydate: "January 2012",
payamount: "$ 1,000",
principal: "$ 200",
interest: "$ 800",
totprincipal: "$ 200",
totinterest: "$ 800",
balance: "$ 29,800"
},
{
paynumber: "2",
paydate: "February 2012",
payamount: "$ 1,000",
principal: "$ 250",
interest: "$ 750",
totprincipal: "$ 450",
totinterest: "$ 1,550",
balance: "$ 29,550"
},
{
paynumber: "3",
paydate: "March 2012",
payamount: "$ 1,000",
principal: "$ 300",
interest: "$ 700",
totprincipal: "$ 750",
totinterest: "$ 2,250",
balance: "$ 29,250"
}
//..these are just dummy data
*/

}
});



STORE code for the grid:


Ext.define('App.store.amortizationcalc.AmortizationSched', {
extend: 'Ext.data.Store',
storeId: 'strAmortSched',
model: 'App.model.amortizationcalc.AmortizationSched',
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});


MODEL code for the STORE above:


Ext.define("App.model.amortizationcalc.AmortizationSched", {
extend: 'Ext.data.Model',
fields: [
'paydate',
'payamount',
'principal',
'interest',
'totprincipal',
'totinterest',
'balance'
]
});




p.s. I know we should avoid using Ext.getCmp(). But, as of the moment, I really don't have any idea yet what other approaches to use how to get values from my numberFields on this purpose. Tho, I would also appreciate some suggestions.

[Farish]

you can insert data using the insert method of the store.


store.insert(0, {field1: value1, field2: value2, ...});

where the 1st argument is the position where the new record has to be added.

[AesonErryl]

thanks! But how can i use this and insert this into the controller code?

Inside the CONTROLLER:
calculateAmortization: function (item) {
//parameters
.
.
.


//monthly pay calculation
.
.
.
//additional calculations here

//store records insertion here
.
.
.

Ext.getCmp('strAmortSched').insert(0, {
paynumber: "3",
paydate: "March 2012",
payamount: "$ 1,000",
principal: "$ 300",
interest: "$ 700",
totprincipal: "$ 750",
totinterest: "$ 2,250",
balance: "$ 29,250"
});
}

..am I doing this right? I am receiving "Uncaught TypeError: Cannot call method 'insert' of undefined" error. Sorry for asking such question; please bear with me. I am already lost here... thanks!

[Farish]

I am not much familiar with MVC architecture but your error is coming because Ext.getCmp() doesn't find the store. Make sure that the store is created before you use its id to get it using getCmp().

[vdaiev]

You need to get a grdAmortizationSched's store. I can't find where in your code you use the grid.
In any case in 'CalculateAmortization' method you need to do something like this:


var store = grdAmortizationSched.getStore();
store.insert(0, {
paynumber: "3",
paydate: "March 2012",
payamount: "$ 1,000",
principal: "$ 300",
interest: "$ 700",
totprincipal: "$ 750",
totinterest: "$ 2,250",
balance: "$ 29,250"
});