Setting cell value from SUM of other cells in the same row

Question

I have a gridpanel with some number columns. I have one column that will contain the SUM of other. I want to set this value automatically when user focus on SUM column. Here is my code:

<ext:Column runat="server"
    DataIndex="totalth"
    Text="TOTAL (T/H)"
    Flex="2"
    Align="Center">
        <Editor>
            <ext:NumberField
                runat="server"
                AllowBlank="false"
                AllowDecimals="true"
                DecimalPrecision="3"
                name="totalth"
                Step="0.01">
                    <Listeners>
                        <Focus Fn="getSum"></Focus>
                    </Listeners>
            </ext:NumberField>
        </Editor>
</ext:Column>

Javascript Fn:

var getSum = function (item) {
    item.setValue/*(here is the sum of other two cells in the same row.)*/;
};

How can I get the value from the other cells? Maybe do it in server side is better, I dont know.

Answer 1

Here is a reworked answer for ext.net.

You can still use renderer , because it works with the record. If you want to show it only on certain actions, there is a number of ways to do it. Like on mouse hover, you can use overCls to hide the text using CSS, like I did in my example.

If you want to show sum, you don't need to use editor. The number format can be taken care of in the getSum renderer.

Javascript:

var getSum = function ( value, metadata, record ) {
    var sum = record.get( 'column1' ) + record.get( 'column2' )
    return sum.toFixed( 2 ); // to show 2 decimal places
}

Ext.net:

<ext:Column runat="server"
    DataIndex="totalth"
    Text="TOTAL (T/H)"
    Flex="2"
    Align="Center"
    cls="column-hidden"
    overCls="column-shown">
        <Renderer Fn="getSum" />

CSS:

x-column-hidden { /* x- prefix needed depending on your version */
    /* style to hide your text */
}
x-column-shown {
    /* style to cancel hiding */
}