Results 1 to 3 of 3

Thread: Complex layout question

  1. #1
    Sencha User harley.333's Avatar
    Join Date
    Mar 2007
    Posts
    286
    Answers
    1
    Vote Rating
    5
      0  

    Default Complex layout question

    Can someone help me with the config markup to create the following layout:

    Code:
    --Window--------
    | ------------ |
    | |   Form   | |
    | ------------ |
    | |    ||    | |
    | |    ||    | |
    | |Tree||Grid| |
    | |    ||    | |
    | |    ||    | |
    | ------------ |
    ----------------
    When resizing the window, I'd like the Form to expand horizontally, but not vertically.
    When resizing the window, I'd like the Tree and Grid to expand in both directions.
    I'd like the Tree and Grid to have their own, separate scroll bars.

    Here's what I've got so far:

    Code:
    Ext.define("xyz", {
        extend: "Ext.window.Window",
        alias: "widget.xyz",
    
    
        height: 300,
        layout: "fit",
        maximizable: true,
        resizable: true,
        width: 450,
        title: "testing",
        items: [
            {
                xtype: "form",
                autoScroll: true,
                border: false,
                layout: {
                    type: "vbox",
                    align: "stretch"
                },
                items: [
                    { xtype: "textfield", fieldLabel: "Field #1" },
    
    
                    {
                        border: false,
                        flex: 1,
                        layout: "hbox",
                        items: [
                            {
                                xtype: "treepanel",
                                border: false,
                                flex: 1
                            },
                            //{ xtype: "splitter" },  // screws the whole thing up
                            {
                                xtype: "gridpanel",
                                border: false,
                                flex: 1
                            }
                        ]
                    }
                ]
            }
        ]
    });
    The splitter would be nice, but adding it makes Ext barf.
    harley.333 - Harley Jones
    harley.333@gmail.com - Find me on Google Talk.

  2. #2
    Sencha User sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,335
    Answers
    124
    Vote Rating
    93
      0  

    Default

    Hi,

    you can use following code:

    Code:
    var win=new Extend.Window({
      title:'My Win'
     , height:400
    , width:500
    , layout:'border'
    , items:[
      {
        xtype:'form'
      , region:'north'
      , height:120
    },
    {
        xtype:'tree'
        , region:'west'
       , width:250
    },
    {
       xtype:'grid'
      , region:'center'
      
    }
    ]
    })
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  3. #3
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409
    Answers
    716
    Vote Rating
    504
      0  

    Default

    Can you be more specific than barf?

    http://jsfiddle.net/Lccpb/

    Scott.

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
  •