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

i have form panel in border layout follows:

{     xtype: 'form',     region: 'north',     split: true,     labelalign: 'top',     height: 130,     autoscroll: true,     collapsible: true,     listeners: {         'collapse': function () {             ext.getcmp('slider').settitle('filter events time');             // not working either         }     },     //collapsed: true,     id: 'slider',     title: 'filter events 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 collapse using following code, collapsed panel not have title. can see title if expand panel.

ext.getcmp('slider').collapse(true); 

how can title on collapsed form panel?

there 2 small things need fix:

1 method collapse, not take argument bool, collapse( [direction], [animate] ), optional.

2 use itemid instead of id:

an itemid can used alternative way reference component when no object reference available. instead of using id ext.getcmp, use itemid ext.container.container.getcomponent retrieve itemid's or id's. since itemid's index container's internal mixedcollection, itemid scoped locally container -- avoiding potential conflicts ext.componentmanager requires unique id.

3 fetch component reference using this inside of internal scope , use componentquery outside of it. this:

this.settitle('filter events tim  collapsede'); 

and/or

ext.componentquery.query('#slider')[0].collapse(); 

and please create components using ext.define, , call them in border layout using alias/xtype. :-)

here example on fiddle