Results 1 to 5 of 5

Thread: Problem in using panel.layout.splitters

  1. #1
    Sencha Premium Member
    Join Date
    Apr 2012
    Posts
    50

    Default Problem in using panel.layout.splitters

    I am trying to use panel.layout.splitters to change the width and height of north and west splitter and also to change their background color on mouse over. But I am getting error like: panel.layout.splitters is undefined. I am using ExtJs 4.1.1. I am giving my code as follows:

    Code:
    Ext.require('*');
    Ext.onReady(function(){
     
     var screenHeight = Ext.getBody().getViewSize().height;
     var screenWidth = Ext.getBody().getViewSize().width;
     
     var panel2= Ext.create('Ext.panel.Panel',{
      layout:'border',
      id: 'layoutPanel',
      defaults: { 
          bodyStyle: 'padding:15px',
          collapseMode : "mini"
      },
      height: screenHeight,
      width: screenWidth,
      
      items: [
       {
        xtype: 'panel',
        collapsible: false,       
        region: 'center' 
       },
       {
        xtype: 'panel',
        title: 'Top Panel',
        region: 'north',
        collapsible: true,
        split: true,    
        flex: 0.10
       },
          {
        xtype: 'panel',
        title: 'DSF Panel',
        region: 'west',
        collapsible: true,
        collapsed: false,
        id: 'westPanel',
        split: true,
        flex: 0.25
       },   
       {
        xtype: 'panel',
        preventHeader: true,
        region: 'east', 
        style : "z-index:40;",
        collapsible: true,
        collapsed: false,
        floatable: false,
        id: 'eastPanel',
        flex: 0.25
       }
      ],
      
      listeners: {
                 afterrender: function(panel){
                    panel.layout.splitters.north.setHeight(15); // south, using height
                 panel.doLayout();
                }
            }  
     });
     
     var p = Ext.create('Ext.container.Viewport', {
      title:'test',
      height: screenHeight,
      width: screenWidth,
         layout: 'card',
         items: [
             panel2
         ],
         renderTo: Ext.getBody()
     });
     p.getLayout().setActiveItem(1);
     
    });

  2. #2
    Sencha User
    Join Date
    Dec 2011
    Posts
    10
    Answers
    1

    Default

    It's undefined because panel does not exist. It's panel2 that you created.

  3. #3
    Sencha Premium Member
    Join Date
    Apr 2012
    Posts
    50

    Default

    Hi bulletsoul ,

    Thanks for your reply. I have tested your suggestion but no luck. its not working. I am using panel.layout.splitters as I have passed the term 'panel' in the handler function and after debugging this on chrome, I found that it is giving the same object as panel2 with id 'layoutPanel' . So, I think problem is something else. I have also tried 'this' in place of panel in the handler function but again with no luck.

  4. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,410
    Answers
    716

    Default

    hint: Were you using this in 4.07 and upgraded to 4.1.1?

    Scott.

  5. #5
    Sencha Premium Member
    Join Date
    Apr 2012
    Posts
    50

    Default

    No. we are using ExtJS 4.1.1 from starting.

Posting Permissions

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