PDA

View Full Version : 2 rows instead of one



riets003
26 Sep 2007, 4:14 AM
Hi,

I have been working with the Forms.. I have a fieldset containing 11 checkboxes.. I want those to apear in a horizontal 4, 4, 3 formation instead of one long vertical row of 11 to save some vertical space.. How do I do this?

tia

Roger

fay
26 Sep 2007, 4:23 AM
Take a look at http://extjs.com/deploy/ext/docs/output/Ext.form.Column.html and http://extjs.com/deploy/ext/examples/form/dynamic.html

riets003
26 Sep 2007, 5:49 AM
I have been there.. and those were the basis when I started fiddling around with the form.. but it doesn't solve my problem nor can I find any clues as a how to achieve what I am trying... but thx anyway

fay
26 Sep 2007, 7:04 AM
What doesn't work using columns? Post the code that you have already.

riets003
27 Sep 2007, 1:04 AM
http://img167.imageshack.us/img167/7919/exampleqg7.jpg

See there.. what I have, the left one and what I want.. the right one.

My code for this particular part



form.fieldset(
{legend:'Westeinde', hideLabels:true},
new Ext.form.Checkbox({
boxLabel:'WG01',
name:'WG01',
width:'auto'
}),
new Ext.form.Checkbox({
boxLabel:'WG02',
name:'WG02',
width:'auto'
}),
new Ext.form.Checkbox({
boxLabel:'WG03',
name:'WG03',
width:'auto'
}),
new Ext.form.Checkbox({
boxLabel:'WG04',
name:'WG04',
checked:false,
width:'auto'
}),
new Ext.form.Checkbox({
boxLabel:'WG05',
name:'WG05',
checked:false,
width:'auto'
}),
new Ext.form.Checkbox({
boxLabel:'WG06',
name:'WG06',
checked:false,
width:'auto'
}),
new Ext.form.Checkbox({
boxLabel:'WG07',
name:'WG07',
checked:false,
width:'auto'
}),
new Ext.form.Checkbox({
boxLabel:'WG08',
name:'WG08',
checked:false,
width:'auto'
}),
new Ext.form.Checkbox({
boxLabel:'WC01',
name:'WC01',
checked:false,
width:'auto'
}),
new Ext.form.Checkbox({
boxLabel:'WR01',
name:'WR01',
checked:false,
width:'auto'
}),
new Ext.form.Checkbox({
boxLabel:'AVWZ',
name:'AVWZ',
width:'auto'
})
);

fay
27 Sep 2007, 1:39 AM
Have you looked at Column (http://extjs.com/deploy/ext/docs/output/Ext.form.Column.html)??

This should get you started:


<script>
Ext.onReady(function(){

var form = new Ext.form.Form({});

form.fieldset({legend:'Westeinde', hideLabels:true});

form.column({width: 100, labelSeparator: '', labelWidth: 0},
new Ext.form.Checkbox({boxLabel:'WG01', name:'WG01'}),
new Ext.form.Checkbox({boxLabel:'WG02', name:'WG02'})
);

form.column({width: 100, labelSeparator: '', labelWidth: 0},
new Ext.form.Checkbox({boxLabel:'WG03', name:'WG03'}),
new Ext.form.Checkbox({boxLabel:'WG04', name:'WG04'})
);

form.end(); // fieldset

form.render('form');
});
</script>

</head>
<body>
<div id="form" style="width:300px;"></div>
</body>
</html>

riets003
28 Sep 2007, 11:39 AM
with the help of the last example it got things to work. Not everything looks the same in FF as in IE but that will be resolved with some css or style additions.

thx