Results 1 to 5 of 5

Thread: Confused about using initComponent or constructor

  1. #1

    Default Confused about using initComponent or constructor

    Hi,

    i hope you guys can explain me this strange mystery. My code works, but i want to understand one issue. I have a border layout (4 panels) with Ext.Viewport. I extended each Ext.panel class to have some deafult configuration. For example my SidePanel:
    Code:
    SidePanel = function(){
      SidePanel.superclass.constructor.call(this, {
        layout: 'fit',
        region: 'east', 
        width: 200,
        minSize: 200,
        maxSize: 200, 
        split: true,
        collapsible: true,
        animCollapse: false,
        collapseMode: 'mini',
        hideBorders: true,
        margins: '0 5 0 0'
      })
    };
    Ext.extend(SidePanel, Ext.Panel);
    This way works perfectly for all 4 panels. While watching this forum and looking for examples i often read about the 'new' way (2.0?) to extend classes and how to use initComponent instead of the constructor (like http://extjs.com/learn/Tutorial:Extending_Ext2_Class). I also saw many examples where people extend Ext.panel the way it is recommended, like here: http://extjs.com/forum/showthread.php?t=32215

    However, i tried to build my classes that way and changed for example my SidePanel above to something like this:
    Code:
    SidePanel = Ext.extend(Ext.Panel, {
      layout: 'fit',
      region: 'east', 
      width: 200,
      minSize: 200,
      maxSize: 200,
      split: true,
      collapsible: true,
      animCollapse: false,
      collapseMode: 'mini',
      hideBorders: true,
      margins: '0 5 0 0',
      initComponent: function(){
        SidePanel.superclass.initComponent.apply(this, arguments);
      }  
    });
    It does work, except for some settings: collapsible, animCollapse, collapseMode and margin are NOT recognized. I'd like to understand this issue. It's hard to find answers here, because some still use constructors (which worked for me) and some use initComponent, which obviously should also work.

    Thanks for any enlightenment
    Michael

  2. #2
    Ext User para's Avatar
    Join Date
    Apr 2007
    Location
    Redmond, WA
    Posts
    918

    Default

    Making a subclass for every panel? That seems a bit overzealous. It may be necessary, but I'd suggest just instantiating the Ext.Panel with different configs for the different panels.

    If you need to subclass them later you can, but for most cases it's not needed.

  3. #3

    Default

    Well, you're right. For two panels (head, foot) it is not necessary. But the other two need some functions (adding buttons, changing content, sync side and main panel) so i think extending is the way to go ...

    I can leave everything as it is, it works (using constructors). But i'd like to know why it does not work unsing initComponent.

    Thank you anyway!
    Michael

  4. #4
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    If these Panels which need these extra functions are just one-off (Only going to be one of each special type), then just poke the extra functions into them in the config object:

    Code:
    myspecialPanel = new Ext.Panel({
        ....
        myExtraFunction: function() {
        },
        ...
    });

  5. #5

    Default

    Yes, that make sense. I'll try that!
    Thank you very much!

    Michael

Posting Permissions

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