Question

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

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

// 
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

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

此外，我注意到您分配了id属性非常多，随着应用程序的大小增加，管理变得相当麻烦。我建议将这些作业更改为itemId并通过Panel.down('#itemId')或Panel.queryById(itemId)而不是Ext.getCmp访问该对象，因为我认为您正在进行此操作。 id属性为全局，因此在整个应用程序中必须是唯一的。

您的控制器应该观察您的视图，当您向订单添加项目时，在控制器上运行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}",
}

可以使用编辑器网格面板中的美元金额值来添加或减去表单面板中的其他字段吗？

1 个答案: