1. #1
    Sencha User
    Join Date
    Nov 2009
    Posts
    33
    Vote Rating
    0
    Supial is on a distinguished road

      0  

    Question Answered: Panel Disappears When Collapsed

    Answered: Panel Disappears When Collapsed


    Greetings,
    I've got a simple Viewport with a collapsible border panel. My problem is that when I collapse the border panel, the entire panel disapears and there is no way for me to expand it again. Below is a simple sample that illustrates the problem. I'm using version 4.0.7.

    Code:
    Ext.require([
        '*'
    ]);
    
    Ext.onReady(function() {
     Ext.create('Ext.container.Viewport',{
      id:'viewport',
      layout:'border',
      items: [{
       region:'north',
       id:'northbanner',
       autoHeight:true,
       html:'<H1>BANNER GOES HERE</H1>'
      },{
       region:'west',
       id:'utilpanel',
       minWidth:200,
       maxWidth:400,
       split:true
      },{
       region:'center',
       id:'page'
      }]
     });
    
     // This is done purposly as this is how my server needs to generate the code.
     Ext.getCmp('page').add({
      xtype:'panel',
      id:'activities',
      layout:'border',
      border:true,
      collapsible:true,
      title:'My Activities test',
      style:{padding:2},
      height: 225,
      items:[
       {
        xtype:'datepicker',
        id:'alertsDate',
        format: 'm/d/Y',
        region: 'east',
        disabledDatesText:'Disabled',
        disabledDaysText:'Disabled',
        minText:'The date in this field must be equal to or after {0}',
        maxText:'The date in this field must be equal to or before {0}',
        toYYYYMMDD: function() {
         var me = this;
         return me.getValue() != null ? (Ext.isDate(me.getValue()) ? Ext.Date.format(new Date(me.getValue()),'Ymd') : me.getValue()) : '';
        }
       },{
        region: 'center',
        id:'regc',   
        html: '<p>Grid</p>'
       }
      ]
     });
    });
    Any idea why this is occuring? Is it a bug or an issue with the code?

    Thanks,
    Marcel

  2. The main problem is that you have no layout declared for the panel which acts as your center region. Your code sample works as expected with this modification:

    Code:
    },{
      region:'center',
      layout: 'fit',
      id:'page'
    }]
    Also autoHeight: true is not supported by ExtJs 4.x.

  3. #2
    Sencha - Community Support Team friend's Avatar
    Join Date
    Apr 2011
    Posts
    895
    Answers
    106
    Vote Rating
    27
    friend has a spectacular aura about friend has a spectacular aura about

      0  

    Default


    The main problem is that you have no layout declared for the panel which acts as your center region. Your code sample works as expected with this modification:

    Code:
    },{
      region:'center',
      layout: 'fit',
      id:'page'
    }]
    Also autoHeight: true is not supported by ExtJs 4.x.

  4. #3
    Sencha User
    Join Date
    Nov 2009
    Posts
    33
    Vote Rating
    0
    Supial is on a distinguished road

      0  

    Default


    This only seems to work when the layout is set to 'fit'. If I use the following layout configuration, the panel still disapears when I collapse.

    Code:
    layout: {type:'table',columns:1,tableAttrs:{style:{width:'100%'}}},
    This does seem like a bug. Also, I had thought that if you don't specify a layout the default 'auto' is used so therefore a layout config option is always set.

    Thanks,
    Marcel

Thread Participants: 1