Question

我已经创建了一个自定义按钮（从Ext.button.Button扩展）。新的自定义按钮在模板中有一个新的范围和一个新的配置。

此自定义按钮用于停靠在网格上的工具栏中。

{
    xtype: 'customButton',
    text: 'Custom button',
    //customConfig: 5    //this line works
    bind:{
        customConfig: '{customConfigData}',
        lazy: false
    },
    listeners: {
        click: function(btn, ev){
            debugger
        }
    }
}

网格是容器的子节点。

Ext.define('MyApp.view.myview.MyView', {
        extend: 'Ext.container.Container',
        xtype: 'main-view',
        requires: [
            'MyApp.view.myview.MyGrid'
        ],
        viewModel: {
            type: 'myModel'
        },
        items: [{
            title: 'Home',
            layout: 'fit',
            items:[{
                xtype: 'panel',
                layout: {
                    type: 'vbox',
                    align: 'stretch'
                },
                items: [{
                    xtype: 'myGrid',
                    margin: '10 0 0 0'
                }]
            }]
        }]
    });

容器附有视图模型。在视图模型I中，在数据部分我添加了新值。

Ext.define('MyApp.view.myview.MyModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.myModel',
    data: {
        customConfigData: 99
    },
    stores: {
        users: {
            type: 'users'
        }
    }
});

我尝试将自定义按钮的自定义配置与视图模型中的值绑定，但没有成功。我读到默认情况下所有的配置都是可绑定的，但在我的情况下，自定义按钮配置看不到视图模型。

我创建了一个fiddle。在这里，您还可以找到我的完整自定义按钮代码。

绑定到自定义配置的道具方式是什么？

Answer 1

两件事，两件都进入你的按钮类：

1）为配置添加更新程序以对更改做出反应：

updateCustomConfig: function(v) {
    this.innerSpan.setHtml(v);
}

2）为方便＃1，请使用childEls让您的组件轻松引用innerSpan：

childEls: ['innerSpan']

具有自定义配置绑定的Extjs6 Custom按钮

1 个答案: