如何实现ExtJS中Button组件的ariaLabel属性内容动态化

完全可以实现该需求，ExtJS的Button组件ariaLabel配置原生支持ViewModel绑定，变量变更时会自动同步更新DOM上的aria-label属性，无需额外手动操作。

你提供的代码仅需补充两处逻辑即可生效：

1. 输入框绑定ViewModel的firstname变量，实现输入内容自动同步
2. 按钮的bind配置中新增ariaLabel的绑定规则

修改后的完整代码如下：

Ext.create('Ext.panel.Panel', {
    title: '测试标题',
    viewModel: {
        data: {
            firstname: undefined
        }
    },
    items: [
        {
            xtype: 'textfield',
            fieldLabel: '名字',
            bind: '{firstname}' // 输入内容同步到viewModel的firstname变量
        },
        {
            xtype: 'button',
            text: '登录',
            bind: {
                text: '{firstname}',
                ariaLabel: '{firstname ? `打开` + firstname + `的详情模态框` : "打开模态框"}' // 动态绑定ariaLabel
            }
        }
    ],
});

如果动态逻辑比较复杂，推荐在ViewModel中使用公式计算，避免模板逻辑冗余：

viewModel: {
    data: {
        firstname: undefined
    },
    formulas: {
        // 自定义公式计算ariaLabel值
        buttonAriaLabel: function(get) {
            const username = get('firstname');
            if (!username) {
                return '打开登录模态框';
            }
            return `打开用户${username}的个人中心模态框`;
        }
    }
}

// 按钮绑定处直接引用公式即可
bind: {
    ariaLabel: '{buttonAriaLabel}'
}

内容的提问来源于stack exchange，提问作者ingaine24