ExtJS - 如何在未绑定到商店的列表 itemTpl 中使用变量答案

【问题标题】：ExtJS - How to use a variable within a list itemTpl that isn't bound to the storeExtJS - 如何在未绑定到商店的列表 itemTpl 中使用变量
【发布时间】：2021-08-19 18:14:46
【问题描述】：

如何让列表的itemTpl 解释不属于其直接存储/数据绑定的变量？比如我想引用一个父组件的一些viewModel数据。这是我能想到的最简单的例子：

Ext.define('ListItemTplTest.view.main.MainView', {
    extend: 'Ext.Container',
    xtype: 'mainview',

    viewModel : {
        data : {
            message: 'is available'
        }
    },

    items: [
        {
            xtype: 'list',
            itemTpl: '{title} {message}', // how to get the itemTpl to interpret the message variable?
            data: [
                { title: 'Item 1' },
                { title: 'Item 2' },
                { title: 'Item 3' },
                { title: 'Item 4' }
            ]
        }
    ]
})

假设 viewModel 的 message 属性可以更新为不同的值（例如/按下按钮，控制器将更新消息），因此将 'is available' 硬编码到 itemTpl 将不起作用。

虽然我的实际用例有点不同（子和父存储而不是子和父数据），但基本原理是相同的：我的列表组件需要解释来自父数据源的变量。

这适用于使用现代工具包的 ExtJS 7.3.1。

【问题讨论】：

同样可以写js函数。在该函数中，您可以访问任何内容。 stackoverflow.com/questions/2611820/…
当我添加这样一个函数并放置一个调试器时，我可以访问的内容非常有限。除了 xtemplate 支持的变量out, values, parent, xindex, xcount, xkey，this 上几乎没有任何数据。例如，this.getViewModel()、this.lookup() 等不起作用。那么如何从那里访问我的父视图模型？
我不是说通过 args 访问任何东西，但我是说你可以通过 Ext.getStore() 访问任何组件或其他商店等其他东西。

标签： extjs

【解决方案1】：

https://docs.sencha.com/extjs/6.5.3/modern/Ext.dataview.List.html#cfg-viewModel

根据文档，例如可以绑定数据属性。

这是一个小提琴：https://fiddle.sencha.com/#view/editor&fiddle/3dvl

  let list = Ext.create({
        xtype: 'list',
        viewModel: {
            data: {
                tplData: [{
                    title: 'Item 1',
                    message: 'a'
                }, {
                    title: 'Item 2',
                    message: 'b'
                }, {
                    title: 'Item 3',
                    message: 'c'
                }, {
                    title: 'Item 4',
                    message: 'd'
                }]
            }
        },
        fullscreen: true,
        itemTpl: '{title} {message}',
        bind: {
            data: '{tplData}'
        }
    });
    
    Ext.defer(function() {
        list.getViewModel().set('tplData', [{
            title: 'Item 4',
            message: 'a'
        }])
        list.getViewModel().notify() // not sure if really needed
    }.bind(list), 2000)

【讨论】：