You found a bug! We've classified it as EXTJSIII-240 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha User
    Join Date
    Nov 2014
    Posts
    9
    Vote Rating
    0
    dkingofpa is on a distinguished road

      0  

    Default CheckboxGroup cutting off long boxLabels

    When I display a CheckboxGroup in a menu, my long boxLabels get cutoff. I don't know what labels will be passed ahead of time so I can't just specify a static width. How can I keep my boxLabels from being cutoff?


    See the example code below. It's also available as a jsfiddle.

    Code:
    <html>
    <head>
      <title>Ext JS Checkbox Group Example</title>
      <link rel="stylesheet" type="text/css" href="http://dev.sencha.com/deploy/ext-3.4.0/resources/css/ext-all.css">
      <script type='text/javascript' src="http://dev.sencha.com/deploy/ext-3.4.0/adapter/ext/ext-base.js"></script>
      <script type='text/javascript' src="http://dev.sencha.com/deploy/ext-3.4.0/ext-all-debug.js"></script>
    
    
      <script type='text/javascript'>//<![CDATA[ 
      window.onload=function(){
          Ext.onReady(function(){
              var checkboxGroup = new Ext.form.CheckboxGroup({
                  columns: 2,
                  items: [
                      {boxLabel: 'Transaction Date', name: 'cb-horiz-1'},
                      {boxLabel: 'Item foo', name: 'cb-horiz-2', checked: true},
                      {boxLabel: 'Transaction Amount', name: 'cb-horiz-3'},
                      {boxLabel: 'Item bar', name: 'cb-horiz-4'},
                      {boxLabel: 'Retailer Site Start Date', name: 'cb-horiz-5'}
                  ]
              });
          
              var button = new Ext.Button({
                  text: 'Display...',
                  menu: new Ext.menu.Menu({
                      plain: true,
                      items: [
                          checkboxGroup
                      ]
                  })
              });
              
              var panel = new Ext.Panel({
                  title: 'Checkbox Group Example',
                  frame: true,
                  renderTo:'viewport',
                  items: [
                      button
                  ]
              });
          });
      }//]]>  
      </script>
    </head>
    <body>
      <div id='viewport'></div>
    </body>
    </html>

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,138
    Vote Rating
    238
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default

    Thanks for the report! I have opened a bug in our bug tracker.

Thread Participants: 1

Tags for this Thread