Некорректное boxLabel обертывание в checkboxgroup (ExtJs4.2)

Question

У меня возникли проблемы с коробкой меток флажков заворачивают под флажком:

http://jsfiddle.net/6pYWh/

 { 
      xtype: 'checkboxgroup', 
      columns: 1, 
      vertical: true, 
      items: [{ 
       boxLabel: 'Item 1', 
       name: 'rb', 
       inputValue: '1' 
      }, { 
       boxLabel: 'Item 2 with large box label does not wrap properly', 
       name: 'rb', 
       inputValue: '2', 
       checked: true 
      }] 
     } 

мне нужно обернуть в быть встроенный блок с обоими блоками в одной и той же линии, так что я должен заставить ширину второго блока до определенного размера для того, чтобы достичь этого:

http://jsfiddle.net/595Md/

Проблема заключается в том, что я не вижу способ выполнить эту динамику, поэтому, если вы измените размер западной панели, ширина метки ярлыка должна будет быть пересчитана и обновлена, чтобы использовать все пространство, доступное сейчас и все еще поддерживающее оберните на том же уровне флажка.

Какие-либо из них?

Answer 1

Измените следующий селектор css.

.hello-world { 
    white-space: normal; 
    text-align: justify; 
    margin: -10px 0 0 10px; 
} 

Тогда попробуйте это.

Ext.require(['*']); 

Ext.onReady(function() { 

var viewport = Ext.create('Ext.Viewport', { 
    layout: { 
     type: 'border', 
     padding: 5 
    }, 
    defaults: { 
     split: true 
    }, 
    items: [{ 
     region: 'west', 
     collapsible: true, 
     header: false, 
     split: true, 
     width: 200, 
     items: [{ 
      xtype: 'checkboxgroup', 
      columns: 1, 
      vertical: true, 
      id: 'cb-group', 
      items: [{ 
       boxLabel: 'Item 1', 
       name: 'rb', 
       inputValue: '1' 
      }, { 
       boxLabel: 'Item 2 with large box label does not wrap properly', 
       name: 'rb', 
       inputValue: '2', 
       checked: true 
      }, { 
       boxLabel: 'Item 3', 
       name: 'rb', 
       inputValue: '3' 
      }, { 
       boxLabel: 'Item 4', 
       name: 'rb', 
       inputValue: '4' 
      }, { 
       boxLabel: 'Item 5', 
       name: 'rb', 
       inputValue: '5' 
      }, { 
       boxLabel: 'Item 6', 
       name: 'rb', 
       inputValue: '6' 
      }], 
      listeners: { 
       beforerender: function() { 
        for (var i = 1; i < Ext.getCmp('cb-group').items.length; i++) { 
         if (Ext.getCmp('cb-group').items.items[i].boxLabel.length > 24) { 
          Ext.getCmp('cb-group').items.items[i].boxLabelCls = "hello-world"; 
         } 
        } 
       } 
      } 
     }] 
    }, { 
     region: 'center', 
     html: 'center', 
     title: 'Center' 
    }, { 
     region: 'south', 
     title: 'South', 
     height: 100, 
     split: true, 
     collapsible: true, 
     html: 'south' 
    }] 
}); 
});