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

最新推荐文章于 2021-08-13 00:54:33 发布

原创最新推荐文章于 2021-08-13 00:54:33 发布 · 918 阅读

本内容遵循CC 4.0 BY-SA版权协议

本文展示了一个使用ExtJS框架创建动态表格的例子。通过XTemplate实现了数据绑定与模板渲染，展示了如何利用成员函数进行数据计算，并通过按钮触发数据更新。

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()
        });
    }
});