ExtJs dataview XTemplate里 两个变量做 数学运算操作

Posted 2022-12-08 程序员yqy

Ext.application(
    name: 'Fiddle',

    launch: function() 
        Ext.define('My.Example', 
            extend: 'Ext.Panel',
            tpl: new Ext.XTemplate(
                '<table border=\\'1\\' width=\\'100%\\' height=\\'100%\\'>',
                '    <tr>',
                '        <th></th>',
                '        <th>$(000\\'s)</th>',
                '        <th>%Sales</th>',
                '    </tr>',
                '    <tr>',
                '        <td>Sales:</td>',
                '        <td>sales</td>',
                '        <td>&nbsp;</td>',
                '    </tr>',
                '    <tr>',
                '        <td>COGS:</td>',
                '        <td>cogs</td>',
                //'        <td><tpl"this.cogsSales(cogs, sales)"/></td>',
                '        <td>[this.cogsSales(values.cogs, values.sales)]</td>',
                '    </tr>',
                '    <tr>',
                '        <td>Gross Profit:</td>',
                '        <td>grossProfit</td>',
                '        <td>[this.profitSales(values.grossProfit, values.sales)]</td>',
                '    </tr>',
                '</table>', 
                // XTemplate configuration:
                disableFormats: true,
                // member functions:
                cogsSales: function(cogs, sales) 
                    return cogs / sales;
                ,
                profitSales: function(grossProfit, sales) 
                    return grossProfit / sales;
                
            )
        );

        var panel = new Ext.create('My.Example', 
            data: 
                sales: 0,
                cogs: 0,
                grossProfit: 0
            ,
            renderTo: Ext.getBody()
        );

        var button = new Ext.create('Ext.button.Button', 
            text: "click me",
            listeners: 
                click: function() 
                    panel.update(
                        cogs: 100,
                        grossProfit: 300,
                        sales: 500
                    );
                
            ,
            renderTo: Ext.getBody()
        );
    
);