2

我在表单面板内的字段集中有一个编辑器网格面板。我正在使用编辑器网格面板记录需要添加到发票记录的多个发票行项目。我需要做的是从编辑器网格面板（对于每个行项目）中获取美元金额，并将（正数）或减去（负数）添加到编辑器网格面板之外但在表单面板内的字段。此字段称为应付金额。如何才能做到这一点？谢谢您的帮助。这是表单的代码和屏幕截图。夺旗

这是网格的代码。/ ==== 发票数据开始 =========================================== ============== /

// 
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]);
        }

    }

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

1 回答 1

0

正如 Neil 所提到的，您应该创建一个模型来处理这种类型的逻辑，并在视图中尽可能少地包含逻辑。rRally 没有理由让逻辑一开始就出现在视图中，这是控制器的工作。

此外，我注意到您分配了id很多属性，随着应用程序规模的增长，管理起来变得相当麻烦。我建议将这些分配更改为并通过或itemId访问对象，而不是像我想象的那样。该属性是全局的，因此在整个应用程序中必须是唯一的。Panel.down('#itemId')Panel.queryById(itemId)Ext.getCmpid

您的控制器应该观察您的视图，当您将项目添加到订单时calculateTotal，在控制器上运行一个方法，该方法迭代指定网格中的记录。然后，您可以获取每条记录的值并根据需要添加/减去。完成后，根据需要使用更新的总数设置字段/标签。

对于订单总额，可能类似于此标签示例的内容可用于显示该值。由于标签不与表单一起提交，您可以在表单上创建一个隐藏字段，并setValue()在计算订单总额时使用它来更改其值。

{
    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}",
}
于 2013-01-28T17:00:17.600 回答