Results 1 to 3 of 3

Thread: Making Subclass Display in a Border Layout

  1. #1
    Ext JS Premium Member
    Join Date
    Aug 2010
    Posts
    70

    Default Making Subclass Display in a Border Layout

    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.

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

  2. #2
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    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).

  3. #3
    Ext JS Premium Member
    Join Date
    Aug 2010
    Posts
    70

    Default

    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:

    HTML Code:
    <!-- A simple block of white space -->
    <div class="diaWhiteSpaceBlock">&nbsp;</div>
    I've abandoned this approach, and will try something else.

Similar Threads

  1. Border Layout Region collapsed display text vertical
    By boonkerz in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 28 Apr 2010, 8:49 AM
  2. Display problems: A TabPanel that contain a Panel with layout=border
    By oburlaca in forum Ext 2.x: Help & Discussion
    Replies: 9
    Last Post: 4 Mar 2009, 7:28 AM
  3. [Ext2.02/IE6] Border layout display problems
    By architect in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 8 Apr 2008, 11:43 PM
  4. ie 7 display problem in border layout, west panel
    By snehendu in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 10 Mar 2008, 4:53 AM
  5. Border layout doesn't display
    By csky in forum Ext 2.x: Help & Discussion
    Replies: 6
    Last Post: 22 Nov 2007, 7:09 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •