PDA

View Full Version : Getting a checkbox group to have the same width as the fields above it



mark0978
7 Oct 2014, 8:12 AM
Why is the checkboxgroup size different than the field size? They are both flex:1, but the checkboxgroup is much narrower than the input fields (which results in the horizontal scroll bar)

50582



{
fieldLabel: 'Remitter'
, name: 'Text15_1'
, xtype: 'textfield'
, anchor: '95%'
, flex: 1
},
{
fieldLabel: 'Batch #'
, name: 'batch'
, xtype: 'textfield'
, anchor: '95%'
, flex: 1
},
{
xtype: 'lockbox-checkboxgroup'
, height: 100
, flex: 1
, vertical: true
, columns: 1
}




Ext.define('app.fields.LockboxCheckboxGroup', {
extend: 'Ext.form.CheckboxGroup'
, alias: 'widget.lockbox-checkboxgroup'
, fieldLabel: 'Lockboxes'
, labelAlign: 'right'
, border: true
, overflowY: 'auto'
, items: [] // Filled in by the beforeRender event
, listeners: {
beforeRender: function(me, eOpts) {
var checkboxes = [],
lbStore = Ext.getStore('lockboxStore');
lbStore.each(function(record) {
checkboxes.push({
xtype: 'checkbox'
, boxLabel: record.get('number')
, inputValue: record.get('number')
, name: 'lockboxes'
, allowBlank: true
});
});
me.add(checkboxes);
}
}
});

watertrac_dev
7 Oct 2014, 8:24 AM
I think if you just specify the anchor property in your config for the checkboxgroup you should be fine. I've moved the assignment of the anchor value into the defaults property, as I want all fields to be the same width in my form.


bei

mark0978
8 Oct 2014, 7:34 AM
Thanks. Do you know how to put a border around the checkbox portion? When I add


border: 1,
style: {
borderStyle: 'solid'
},


To the checkboxgroup, it puts the border around the entire control (including the label). Rather than just the checkboxes.

watertrac_dev
8 Oct 2014, 7:43 AM
I've updated the fiddle. You need to add a cls property to your checkboxgroup configuration and then set up the style for the class.



.checkboxgroup-border .x-form-checkboxgroup-body {
padding-right: 0;
background: white repeat-x 0 0;
border-width: 1px;
border-style: solid;
border-color: #b5b8c8;
background-image: url(https://extjs.cachefly.net/ext/gpl/4.2.1/packages/ext-theme-gray/build/resources/images/form/text-bg.gif);
}

mark0978
8 Oct 2014, 8:33 AM
That got it. Thanks.

Csegota
27 Mar 2015, 9:41 AM
I know this is a long shot, seeing as this post is very old.

How did you put that code viewer in your comment? That is very handy...

Thanks.