ExtJs 绑定转换器（公式）答案

【问题标题】：ExtJs Binding with convertors (formulas)ExtJs 绑定转换器（公式）
【发布时间】：2017-01-26 10:49:18
【问题描述】：

如果可能的话，我想在绑定中使用 WPF 转换器。在 ExtJs 示例中，我看到了三种类型：

“{字段}”
“你好 {field}”
“{!field}”

这个例子很好用。

   Ext.create('Ext.grid.Panel', {
        store: store,
        columns: [
            {
                xtype: 'widgetcolumn',
                width: 50,
                align: 'left',
                widget: {
                    xtype: 'label',
                    bind: {
                        text: "{record.Text}",
                    }
                }
            },
        ]
    });

但我需要更多。在飞行中改变一些东西或计算。例如，根据记录中的某些信息或格式化和组合来自许多字段的信息来更改标签的样式。我想要这样的想法：

Ext.create('Ext.grid.Panel', {
        store: store,
        columns: [
            {
                xtype: 'widgetcolumn',
                width: 50,
                align: 'left',
                widget: {
                    xtype: 'label',
                    bind: {
                        text: "{calculateText(record)}",
                        style: {
                            color: "{calculateColor(record)}"
                        }
                    }
                }
            },
        ]
    });

我阅读了公式并尝试：

 Ext.create('Ext.grid.Panel', {
        store: store,
        columns: [
            {
                xtype: 'widgetcolumn',
                width: 50,
                align: 'left',
                widget: {
                    xtype: 'label',
                    viewModel:{
                        formulas: {
                            myText: function(get){
                                return get('record').Text + '$';
                            },
                        }
                    },
                    bind: {
                        text: "{myText}",

                    }
                }
            },
        ]
    });

还有这个

Ext.create('Ext.grid.Panel', {
        store: store,
        columns: [
            {
                xtype: 'widgetcolumn',
                width: 50,
                align: 'left',
                widget: {
                    xtype: 'label',
                    viewModel:{
                        formulas: {
                            myText: {
                                bind: {
                                    text: "{record.Text}",                                    
                                },
                                get: function(data){
                                    return data.text + '$';
                                },

                            },
                        }
                    },
                    bind: {
                        text: "{myText}",

                    }
                }
            },
        ]
    });

但是当我尝试将我的 ViewModel 添加到当前上下文时 - 带有“记录”的父 ViewModel 松散并且无法正常工作。我做错了什么以及我该怎么做？

【问题讨论】：

标签： javascript extjs data-binding extjs6 extjs6-classic

【解决方案1】：

我使用 rowViewModel 配置解决了我的问题。示例：

Ext.create('Ext.grid.Panel', {
        store: store,
        rowViewModel: {
            formulas: {
                myText: function(get){
                    return get('record.Text') + '$';
                },
            }
        },
        columns: [
            {
                xtype: 'widgetcolumn',
                width: 50,
                align: 'left',
                widget: {
                    xtype: 'label',                        
                    bind: {
                        text: "{myText}",

                    }
                }
            },
        ]
    });

【讨论】：

【解决方案2】：

您可以将父视图模型作为视图模型配置的一部分传递。

viewModel:{
    parent: this.getViewModel(),
    formulas: {
        myText: {
            bind: {
                text: "{record.Text}",                                    
            },
            get: function(data){
                return data.text + '$';
            }
        }
    }
}

【讨论】：