PDA

View Full Version : Fitting grid and form in a panel



erazem
20 Aug 2009, 11:24 PM
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.



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:



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] ];

21 Aug 2009, 2:31 AM
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!



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();