PDA

View Full Version : Rendering panels problem. Only showing title but no child items. (No firebug errors)



Koelkast
15 Feb 2010, 7:55 AM
Hello ExtJs members!

I'm having a very strange issue with my panels in ExtJS 3.1.0.
Live site: http://beta.patrickdebruijn.nl/cms/?com=administrator&c=overview

http://beta.patrickdebruijn.nl/img1.png

And

http://beta.patrickdebruijn.nl/img2.png

The panels are not rendering correctly, the panel in the second image(With title weeee) has another panel in it as child, but is not not showing the items. They are only shown if I add enough <br /> tags in the HTML option for that panel (with title weeee)... And firebug says there are no errors.(:|

This is the code for displaying the window in image 2 (file: main_content.js):



Ext.ns('CMS.content');
Ext.reg('CMS-content', CMS.content);


CMS.content = new Ext.Panel({
layout: {
type: 'vbox',
align: 'stretch',
},
title:"weeee",
border:false,
items:[{title:"test",html:"weeees<br /><br />"}]
});

The CMS.content namespace is loaded in a card layout in the file main.js:



CMS.Main = Ext.extend(Ext.Container, {
initComponent : function() {

this.headeradmin = {
xtype: 'container',
id:'Main.headeradmin',
height: 40,
border: false,
margins: '0',
padding: '0',
cls: 'CMS-header-logo',
layout: {
type: 'vbox',
align: 'stretch'
},
html:'CMS - Administrator'
};

this.content = {
xtype: 'panel',
layout:'card',
id:'Main.content',
border:false,
cls: 'CMS-card',
activeItem: 0, // index or id
tbar: nav_items,
items: card_items
};


var config = {
border: false,
layout: {
type: 'vbox',
align: 'stretch',
},
padding: 0,
items: [this.headeradmin,this.content]
};

Ext.apply(this, config);
Ext.apply(this.initialConfig, config);

CMS.Main.superclass.initComponent.call(this);
}
});

The variables nav_items and card_items are generated by php code and look like the following:



<script type="text/javascript">
nav_items = [{xtype:"buttongroup",items:{id:"butt-0",pressed:true,toggleGroup:"butt-group",enableToggle:true,allowDepress:false,text:"Administrator",iconCls:"administrator",scale:"medium",handler:function(butt){ var l = Ext.getCmp('Main.content').getLayout(); var card = butt.id.split('butt-'); l.setActiveItem('card-'+card[1]); Ext.getCmp('Main.headeradmin').update('CMS - Administrator'); },scope:CMS.Main}},{xtype:"buttongroup",items:{id:"butt-1",pressed:false,toggleGroup:"butt-group",enableToggle:true,allowDepress:false,text:"Content",iconCls:"content",scale:"medium",handler:function(butt){ var l = Ext.getCmp('Main.content').getLayout(); var card = butt.id.split('butt-'); l.setActiveItem('card-'+card[1]); Ext.getCmp('Main.headeradmin').update('CMS - Content'); },scope:CMS.Main}}];
card_items = [{id:"card-0",layout:"fit",border:false,items:CMS.administrator},{id:"card-1",layout:"fit",border:false,items:CMS.content}];
</script>
And last but not least, my bootstrap.js:



(function() {
CMS = Ext.apply(new Ext.util.Observable(), {
bootstrap: function() {
// set BLANK_IMAGE_URL
Ext.BLANK_IMAGE_URL = '../../../../frame/templates/administrator/js/extjs/resources/images/default/s.gif';

// create custom events
//this.addEvents(CMS.events);

// set up Direct
/*
Ext.Direct.addProvider(CMS.remote.Descriptor);
Ext.Direct.on('exception', function(e) {
Ext.Msg.show({
title:'Ext Direct Exception...',
msg: e.message + '<br><br>' + e.where,
buttons: Ext.Msg.OK,
icon: Ext.MessageBox.ERROR
});
});
*/

// initialize QuickTips
Ext.QuickTips.init();

// initialize everything that wants to initialize itself
//this.fireEvent('init');

this.Main = new CMS.Main();
new Ext.Viewport({
layout: 'fit',
items: this.Main
});
}
});

Ext.ns('CMS.Main', 'CMS.records', 'CMS.stores', 'CMS.actions', 'CMS.nav', 'CMS.plugins');

CMS.events = [
'init',
'component:edit',
'component:create'
];

Ext.onReady(CMS.bootstrap, CMS);

})();
First, thank you all for who have come this far after reading that bunch of code. I have no idea what the problem could be, can somebody be my hero for today?

Greetz, Patrick.

Koelkast
15 Feb 2010, 8:59 AM
Fixed :D Was forgotten to add the flex config :<