javascript - ExtJs 与转换器的绑定(bind)(公式)

标签 javascript extjs data-binding extjs6 extjs6-classic

如果可能的话,我想在绑定(bind)中使用 WPF 转换器之类的东西。在 ExtJs 示例中,我看到三种类型:

  1. “{字段}”
  2. “你好{field}”
  3. “{!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 添加到当前上下文时 - 带有“record”的父 ViewModel 松散且无法正常工作。 我做错了什么,我该怎么做?

最佳答案

我使用 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}",

                    }
                }
            },
        ]
    });

关于javascript - ExtJs 与转换器的绑定(bind)(公式),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41871822/

相关文章:

java - 带有本地分页的 GWT/GXT 网格?

extjs - xtype 而不是类定义中的别名

forms - 多页表单: Bring invalid field into focus

java - Android数据绑定(bind)问题绑定(bind)适配器调用两次

javascript - [Socket.io/Node.js]获取客户​​端连接用户列表

javascript - 从姊妹文件 Node.JS 导入函数

javascript - 如何一键切换两个图像(html/js)

javascript - 使用类向网站添加元素

c# - 如何以编程方式将 WPF Datagrid 绑定(bind)到自定义对象的 ObservableCollection?

c# - wpf 目标属性依赖