为何鼠标点击切换ExtJS标签页时，viewModel的activeItem值未更新？

问题根源 #

你遇到的情况是因为ExtJS中activeItem的默认绑定是单向绑定——只有当ViewModel中的active值变化时，会同步到tabpanel的激活项，但反过来，手动点击标签切换激活项时，不会自动把新的tab ID同步回ViewModel的active字段。这不是你的预期错误，是默认绑定的行为特性。

解决方案 #

有两种常用的处理方式：

方式1：使用双向绑定语法

在bind配置里给activeItem加上双向绑定标记（::），让绑定变成双向同步：

bind: {
    activeItem: '{::active}'
}

修改后，无论是通过按钮更新ViewModel，还是手动点击标签切换，active字段和tabpanel的激活项都会双向同步。

方式2：监听tabpanel的tabchange事件手动更新ViewModel

如果不想用双向绑定，也可以通过监听事件手动同步：

xtype: 'tabpanel',
bind: {
    activeItem: '{active}'
},
listeners: {
    tabchange: function(tabPanel, newTab) {
        // 获取当前激活tab的id，更新到ViewModel
        tabPanel.getViewModel().set('active', newTab.getId());
    }
},

当用户点击标签切换时，tabchange事件触发，把新激活tab的ID设置到ViewModel的active字段，实现同步。

修改后的完整代码示例（以双向绑定为例） #

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',
        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()
});

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

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

内容的提问来源于stack exchange，提问作者leonard.javiniar