Can a dollar amount value from an Editor Grid Panel be used to add or subtract from another field in the form panel?

Question

I have an Editor Grid Panel inside a field set that is inside a form panel. I am using the Editor Grid Panel to record multiple Invoice line items that need to be added to the Invoice record. What I need to do is take the dollar amount from the Editor Grid Panel(for each line item) and add (positive number) or subtract (negative number) to the field outside the Editor Grid Panel but inside the form panel. This field is called Amount Due. How can this be done? Thanks for the help. Here is the code and a screen shot of the form. capturetheflag

Here is the code for the grid. /==== INVOICE DATA START =======================================================/

// 
var clinRec = new Ext.data.Record.create([
{
    name: 'value'           ,
    mapping: 'name'   ,
    type: 'string'
}
,{
    name: 'display'         ,
    mapping: 'value' ,
    type: 'string'
}
,{
    name: 'stateRegion'     ,
    mapping: 'field1'  ,
    type: 'string'
}
,{
    name: 'clinDesc'        ,
    mapping: 'field2'  ,
    type: 'string'
}
,{
    name: 'fiscalYearStart' ,
    mapping: 'field3'  ,
    type: 'string'
}
,{
    name: 'declarationDate' ,
    mapping: 'field4'  ,
    type: 'string'
}
]);
var clinReader = new Ext.data.JsonReader({
    totalProperty: 'numrows',
    root:'rows',
    id: 'value'
},
clinRec
);
var clinStore =   new Ext.data.Store({
    url: 'GetPickListDataAction.do',
    reader: clinReader,
    listeners: {
        loadexception: function(proxy, store, response, e) {
            logger.trace('#####TOA:DATA: Load Exception');
        }
    }
});
clinStore.load({
    waitTitle: 'Please Wait',
    waitMsg: 'Loading...',
    params: {
        listType: 'CLIN'
    },
    callback: function (records, options, success) {
        if (success) {
            logger.trace("###>>TOA:DATA:CLIN:STORE:LOAD: Succeded");
        }
        else {
            logger.trace("###>>>>>>TOA:DATA:CLIN:STORE:LOAD: failed");
            Ext.MessageBox.show ({
                msg: 'No records are available (CLIN)',
                icon: Ext.MessageBox.WARNING,
                buttons: Ext.MessageBox.OK
            });
        }
    //Core.MessageHandler.display (dstrReader);
    }
});

var iLineItemCM = new Ext.grid.ColumnModel([
{
    id: 'i_line_item_clin',
    header: "Field",
    sortable: false,
    width: 150,
    editor: new Ext.form.ComboBox({
        triggerAction: 'all',
        valueNotFoundText: 'Select a Field...',
        //emptyText: 'Select Field...',
        editable: false,
        forceSelection: false,
        valueField: 'value',
        displayField: 'display',
        store: clinStore,
        mode: 'local'
    })
},
{
    id:'i_line_item_name',
    header: "Line Item Name",
    dataIndex: 'i_line_item_name',
    width: 315,
    resizable: true,
    align: 'left',
    editor: new Ext.form.TextArea({
        allowBlank: false
    })
}
,{
    header: "Amount",
    dataIndex: 'i_line_item_amt',
    width: 80,
    align: 'right',
    renderer: 'usMoney',
    editor: new Ext.form.NumberField({
        allowBlank: false,
        allowNegative: false,
        maxValue: 100000
    })
}
]);

var iLineItemRec =
new Ext.data.Record.create([
{
    name: 'i_line_item_name'    ,
    mapping: 'i_line_item_name'  ,
    type: 'string'
}
,{
    name: 'i_line_item_amt'     ,
    mapping: 'i_line_item_amt'   ,
    type: 'string'
}
]);

var iLineItemStore = new Ext.data.Store({
    url: '',
    reader: new Ext.data.JsonReader({
        root: 'rows'
    },
    iLineItemRec
    )
});

var iLineItemGrid = new Ext.grid.EditorGridPanel({
    id: 'iLineItemStore',
    store: iLineItemStore,
    cm: iLineItemCM,
    cls: 'iLineItemGrid',
    width: 'auto',
    height: 'auto',
    frame: true,
    //title:'Edit Plants?',
    //plugins:checkColumn,
    clicksToEdit:1,
    viewConfig: {
        //forceFit: true
        autoFit:true
    },

    tbar: [{
        text: 'Add',
        tooltip:'Add the line item',
        handler : function(){
            var r = new iLineItemRec({
                i_line_item_name: '',
                i_line_item_amt: ''
            });
            iLineItemGrid.stopEditing();
            iLineItemStore.insert(0, r);
            iLineItemGrid.startEditing(0, 0);
        }
    },
    {
        text: 'Delete',
        tooltip:'Remove the selected line item',
        handler: function(){
            iLineItemGrid.stopEditing();
            var r = iLineItemGrid.getSelectionModel().getSelectedCell();
            iLineItemStore.removeAt(r[1]);
        }

    }

    ]
});
///////////////////

Answer 1

As Neil mentioned, you should create a model to handle this type of logic, and have as little logic as possible in the view. rRally there is no reason for logic to be in the view to begin with, this is the job of the controller.

Furthermore, I notice that you're assigning the id property an awful lot, which becomes rather cumbersome to manage as the application grows in size. I would suggest changing these assignments to itemId and accessing the object via Panel.down('#itemId') or Panel.queryById(itemId) rather than Ext.getCmp as I imagine you're currently doing. The id property is global and therefore must be unique throughout the entire application.

Your controller should observe your views, as you add items to the order run a calculateTotal method on the controller which iterates over records in the specified Grid. You can then get the value of each record and add/subtract as necessary. Once complete, set the fields/labels as necessary with the updated total.

For the order total, maybe something like this label example would work for displaying the value. As labels are not submitted with the form, you could create a hidden Field on the form and use setValue() to change its value whenever you calculate the order total.

{
    xtype       : 'label',
    itemId      : 'order-total-label',
    /** This can be easily updated via me.update({value: "4.20"}); */
    data        : { value: '0.00' },
    tpl         : "Order Total: ${value}",
}