javascript - Extjs，折叠表单面板。标题不显示

Question

我有一个边框布局的表单面板，如下所示:

{
    xtype: 'form',
    region: 'north',
    split: true,
    labelAlign: 'top',
    height: 130,
    autoScroll: true,
    collapsible: true,
    listeners: {
        'collapse': function () {
            Ext.getCmp('slider').setTitle('Filter Events By Time');
            // this is not working either
        }
    },
    //collapsed: true,
    id: 'slider',
    title: 'Filter Events By Time',
    border: true,
    html: {
        tag: 'div',
        style: '',
        children: [{
            tag: 'div',
            cls: 'slider_div',
            style: 'margin-right:50px;position:relative;float:left'
        }, {
            tag: 'div',
            cls: 'slider_unit',
            style: 'margin-top:10px'
        }, {
            tag: 'div',
            style: 'clear:left'
        }, {
            tag: 'div',
            cls: 'startDate',
            style: 'margin-right:30px;float:left'
        }, {
            tag: 'div',
            cls: 'endDate',
            style: ''
        }, {
            tag: 'div',
            style: 'clear:left'
        }]
    }
}

现在，当我使用以下代码折叠它时，折叠的面板没有标题。如果展开面板，我可以看到标题。

Ext.getCmp('slider').collapse(true);

如何在折叠的表单面板上获取标题？

Answer 1

您需要解决两个小问题:

1 方法 collapse ，不采用 bool 参数，但采用 collapse( [direction], [animate] )，均为可选。

2 使用itemId而不是 id:

An itemId can be used as an alternative way to get a reference to a component when no object reference is available. Instead of using an id with Ext.getCmp, use itemId with Ext.container.Container.getComponent which will retrieve itemId's or id's. Since itemId's are an index to the container's internal MixedCollection, the itemId is scoped locally to the container -- avoiding potential conflicts with Ext.ComponentManager which requires a unique id.

3 使用内部作用域内的 this 获取组件引用并使用 ComponentQuery在它之外。像这样:

this.setTitle('Filter Events By Tim  Collapsede');

和/或

Ext.ComponentQuery.query('#slider')[0].collapse();

并且请使用 Ext.define 创建您的组件，然后使用 alias/xtype 在边框布局中调用它们。 :-)

这是一个example在 fiddle 上