对齐不同的复选框组

Question

对于这些复选框组 - Unaligned checkboxes

我想将它们对齐，看起来像这些复选框组 - Aligned checkboxes

以下代码是我到目前为止的代码

let aString = "This is my string"
let newString = aString.replacingOccurrences(of: "@", with: "*")

需要添加什么？

Answer 1

为实现这一目标，您需要为所有复选框提供固定宽度，布局应为hbox

＆＃13;

＆＃13;

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: ''
              },
            ]
          },
        ]
      }]
    });
  }
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;