var vm = Ext.create('Ext.app.ViewModel', {
    data: {
        active: 'my-tab'
    }
});

var container = Ext.create('Ext.container.Container', {
    viewModel: vm,
    layout: 'vbox',
    items: [{
        xtype: 'textfield',
        bind: {
            value: '{active}'
        },
        flex: 1
    }, {
        flex: 3,
        xtype: 'tabpanel',
        bind: {
            activeItem: '{active}'
        },
        width: 900,
        title: 'Test',
        listeners:  {
        },
        
        items: [
            {
                id   : 'my-tab',
                title: 'Tab 1',
                html : 'A simple tab</br></br></br></br>'
            },
            {   
                id: 'my-tab-2',
                title: 'Tab 2',
                html : 'Another one</br></br></br></br>'
            }
        ],
    }],
    renderTo : Ext.getBody()
});

var tab = Ext.getCmp('my-tab');

Ext.create('Ext.button.Button', {
    renderTo: Ext.getBody(),
    text    : 'Select the first tab',
    scope   : this,
    handler : function() {
        debugger;
        vm.set('active', 'my-tab');
    }
});

Ext.create('Ext.button.Button', {
    text    : 'Select the second tab',
    scope   : this,
    handler : function() {
        vm.set('active', 'my-tab-2');
    },
    renderTo : Ext.getBody()
});

上面的代码做了这些事情：
1.它显示了一个textfield，其值config在视图模型中绑定到'active'。
1.它显示了一个选项卡面板，其activeTab配置在视图模型中绑定为“active”。
1.这两个按钮试图通过更新vm中的'active'来更改活动选项卡
我的期望是，当您通过单击选项卡栏中的选项卡来更改活动选项卡时，这也会导致视图模型中的activeTab由于绑定而更新。目前看来，情况并非如此。
你知道这里出了什么问题吗？期望是错误的吗？