ExtJS5 数据绑定 Tab title 只显示 ACTIVE tab

问题描述

ExtJS5 介绍中一个新增的功能就是 Data Binding，就是数据绑定。一个简单的例子就是可以在 ViewModel中定义 panel的 title，再把 panel的 title绑定到这个 ViewModel中的数据。代码如下：

MainView.js

Ext.define('MyApp.view.main.MainView', {
    extend: 'Ext.tab.Panel',
    alias: 'widget.MainView',

    requires: ['MyApp.view.main.MainViewModel'],
    viewModel: {
        type: 'mainView'
    },
    
    tabPosition: 'left',
    tabRotation: 0,

    defaults: {
        textAlign: 'left',
        bodyPadding: 15
    },

    items: [{
        bind: {
            title: '{mainTitle1}'
        },
        items: [{xtype: 'panel1'}]
    }, {
        bind: {
            title: '{mainTitle2}'
        },
        items: [{xtype: 'panel2'}]
    }]
});

MainViewModel.js

Ext.define('MyApp.view.main.MainViewModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.mainView',
    
    data: {
        mainTitle1: 'TITLE 1',
        mainTitle2: 'TITLE 2'
    }
});

也许一个 panel的 title这样写你觉得没什么意义，但当有多个 view绑定到一个 model中的 data的时候就会体现数据绑定的好处了，暂且不提这个。

Troubleshooting 中要说的是在这种情况下的一个BUG，就是只有 ACTIVE的 tab会显示出来，要想看到另一个 tab必须手动的激活，如下图：

 

 

 

 

 

 

 

 

解决方法

这是 ExtJS5的一个 BUG，解决方法是重写 panel，代码如下：

Ext.define('EXTJS-13711', {
    override: 'Ext.panel.Panel',

    setTitle: function(title) {
        var me = this,
            oldTitle = me.title,
            header = me.header,
            reExpander = me.reExpander,
            placeholder = me.placeholder;

        if (title !== oldTitle) {
            me.title = title;

            if (header) {
                if (header.isHeader) {
                    header.setTitle(title);
                }
            } else if (me.rendered) {
                me.updateHeader();
            }

            if (reExpander) {
                reExpander.setTitle(title);
            }

            if (placeholder && placeholder.setTitle) {
                placeholder.setTitle(title);
            }

            me.fireEvent('titlechange', me, title, oldTitle);
        }
    }
});

参考资料

• Binding Tab Title Works Only For Active Tabs