Why does the first panel of ExtJS 4.2.1 accordion layout never close? -
i have extjs 4.2.1 accordion layout 3 panels.
when app first launched, first panel open , 2nd/3rd closed.
i can open , close 2nd , 3rd, can never close first panel.
ext.define('myaccordion', { extend: 'ext.container.container', alias: 'widget.myaccordion', padding: 0, margin: 0, width: 200, layout: { type: 'accordion', align: 'stretch', animate: true, hidecollapsetool: true }, items: [{ xtype: 'panel', title: 'test volumes', layout: { type: 'vbox', align: 'stretch' }, items: [{ xtype: 'label', text: 'volume one' },{ xtype: 'label', text: 'volume two' },{ xtype: 'label', text: 'volume three' }] }, { xtype: 'panel', title: 'production volumes', layout: { type: 'vbox', align: 'stretch' }, items: [{ xtype: 'label', text: 'volume one' },{ xtype: 'label', text: 'volume two' },{ xtype: 'label', text: 'volume three' }] }, { xtype: 'panel', title: 'extra volumes', layout: { type: 'vbox', align: 'stretch' }, items: [{ xtype: 'label', text: 'volume one' },{ xtype: 'label', text: 'volume two' },{ xtype: 'label', text: 'volume three' }] }] });
in following code leveraged 4.2.1 examples layout browser example, if first thing after launching app click first header, close, re-open , never closes again:
ext.onready(function() { ext.create('ext.container.viewport', { renderto: ext.getbody(), items: [{ xtype: 'panel', title: 'accordion layout', layout: 'accordion', defaults: {bodystyle: 'padding:15px'}, items: [{ title: 'introduction', tools: [{type:'gear'},{type:'refresh'}], html: '<p>here accordion content. click on 1 of other bars below more.</p>' },{ title: 'basic content', html: '<br /><br /><p>more content. open third panel customized , feel example.</p>', items: { xtype: 'button', text: 'show next panel', handler: function(){ ext.getcmp('acc-custom').expand(true); } } },{ id: 'acc-custom', title: 'custom panel , feel', cls: 'custom-accordion', // in layout-browser.css see css rules class html: '<p>here example of how easy customize , feel of individual panel adding css class in config.</p>' }] }] }); });
even more strange, if show collapse/expand tool, tool first panel stops working.
amazing true, happens because accordion layout container not have height set.
because can't have fixed height, fixes issue: flex: 1
but seems strange, because why should not having height (or flex, etc) break closing first container? seems weird.
Comments
Post a Comment