MMirabito
6 Aug 2010, 7:59 AM
Dear forum,
I am having difficulty in understating how I can accomplish the following with EXT designer.
In summary I have a form panel and I need to have check group boxes. Here is a sample of the code that I was able to do with regular ExtJS but it’s not obvious to me how I should configure the designer to accomplish the same.
myForm= new Ext.FormPanel({
bodyStyle:'padding: 4px',
autoWidth:true,
width: '125',
border: false,
items:[{
autoHeight: true,
bodyStyle: 'padding:4px',
border: true,
items: [{
id: "myGroup",
xtype: 'checkboxgroup',
hideLabel: true,
hideLabels: true,
border: true,
columns: 1,
items: [
{xtype: 'label', html: '<b>LABEL1:</b>', cls:'x-form-check-group-label', anchor:'-15'},
{boxLabel: 'Item 11', name: 'Item 11', id: 'Item11', value: 'Item 11', listeners: {check: onCheck}},
{boxLabel: 'Item 12', name: 'Item 12', id: 'Item12', value: 'Item 12', listeners: {check: onCheck}},
{boxLabel: 'Item 13', name: 'Item 13', id: 'Item13', value: 'Item 13', listeners: {check: onCheck}},
{xtype: 'label', html: '<b>LABEL2:</b>', cls:'x-form-check-group-label', anchor:'-15'},
{boxLabel: 'Item 21', name: 'Item 21', id: 'Item21', value: 'Item 21', listeners: {check: onCheck}},
{boxLabel: 'Item 22', name: 'Item 22', id: 'Item22', value: 'Item 22', listeners: {check: onCheck}},
{xtype: 'label', html: '<b>LABEL3:</b>', cls:'x-form-check-group-label', anchor:'-15'},
{boxLabel: 'Item 31', name: 'Item 31', id: 'Item31', value: 'Item 31', listeners: {check: onCheck}},
{boxLabel: 'Item 32', name: 'Item 32', id: 'Item32', value: 'Item 32', listeners: {check: onCheck}},
{boxLabel: 'Item 33', name: 'Item 33', id: 'Item33', value: 'Item 33', listeners: {check: onCheck}},
],
}]
}]
});
In the event the designer does not currently support it is there an alternative?
Thanks in advance for any suggestions
MAx
I am having difficulty in understating how I can accomplish the following with EXT designer.
In summary I have a form panel and I need to have check group boxes. Here is a sample of the code that I was able to do with regular ExtJS but it’s not obvious to me how I should configure the designer to accomplish the same.
myForm= new Ext.FormPanel({
bodyStyle:'padding: 4px',
autoWidth:true,
width: '125',
border: false,
items:[{
autoHeight: true,
bodyStyle: 'padding:4px',
border: true,
items: [{
id: "myGroup",
xtype: 'checkboxgroup',
hideLabel: true,
hideLabels: true,
border: true,
columns: 1,
items: [
{xtype: 'label', html: '<b>LABEL1:</b>', cls:'x-form-check-group-label', anchor:'-15'},
{boxLabel: 'Item 11', name: 'Item 11', id: 'Item11', value: 'Item 11', listeners: {check: onCheck}},
{boxLabel: 'Item 12', name: 'Item 12', id: 'Item12', value: 'Item 12', listeners: {check: onCheck}},
{boxLabel: 'Item 13', name: 'Item 13', id: 'Item13', value: 'Item 13', listeners: {check: onCheck}},
{xtype: 'label', html: '<b>LABEL2:</b>', cls:'x-form-check-group-label', anchor:'-15'},
{boxLabel: 'Item 21', name: 'Item 21', id: 'Item21', value: 'Item 21', listeners: {check: onCheck}},
{boxLabel: 'Item 22', name: 'Item 22', id: 'Item22', value: 'Item 22', listeners: {check: onCheck}},
{xtype: 'label', html: '<b>LABEL3:</b>', cls:'x-form-check-group-label', anchor:'-15'},
{boxLabel: 'Item 31', name: 'Item 31', id: 'Item31', value: 'Item 31', listeners: {check: onCheck}},
{boxLabel: 'Item 32', name: 'Item 32', id: 'Item32', value: 'Item 32', listeners: {check: onCheck}},
{boxLabel: 'Item 33', name: 'Item 33', id: 'Item33', value: 'Item 33', listeners: {check: onCheck}},
],
}]
}]
});
In the event the designer does not currently support it is there an alternative?
Thanks in advance for any suggestions
MAx