对齐不同的复选框组

Question

对于这些复选框组 - Unaligned checkboxes

我想让它们看起来像这些复选框组 - Aligned checkboxes

以下是我目前得到的代码

{
        xtype: 'fieldset',
        title: 'Add to Descriptors',
        items: [
            {
                xtype: 'checkboxgroup',
                items: [
                    {boxLabel: '1.1', name: ''},
                    {boxLabel: '1.2', name: ''},
                    {boxLabel: '1.3', name: ''},
                    {boxLabel: '1.4', name: ''},
                    {boxLabel: '1.5', name: ''},
                    {boxLabel: '1.6', name: ''}
                ]
            },
            {
                xtype: 'checkboxgroup',
                items: [
                    {boxLabel: '2.1', name: ''},
                    {boxLabel: '2.2', name: ''},
                    {boxLabel: '2.3', name: ''},
                    {boxLabel: '2.4', name: ''},
                    {boxLabel: '2.5', name: ''},
                    {boxLabel: '2.6', name: ''}
                ]
            }
        ]
}

需要补充什么？

Answer 1

为了实现它，您需要为所有复选框提供固定宽度并且布局应该是hbox

Ext.application({
  name: 'Fiddle',
  launch: function() {
    Ext.create('Ext.form.Panel', {
      title: 'Checkbox Group',

      bodyPadding: 10,
      renderTo: Ext.getBody(),
      items: [{
        xtype: 'fieldset',
        title: 'Add to Descriptors',
        items: [{
            xtype: 'checkboxgroup',
            layout: 'hbox',
            defaults: { // defaults are applied to items, not the container
              width: 75
            },
            items: [{
                boxLabel: '1.1',
                name: ''
              },
              {
                boxLabel: '1.2',
                name: ''
              },
              {
                boxLabel: '1.3',
                name: ''
              },
              {
                boxLabel: '1.4',
                name: ''
              },
              {
                boxLabel: '1.5',
                name: ''
              },
              {
                boxLabel: '1.6',
                name: ''
              }
            ]
          },
          {
            xtype: 'checkboxgroup',
            layout: 'hbox',
            defaults: { // defaults are applied to items, not the container
              width: 75
            },
            items: [{
                boxLabel: '2.1',
                name: ''
              },
              {
                boxLabel: '2.2',
                name: ''
              },
              {
                boxLabel: '2.3',
                name: ''
              },
              {
                boxLabel: '2.4',
                name: ''
              },
              {
                boxLabel: '2.5',
                name: ''
              },
              {
                boxLabel: '2.6',
                name: ''
              }
            ]
          },

          {
            xtype: 'checkboxgroup',
            layout: 'hbox',
            defaults: { // defaults are applied to items, not the container
              width: 75
            },
            items: [{
                boxLabel: '3.1',
                name: ''
              },
              {
                boxLabel: '3.2',
                name: ''
              },
              {
                boxLabel: '3.3',
                name: ''
              },
              {
                boxLabel: '3.4',
                name: ''
              },
              {
                boxLabel: '3.5',
                name: ''
              },
              {
                boxLabel: '3.6',
                name: ''
              },
              {
                boxLabel: '3.7',
                name: ''
              }
            ]
          },
          {
            xtype: 'checkboxgroup',
            layout: 'hbox',
            defaults: { // defaults are applied to items, not the container
              width: 75
            },
            items: [{
                boxLabel: '4.1',
                name: ''
              },
              {
                boxLabel: '4.2',
                name: ''
              },
              {
                boxLabel: '4.3',
                name: ''
              },
              {
                boxLabel: '4.4',
                name: ''
              },
              {
                boxLabel: '4.5',
                name: ''
              },
              {
                boxLabel: '4.6',
                name: ''
              }
            ]
          },
          {
            xtype: 'checkboxgroup',
            layout: 'hbox',
            defaults: { // defaults are applied to items, not the container
              width: 75
            },
            items: [{
                boxLabel: '5.1',
                name: ''
              },
              {
                boxLabel: '5.2',
                name: ''
              },
              {
                boxLabel: '5.3',
                name: ''
              },
              {
                boxLabel: '5.4',
                name: ''
              },
              {
                boxLabel: '5.5',
                name: ''
              },
              {
                boxLabel: '5.6',
                name: ''
              }
            ]
          },
          {
            xtype: 'checkboxgroup',
            layout: 'hbox',
            defaults: { // defaults are applied to items, not the container
              width: 75
            },
            items: [{
                boxLabel: '6.1',
                name: ''
              },
              {
                boxLabel: '6.2',
                name: ''
              },
              {
                boxLabel: '6.3',
                name: ''
              },
              {
                boxLabel: '6.4',
                name: ''
              },
              {
                boxLabel: '6.5',
                name: ''
              },
            ]
          },
        ]
      }]
    });
  }
});

<link rel="stylesheet" href="https://cdn.sencha.com/ext/gpl/4.1.1/resources/css/ext-all.css">
<script type="text/javascript" src="https://cdn.sencha.com/ext/gpl/4.1.1/ext-all-debug.js"></script>