PDA

View Full Version : Accordion doesn't appear to have any behaviour attached



alexmcmillan
1 Apr 2014, 2:53 PM
I'm checking out ExtJS as a possible frontend framework for our Oracle APEX Application, which is growing quickly.

I have created the simplest possible page, with 4 "region" panels (all except West). In my main Viewport.js file I have an item defined like this:


{ xtype: 'sidebar',
contentEl: 'app-east-panel',
layout: 'fit',
region: 'east',
width: 300
}

and I have a Sidebar.js view defining an xtype of "sidebar", half a dozen items (containing only a title and short html string) and a layout of:


layout: {
type: 'accordion',
animate: true,
fill: true,
titleCollapse: true
}

While everything appears on screen with Ext styling and (due to `defaults: {collapsed: true}` in the Sidebar view) all the accordion items begin collapsed, clicking the headers for the accordion does absolutely nothing.

Having watched a few videos and read many pages about layouts (including SenchaDocs), it appears I am doing everything correctly. Is setting the "layout" config option (above) all that is necessary to insert a working collapsible accordion, or am I expected to add the functionality myself? Can anybody see anything that I'm obviously doing wrong?

I do not get any JS errors and the elements, when inspected, have had bucketloads of "x-" classes added so it appears that Ext is doing its thing, but still no functionality at all.

Any help much appreciated.

My Viewport.js file:


Ext.define('Nomos.view.Viewport', {
extend: 'Ext.container.Viewport',

requires: [
'Nomos.view.Sidebar',
'Ext.layout.container.Border'
],

defaults: {
autoScroll: true
},
items: [{
contentEl: 'app-north-panel',
region: 'north'
},{
contentEl: 'app-center-panel',
region: 'center'
},{
xtype: 'sidebar',
contentEl: 'app-east-panel',
layout: 'fit',
region: 'east',
width: 300
},{
contentEl: 'app-south-panel',
height: 200,
region: 'south'
}],
layout: 'border'
});

Any my Sidebar.js:


Ext.define('Nomos.view.Sidebar', {
extend: 'Ext.panel.Panel',

requires: [
'Ext.layout.container.Accordion'
],

id: 'sideBar',

xtype: 'sidebar',

layout: {
type: 'accordion',
animate: true,
fill: true,
titleCollapse: true
},

defaults: {
xtype: 'panel',
collapsed: true
},

items: [{
title: 'Help',
html: '<p>This is where the help is!</p>'
},{
title: 'Placeholders',
html: '<p class="subtitle">Use these as placeholders for content held in the database</p><div id="placeholderList"></div></p>'
},{
title: 'Checklist',
html: '<p>Here is a list of stuff you can check off!</p>' +
'<ul>' +
'<li>List item one</li>' +
'<li>List item two</li>' +
'<li>List item three</li>' +
'</ul>'
},{
title: 'Comments',
html: '<p>Feel like commenting on this?</p>' +
'<ul>' +
'<li>Old comment 1</li>' +
'<li>Old comment 2</li>' +
'<li>Old comment 3</li>' +
'</ul>'
},{
title: 'Pages',
html: '<p>Here is another section of the accordion</p>' +
'<p>It contains 2 simple paragraphs.</p>'
}]
});

Gary Schlosberg
1 Apr 2014, 3:33 PM
I don't believe that an accordion layout can start with all panels collapsed unless you create that functionality yourself, so that may be related to the problem you are experiencing. Accordion layouts definitely have a built-in functionality as seen in this Fiddle:https://fiddle.sencha.com/#fiddle/4mnI found a Feature Request (EXTJSIV-11246) to add the ability to start with all accordion panels collapsed, and in it was a link to a bit of a hack which might help you if you really need this.http://www.sencha.com/forum/showthread.php?248066#7

alexmcmillan
1 Apr 2014, 4:12 PM
Yea I saw that request in my travels, but just assumed it must have been implemented by Ext 4.2.1 - as setting "defaults: {collapsed:true}" on the Sidebar view causes the panels to begin collapsed.

At this point I'm just trying to get the accordion to behave like an accordion - or to provide some form of feedback when clicked. With the above config, I get 4 headings containing the appropriate text - it looks exactly as I would expect. However, clicking a heading does nothing. I would have expected the heading that was clicked to open up its content panel, or at the least throw an error explaining why it's not responsive.

Its as if the accordion is receiving all the classes and styling that is expected of an accordion, but no event handlers are attached.Also, the link to fiddle.sencha.com just gives me "A fiddle could not be found with id: 4mnI" - do I need to have created an account there to access them or something?

Thank you for your help.

P.S: commenting out the 'collapsed:true' config setting changes the appearance of the accordion as expected (with all panels open) but there is still no functionality whatsoever.