View Full Version : Making Subclass Display in a Border Layout

5 Oct 2010, 1:18 PM
Why does my subclass, NorthCenterCardPanel, not display in the card contained in the center region (code below)?

This code works fine when I put [gridLexAnal, gridLexAnalMorph] into the config.items for cardLexAnalCt instead of [cardLexAnal, cardLexAnalMorph].
But I added this subclass, NorthCenterCardPanel (simply to standardize a way to add that div in its items[0]), and its constructed instance does not display. Do I have to call the superclass of initComponent() or something? There are easier ways to do this, but I'm trying to get better at these basic techniques. This code occurs in the equivalent of an onReady(). Where am I messed up on this?

Edit: Both GridPanels, gridLexAnal and gridLexAnalMorph, are initiated with config.region=='center'. All the variables in the items arrays are instantiated and the page renders properly if I skip my subclass.

NorthCenterCardPanel = Ext.extend(Ext.Panel, {
constructor: function(config) {
var defaults = {
items: [{
id: 'pnlWhiteSpaceBlock',
border: false,
height: 20,
html: '<div class="diaWhiteSpaceBlock">&nbsp;</div>',
layout: 'fit',
region: 'north',
xtype: 'panel'

var newConfig = Ext.applyIf(config, defaults);
NorthCenterCardPanel.superclass.constructor.call(this, newConfig);

var cardLexAnal = new NorthCenterCardPanel({
id: 'cardPanelLexAnalID',
centerGrid: gridLexAnal

var cardLexAnalMorph = new NorthCenterCardPanel({
id: 'cardPanelLexAnalMorphID',
centerGrid: gridLexAnalMorph

var cardLexAnalCt = new Ext.Panel({
id: 'panelLexAnalCardContID',
border: false,
height: westCenterHt,
layout: 'card',
region: 'center',
items: [cardLexAnal, cardLexAnalMorph]

var panelLexAnalContainer = new Ext.Panel({
id: 'panelLexAnalContainerID',
border: false,
height: containerHt,
layout: 'border',
renderTo: 'diaLexAnalContentID',
tbar: tbarLexAnal,
items: [boxLexAnalSrcHdr, panelLexAnalArabText, cardLexAnalCt]

6 Oct 2010, 1:47 AM
1. You are creating multiple instances of a component with the same id ('pnlWhiteSpaceBlock'). Ids need to be unique!
2. CardLayout sometimes needs layoutOnCardChange:true.
3. BorderLayout only works if the container has a fixed width/height (your panelLexAnalContainer panel doesn't).

6 Oct 2010, 10:55 AM
Thanks for trying Condor. I just spent an entire day trying to get this simple div to display in a card panel above my grid:

<!-- A simple block of white space -->
<div class="diaWhiteSpaceBlock">&nbsp;</div>

I've abandoned this approach, and will try something else.