Results 1 to 7 of 7

Thread: border layout

  1. #1
    Sencha User
    Join Date
    Jun 2013
    Posts
    27
    Answers
    2

    Default Answered: border layout

    hello my task is following layout
    picture.jpg
    i know that it needs border layout, i tray almost every combination but my goal is not reached,main problem is thirdPanel
    please help me.. give me some advise

  2. You can also use the regionWeights config of Border to dictate which region will take up what space:

    Code:
    Ext.create('Ext.panel.Panel', {
        width: 500,
        height: 300,
        title: 'Border Layout',
        layout: {
            type: 'border',
            regionWeights: {
                west: 20,
                north: 10,
                south: -10,
                east: -20
            }
        },
        items: [{
            title: 'South Region is resizable',
            region: 'south',     // position for region
            xtype: 'panel',
            height: 100,
            split: true,         // enable resizing
        },{
            // xtype: 'panel' implied by default
            title: 'West Region is collapsible',
            region:'west',
            xtype: 'panel',
            width: 200,
            collapsible: true,   // make collapsible
            id: 'west-region-container',
            layout: 'fit',
            split: true
        },{
            title: 'Center Region',
            region: 'center',     // center region is required, no width/height specified
            xtype: 'panel',
            layout: 'fit'
        }],
        renderTo: Ext.getBody()
    });

  3. #2
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,199
    Answers
    87

    Default

    make a an east and a center region. Then split the center into center and south. So that makes four panels. One east One center. In the Center, one center and one south.

  4. #3
    Sencha User
    Join Date
    Jun 2013
    Posts
    27
    Answers
    2

    Default

    thank you very much i did , i don't know split's job

  5. #4
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,199
    Answers
    87

    Default

    Define the split property on the panels you want to split

    Code:
    split: true

  6. #5
    Sencha User
    Join Date
    Jun 2013
    Posts
    27
    Answers
    2

    Default

    thnks i did't know , but i know now

  7. #6
    Sencha User slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,165
    Answers
    505

    Default

    You can also use the regionWeights config of Border to dictate which region will take up what space:

    Code:
    Ext.create('Ext.panel.Panel', {
        width: 500,
        height: 300,
        title: 'Border Layout',
        layout: {
            type: 'border',
            regionWeights: {
                west: 20,
                north: 10,
                south: -10,
                east: -20
            }
        },
        items: [{
            title: 'South Region is resizable',
            region: 'south',     // position for region
            xtype: 'panel',
            height: 100,
            split: true,         // enable resizing
        },{
            // xtype: 'panel' implied by default
            title: 'West Region is collapsible',
            region:'west',
            xtype: 'panel',
            width: 200,
            collapsible: true,   // make collapsible
            id: 'west-region-container',
            layout: 'fit',
            split: true
        },{
            title: 'Center Region',
            region: 'center',     // center region is required, no width/height specified
            xtype: 'panel',
            layout: 'fit'
        }],
        renderTo: Ext.getBody()
    });

  8. #7
    Sencha User
    Join Date
    Jun 2013
    Posts
    27
    Answers
    2

    Default

    can you tall me how mark my question as ,,answered''

Tags for this Thread

Posting Permissions

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