PDA

View Full Version : Accordion menu becomes unresponsive



mirkotus
19 Dec 2013, 12:37 AM
In my page I use a card layout for switching some content. The code below makes an accordion menu unresponsive. The menu is independent from the card layout behaviour. It seems that the code for the card layout throws an error which make the menu frezee. The errors are also listed below. Please advise.


if (record.data.documentType == "Study") {
preview.getLayout().setActiveItem(img);
}
else {
preview.getLayout().setActiveItem(text);
}


Chrome error: Cannot set sytle on null object
FF error: outerCt is not defined

mirkotus
19 Dec 2013, 1:09 AM
I have found that the same error happens with the most simple example I could reproduce.
The error happens when changing to the active layout which contains a container with an autoEl set as an image. Below are steps which you can take to reproduce the error.

Steps to reproduce:
1. Create a cardLayout panel
2. Add two containers inside
3. Set an autoEl containing an image
4. Make a button and bind a switching action(between containers) to it

My code:


Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.panel.Panel',


height: 484,
width: 876,
layout: {
type: 'absolute'
},
title: 'My Panel',


initComponent: function() {
var me = this;


Ext.applyIf(me, {
items: [
{
xtype: 'panel',
x: 0,
y: 40,
height: 510,
itemId: 'mypanel1',
layout: {
type: 'card'
},
title: 'cardLayout',
items: [
{
xtype: 'container',
itemId: 'mycontainer',
items: [
{
xtype: 'gridpanel',
title: 'My Grid Panel',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'string',
text: 'String'
},
{
xtype: 'numbercolumn',
dataIndex: 'number',
text: 'Number'
},
{
xtype: 'datecolumn',
dataIndex: 'date',
text: 'Date'
},
{
xtype: 'booleancolumn',
dataIndex: 'bool',
text: 'Boolean'
}
]
}
]
},
{
xtype: 'container',
itemId: 'mycontainer1',
items: [
{
xtype: 'container',
autoEl: {
tag: 'img',
src: 'http://www.politikis.si/wp-content/uploads/2009/04/rentgen.jpg'
}
}
]
}
]
},
{
xtype: 'button',
itemId: 'mybutton',
text: 'MyButton'
}
]
});


me.callParent(arguments);
}

});

Click action:

var preview = this.getMyPanel1();
var panel2 = this.getMyContainer();
var panel3 = this.getMyContainer1();


var active = preview.getLayout().getActiveItem();


if (active == panel2){
preview.getLayout().setActiveItem(panel3);
}
else {
preview.getLayout().setActiveItem(panel2);
}


The whole layout was done with sencha architect 3.0

Kevin Jackson
24 Dec 2013, 10:37 AM
You mentioned that you were having issues in Chrome and FF. Which versions of these browsers and have you seen it work properly in another browser or version perhaps?

Kevin Jackson
24 Dec 2013, 10:40 AM
You mentioned that you were having issues in Chrome and FF.

Which versions of these browsers and have you seen it work properly in another browser or version perhaps?

mirkotus
7 Jan 2014, 3:55 AM
I am using all the browser versions and the issues are everywhere. Did you manage to reproduce?

bmacdon1
10 Jan 2014, 12:09 PM
Though my case is a little different, I am having the exact error dealing with images. Here is the JS Fiddle for this guys code. If you open you console, you will see a setStyle error. I get this when I deal with any image as well. I am using 4.2.2.

It happens in the latest version of Chrome and Firefox.

I changed the link to his image to make it better on the eyes.

https://fiddle.sencha.com/#fiddle/2io
(https://fiddle.sencha.com/#fiddle/2io)

evant
12 Jan 2014, 6:31 PM
@bmacdon1

In your case it's an incorrect usage of container.

Either:
a) Change the xtype to component and continue using autoEl
b) Change the xtype to 'image' and just set the src property