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：

可以使用itemId作为获取对a的引用的替代方法没有对象引用时的组件。而不是使用使用Ext.getCmp的id，使用itemId Ext.container.Container.getComponent将检索itemId或 ID的。因为itemId是容器内部的索引 MixedCollection，itemId本地作用于容器 - 避免与Ext.ComponentManager的潜在冲突，这需要一个独特的身份。

3使用内部作用域内的this获取组件引用，并在其外部使用ComponentQuery。像这样：

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

和/或

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

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

Extjs，折叠表格面板。标题没有出现

1 个答案:

这是小提琴上的example