Results 1 to 2 of 2

Thread: Fitting grid and form in a panel

  1. #1

    Default Fitting grid and form in a panel

    Hi everyone,

    There is no reason to hide it, I'm a newbie at ExtJs - still difficult to admit. I'm trying to implement most probably something extremely simple but for some reason I'm not able to find the solution, so any help would be appreciated.

    I have a window where I want to put one form textfield (on top) and a grid (under the label and textfield). And I want grid to resize from left to right and from textfield (or some pixels lower) to the bottom of the window. When window is resized, I want grid to stick to borders of the window. I tried a few approaches none of them worked and this is where I have up.

    Code:
     
    new Ext.Window({ 
        title: "Title", width: 440, height: 300, layout: "fit", 
        items: [ { 
            xtype: "panel", layout: "table", layoutConfig: { columns: 1 }, 
            items: [ { 
                xtype: "form", border: false, style: "padding:3px", 
                items: [ { 
                    xtype: "textfield", fieldLabel: "Name:" } ]
            }, { 
                xtype: "grid", layout: "fit", store: myStore, border: false, frame: true,
                columns: [ 
                    { header: "AAA", dataIndex: "aaa" }, 
                    { header: "BBB", dataIndex: "bbb" }, 
                    { header: "CCC Key", dataIndex: "ccc" }, 
                    { header: "DDD", dataIndex: "ddd" }, 
                    { header: "EEE", dataIndex: "eee" } 
                ] 
            } ] 
        } ] 
    }).show();
    What I get is in attached image. I put 9 records in a store but grid stays the same (only 1 visible). Any suggestions?

    Code for filling the store:

    Code:
     
    var store = new Ext.data.ArrayStore({ fields: [ { name: "aaa" }, { name: "bbb" }, { name: "ccc", type: "boolean" }, { name: "ddd", type: "boolean" }, { name: "eee", type: "boolean" } ] });
     
     var records = [ ["a","b",true,true,true], ["a","b",false,false,false], ["a","b",false,false,false], ["c","c",true,true,true], ["d","d",false,false,false], ["e","e",false,false,false], ["f","f",true,true,true], ["g","f",false,false,false], ["h","h",false,false,false] ];
    Attached Images Attached Images

  2. #2
    Sencha User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364

    Default

    Welcome to the forums.

    Sounds like the easieset thing to do is setup a border layout to do this. Your grid panel is not sizing properly, which is why you see one record and no scrollbars.


    That said, your javascript is absolutely horribly formatted! If you're going to learn by example, the first thing you need to learn is how to properly format code so it's readable!

    Code:
    new Ext.Window({
        title: "Title",
        width: 440,
        height: 300,
        layout: "fit",
        items: [{
            xtype: "panel",
            layout: "table",
            layoutConfig: {
                columns: 1
            },
            items: [{
                xtype: "form",
                border: false,
                style: "padding:3px",
                items: [{
                    xtype: "textfield",
                    fieldLabel: "Name:"
                }]
            },
            {
                xtype: "grid",
                layout: "fit",
                store: myStore,
                border: false,
                frame: true,
                columns: [{
                    header: "AAA",
                    dataIndex: "aaa"
                },
                {
                    header: "BBB",
                    dataIndex: "bbb"
                },
                {
                    header: "CCC Key",
                    dataIndex: "ccc"
                },
                {
                    header: "DDD",
                    dataIndex: "ddd"
                },
                {
                    header: "EEE",
                    dataIndex: "eee"
                }]
            }]
        }]
    }).show();

Posting Permissions

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