Results 1 to 8 of 8

Thread: Extending Panel: How can I manipulate the layout regions?

Threaded View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Ext JS Premium Member
    Join Date
    Jun 2007
    Vote Rating

    Default Extending Panel: How can I manipulate the layout regions?

    I'm trying to extend Ext.Panel, so I can specify the layout and (dynamically) the contents of the various layout regions. I have not figured out how or when the regions actually appear in the DOM so I can manipulate them. I'm using a border layout and in my simplified example I'm only using the 'south' and 'center' region and want to manipulate the 'center' region to add an image. Here's the code I have (full demo code in attachment):

    Test.ImagePanel = Ext.extend( Ext.Panel, {
        layout: 'border',
        img: null,
        initComponent : function() {
            // Configure the layout for this panel
            Ext.apply(this, {
                layout: 'border',
                items: [{
                    region: 'center',
                    border: false,
                    titlebar: false,
                    deferredRender: false
                new Ext.Slider({
                    animate: false,
                    width: 200,
                    value: 50,
                    minValue: 0,
                    region: 'south',
                    maxValue: 100
            // Invoke super-class initialization
            this.imagePanel = this.items.itemAt(0);
        afterRender: function(ct) {
            /* XXX This doesn't work because the imagePanel is not present in the DOM! */
            Ext.DomHelper.append(this.imagePanel.body.dom, {
    I guess I could make yet another panel extension for just holding the image and do the manipulation in the onRender or afterRender of that panel, but that seems like such a waste. Is there a better way?

    Attached Files Attached Files
    Last edited by bdurette; 25 Jul 2008 at 10:59 AM. Reason: Update attachment to include image and suggested use of the html attribute on region

Posting Permissions

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