How can I call a function from within another function, when both have been declared

[dOrduna]

Hi, I'm trying to do what I thought would be a simple event test. My goal is to make a combobox, a grid and a label interact in the following way: when you select an item from the combobox, it is added to the grid, then the label displays a total sum of the grid's item prices multiplied by their quantity, so every time a new item is added to the grid, the total sum must be recalculated. Here's my panel's code (variables and function names are in spanish):


Ext.define('Contar.view.ComprasView', {
extend: 'Ext.form.Panel',
requires: ['Contar.store.CompradoresStore',
'Contar.store.ProveedoresStore',
'Contar.store.ProductosStore',
'Contar.model.Persona',
'Contar.model.Producto',
'Contar.view.CompraProductosGrid'],
title: 'Compras',
renderTo: 'extJS',
height: 500,
layout: {
type: 'vbox',
align: 'stretch'
},
bodyPadding: 10,

initComponent: function() {
this.items = this.buildItems();
this.callParent();
},


buildItems: function() {
return [{
id: 'cbProductos',
xtype: 'combobox',
fieldLabel: 'Producto',
store: 'ProductosStore',
displayField: 'nombre',
emptyText: 'Escribe el nombre de un producto',
queryMode: 'remote',
typeAhead: true,
triggerAction: 'query',
width: 500,
listeners: {
select: this.agregarProducto
}
},{
xtype: 'compraProductosGrid',
id: 'productosGrid'
}];
},



agregarProducto: function(combo, records, eOpts) {
var productosStore = Ext.getCmp('productosGrid').getStore();
productosStore.add(records);
Ext.getCmp('cbProductos').clearValue();
this.calcularTotales();
},

calcularTotales: function () {
var subtotal = 0;
var total = 0;
var productosStore = Ext.getCmp('productosGrid').getStore();

productosStore.each(function(record) {
subtotal += (record.data.precioCompra * record.data.cantidad);
}, this);

total = subtotal;
Ext.log(total);
},

registrarCompra: function () {

}

});


As you can see, I'm calling this.calcularTotales(); in order to refresh the total (being printed to the console) but I'm getting this error: Uncaught TypeError: Object [object Object] has no method 'calcularTotales'

I was using ExtJS's MVC architecture and the functions were declared inside a Controller that listened for the events fired by each component and everything worked just fine! The thing is, I decided to give up on MVC because I need a multiple page application, not a single page one and now, without the controller, this doesn't work. Can anyone help me please?

[sskow200]

Hello there,

The issue you're having is a scoping problem. When you click your item in the combobox, the scope of the event is the combobox itself, not your view. To alleviate this, you can bind the scope you want to your function, like so:




buildItems: function() {
return [{
id: 'cbProductos',
xtype: 'combobox',
fieldLabel: 'Producto',
store: 'ProductosStore',
displayField: 'nombre',
emptyText: 'Escribe el nombre de un producto',
queryMode: 'remote',
typeAhead: true,
triggerAction: 'query',
width: 500,
listeners: {
<--- binding the view to the scope of this function --->
select: Ext.bind(this.agregarProducto, this)
}
},{
xtype: 'compraProductosGrid',
id: 'productosGrid'
}];
},


Now when 'this.agregarProducto' is called, the scope of it is your View and not the combobox. Make sense?

[dOrduna]

Thank you very much! That solved my problem.