zqqs84h3is

Problem with an Accordion Layout in Safari

Posted on Jan 08, 2009 under xn--zqqs84h3is.com | edit Hi,

I tried to render an Accordion with dynamically added Panels. I build the Panels with a JsonStore. Everything works fine in IE and Firefox. Safari displays the Accordion only after I have reloaded the page 2 - 4 times.

The Json String:

{"artists":[{"html":"Bronco Braun started his career in the mid 90's as a DJ in the area of Hannover / Germany

rnincultus Vox inennarabilis ludo per dis misericordaliter Summitto cos Infectum per velut scaccarium abico, inconsolabilis Occasus. Ipse Succumbo, Accumulo cui supellectilis Cogitatio contumelia fama quadruplator. Per sol insequor prex his arx necessarius Primordia De cum casa fiducialiter laboriosus Secundus, lex asper ros hio cur interrogatio saltem vir Adversa, Gregatim mei Eo metuo sum maro i.rn

Releases:
Velcro Audio E.P.

Links:
Bronco Braun @myspace

","title":"Bronco Braun","id":1},{"html":"He / She / It is a fake... Or is it real? Don't know yet.

Releases:
My Head Is Your Head

","title":"Princess Of The Blue Crystal","id":2},{"html":"Any words necessary? He is the DJ, the DJ itself

No releases yet...

","title":"A DJ called DJ","id":3}]}
The JS code:

var audiokonform = null;

var winA = Array();

var artistStore = new Ext.data.JsonStore({
url: 'delegate.do?itemId=artists',
root: 'artists',
autoLoad: true, // Note this!
fields: ['id', 'title', 'html']
});



Ext.onReady(function() {
Ext.QuickTips.init();
Ext.BLANK_IMAGE_URL = "Ext.BLANK_IMAGE_URL = '../lib/ext/resources/images/default/s.gif';";
audiokonform = new Audiokonform();
});


Audiokonform = function(config) {
Ext.apply(this, config);

Audiokonform.stateManager = new Naxos.state.HistoryManager('mx-historyFrame', 'mx-historyField');
Audiokonform.stateManager.addHandler('navigation', 'news', this.navigationHandler, this);
Audiokonform.navigate = Audiokonform.stateManager.navigate;

this.card = new Ext.Panel({
applyTo: 'content',
autoShow: true,
autoHeight: true,
layout:'card',
activeItem: 0, // make sure the active item is set on the container config!
bodyStyle: 'padding: 0px 15px 15px 15px;',
border:false,
defaults: {
border:false,
autoHeight: true
},
items: [
{
id: 'news',
html: '',
renderTo: 'news-card'
}, {
id: 'about',
html: '',
renderTo: 'about-card'
}, {
id: 'releases',
contentEl: 'releases-card'
}, {
id: 'mixes',
html: '',
renderTo: 'mixes-card'
}, {
id: 'artists'
}, {
id: 'visuals',
html: '',
renderTo: 'visuals-card'
}, {
id: 'links',
html: '',
renderTo: 'links-card'
}, {
id: 'contact',
html: '',
renderTo: 'contact-card'
}, {
id: 'artist',
html: '',
renderTo: 'artist-card'
}
],
activate: function(itemId, data) {
var item = this.getComponent(itemId);

if (itemId != 'releases' && itemId != 'artists') {
item.load('delegate.do?itemId='+itemId);
}
this.getLayout().setActiveItem(itemId);
}

});

artistStore.load();

var accordion = new Ext.Panel({
title: ' ',
layout:'accordion',
renderTo: 'artists-card',
el: 'artists',
cls: 'no-title',
bodyStyle: 'background: transparent; border-color: white;',
defaults: {
bodyStyle: 'padding:15px'
},
layoutConfig: {
titleCollapse: true,
animate: true,
hideCollapseTool: true
}
});

artistStore.each(function(aRecord) {
var aPanel = new Ext.Panel({
id: 'anArtist-'+aRecord.get('id'),
border: false,
title: ''+aRecord.get('title')+"",
html: aRecord.get('html'),
autoHeight: true
});
accordion.add(aPanel);
});

accordion.render('artists-card');

var releasesStore = new Ext.data.JsonStore({
url: 'delegate.do?itemId=releases',
root: 'releases',
// autoLoad: true, // Note this!
fields: ['url', 'title', 'artist', 'releaseId']
});

releasesStore.load();

var dvTpl = new Ext.XTemplate(
'',
'', // TODO: Insert the release Id
'

#If you have any other info about this subject , Please add it free.#

Your name: E-mail: Telphone: Your comments: If you have any other info about Problem with an Accordion Layout in Safari , Please add it free.