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

Posted 2023-03-28

【中文标题】ExtJS - 如何在未绑定到商店的列表 itemTpl 中使用变量

【英文标题】：ExtJS - How to use a variable within a list itemTpl that isn't bound to the store

【发布时间】：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函数。在该函数中，您可以访问任何内容。 ***.com/questions/2611820/…

当我添加这样一个函数并放置一个调试器时，我可以访问的内容非常有限。除了 xtemplate 支持的变量out, values, parent, xindex, xcount, xkey，this 上几乎没有任何数据。例如，this.getViewModel()、this.lookup() 等不起作用。那么如何从那里访问我的父视图模型？

我不是说通过 args 访问任何东西，但我是说你可以通过 Ext.getStore() 访问任何组件或其他商店等其他东西。

【参考方案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)