javascript - Extjs, collapsed form panel. Title not showing up

Question

I have a form panel in a border layout as follows:

{
    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'
        }]
    }
}

Now, when I collapse it using following code, the collapsed panel does not have a title. I can see the title if I expand the panel.

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

How can I get title on a collapsed form panel?

Answer 1

There are two small things you need to fix:

1 Method collapse, does not take argument bool, but collapse( [direction], [animate] ), all optional.

2 Use itemId instead of 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 Fetch component reference using this inside of internal scope and use ComponentQuery outside of it. Like this:

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

and/or

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

and also please create your components using Ext.define, and then call them in your border layout using alias/xtype. :-)

Here is a example on fiddle