Results 1 to 4 of 4

Thread: How to use Ext.resizer.Splitter?

  1. #1
    Sencha User
    Join Date
    Nov 2011
    Posts
    22
    Answers
    1
    Vote Rating
    0
      0  

    Default Answered: How to use Ext.resizer.Splitter?

    Trying to get the splitter to work. I can't find an example app that uses it.

    Here's what I have:
    Code:
    var schedPanel = Ext.create("Ext.panel.Panel", {
                items: [scheduler],
                maintainFlex: true
            });
            var logPanel = Ext.create("Ext.panel.Panel", {
                items: [eventLogPanel],
                width: '100%'
            });
    
    
            var splitterContainer = Ext.create('Ext.panel.Panel', {
                layout: {
                    type: 'vbox',
                    align: 'stretch'
                },
                
                items: [schedPanel,
                        {
                            xtype: 'splitter', 
                            collapsible: true,
                            collapseTarget: 'next'
                        },
                        logPanel],
                title: 'Schedule'
            });

    It lets me drag the splitter but doesn't resize anything, and the splitter handle snaps back to its original location when I let go.

    When I collapse, the bottom panel goes blank. The splitter does not move from its original location. When I uncollapse, the bottom panel shoots to the top of the page, obscuring the splitter handle, and no more splitting can be done.

  2. Here's a working example:

    Code:
     Ext.create('Ext.window.Window', {
        height: 300,
        width: 800,
        layout: {
          type: 'hbox',
          align: 'stretch'
        },
        items: [{
          xtype: 'panel',
          title: 'Panel Left',
          width: 400
        },{
          xtype: 'splitter'
        },{
          xtype: 'panel',
          flex: 1,
          maintainFlex: true,
          title: 'Panel Right'
        }]
      }).show();

  3. #2
    Sencha User friend's Avatar
    Join Date
    Apr 2011
    Posts
    895
    Answers
    106
    Vote Rating
    27
      1  

    Default

    Here's a working example:

    Code:
     Ext.create('Ext.window.Window', {
        height: 300,
        width: 800,
        layout: {
          type: 'hbox',
          align: 'stretch'
        },
        items: [{
          xtype: 'panel',
          title: 'Panel Left',
          width: 400
        },{
          xtype: 'splitter'
        },{
          xtype: 'panel',
          flex: 1,
          maintainFlex: true,
          title: 'Panel Right'
        }]
      }).show();
    Last edited by friend; 17 Jan 2012 at 7:52 AM. Reason: clarity

  4. #3
    Sencha User
    Join Date
    Nov 2011
    Posts
    22
    Answers
    1
    Vote Rating
    0
      0  

    Default

    Sweet, thanks!

  5. #4
    Sencha User
    Join Date
    Mar 2011
    Location
    Germany
    Posts
    118
    Answers
    6
    Vote Rating
    0
      0  

    Default

    If I add 'collapsible' the splitter gets a little arrow, but clicking on it doesn't collapse anything.
    Did I miss some config parameter?

Posting Permissions

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