abtrapp
11 Jun 2010, 3:56 AM
Sample code: http://www.extjs.com/deploy/dev/examples/form/check-radio.js
form with a radiogroup like in the sample above:
xtype: 'form',
autoHeight: true,
items: [
{ xtype: 'radiogroup',
fieldLabel: t('person.gender'),
items: [
{boxLabel: 'I1', name: 'cb-col-1', inputValue: 1},
{boxLabel: 'I2', name: 'cb-col-2', inputValue: 2}
Leads to two radio buttons (horizontally distributed) - but with a horizontal and vertical scrollbar for every radio button.
The sorrounding div (x-form-element) is always some pixels larger as the div sorrounding the sorrounding div (or to be more precise, the label in it). No matter how small the label is and how large the window is.
extjs: 3.2.1 - only extjs stylesheets.
If anybody need radiobuttons in one row: The workaround
// Bugfix extjs (the autoWidth and height in the items should not be necessary like the next 4 lines
autoScroll: false,
boxMaxHeight: 23,
boxMinHeight: 23,
height: 23,
items: [
{boxLabel: t('person.gender.mr'), name: 'person_gender_', inputValue: 'm', autoWidth: true, height: 22},
{boxLabel: t('person.gender.mrs'), name: 'person_gender', inputValue: 'f', autoWidth: true, height: 22}
form with a radiogroup like in the sample above:
xtype: 'form',
autoHeight: true,
items: [
{ xtype: 'radiogroup',
fieldLabel: t('person.gender'),
items: [
{boxLabel: 'I1', name: 'cb-col-1', inputValue: 1},
{boxLabel: 'I2', name: 'cb-col-2', inputValue: 2}
Leads to two radio buttons (horizontally distributed) - but with a horizontal and vertical scrollbar for every radio button.
The sorrounding div (x-form-element) is always some pixels larger as the div sorrounding the sorrounding div (or to be more precise, the label in it). No matter how small the label is and how large the window is.
extjs: 3.2.1 - only extjs stylesheets.
If anybody need radiobuttons in one row: The workaround
// Bugfix extjs (the autoWidth and height in the items should not be necessary like the next 4 lines
autoScroll: false,
boxMaxHeight: 23,
boxMinHeight: 23,
height: 23,
items: [
{boxLabel: t('person.gender.mr'), name: 'person_gender_', inputValue: 'm', autoWidth: true, height: 22},
{boxLabel: t('person.gender.mrs'), name: 'person_gender', inputValue: 'f', autoWidth: true, height: 22}