錯誤boxLabel包裝

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