Page 1 of 2 12 LastLast
Results 1 to 10 of 19

Thread: Checkbox labels in Checkboxgroup wrapping

  1. #1
    Ext JS Premium Member glimjack's Avatar
    Join Date
    Oct 2007
    Location
    Durham, NC
    Posts
    13

    Default Checkbox labels in Checkboxgroup wrapping

    I'm having issues with checkbox groups inside panels in a column layout.

    This is only is IE6 or IE7

    not matter what kind of width or autoWidth I apply to the panel, checkboxgroup, or the checkbox itself, it always wraps at about 100px. Driving me crazy.

    any ideas would be great, I think I'm missing some width setting further up, but I can't find it.



    Below is an example of a panel


    [CODE]
    wibbpanel = new Ext.Panel({
    columnWidth: 0.3,
    height:200,
    style: "padding:5px;",
    title: "Produtos de Banda Larga Sem Fio",
    bodyStyle: "padding:10px 10px 0 10px",
    items: [{
    id: 'wibb',
    xtype: 'checkboxgroup',
    hideLabel:true,
    itemCls: 'x-check-group-alt',
    columns: 1,
    items: [
    {boxLabel: 'Solu
    Attached Images Attached Images
    Aut viam inveniam aut faciam

  2. #2

  3. #3
    Ext JS Premium Member glimjack's Avatar
    Join Date
    Oct 2007
    Location
    Durham, NC
    Posts
    13

    Default

    labelWidth is for FormPanels correct? I tried adding it to both the checkbox group and the checkboxes themselves, no dice...

    I also changed the panel to a FormPanel. still no change.

    do i need a fieldset?
    Aut viam inveniam aut faciam

  4. #4
    Sencha User mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236

    Default

    no fieldset required.
    labelWidth is for the FormLayout.

    setting the labelWidth at your Panel level should work.
    you'll also need the Panel to be managed by a FormLayout.
    Code:
    wibbpanel  = new Ext.Panel({
      layout: 'form', // you're missing this -- the Panel needs a FormLayout in order for labels to display
      labelWidth: 140,
    
    //...

  5. #5
    Ext JS Premium Member glimjack's Avatar
    Join Date
    Oct 2007
    Location
    Durham, NC
    Posts
    13

    Default

    Still no luck, i cut out all the other stuff and simplified it to one page and panel.

    if i let the panel go autoWidth the full length of the screen, then it doesn't wrap.

    It appears that the checkboxes themselves are longer than they seem
    At 400px on the panel, they finally unwrap.

    take a look in IE...
    http://motorola.motowi4solutions.com...tam/index2.php


    [CODE]
    Ext.BLANK_IMAGE_URL = '/inc/ext22/resources/images/default/s.gif';

    Ext.onReady(function(){

    /* GLOBAL EXTRAS */
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
    // Ext.QuickTips.init();

    var filter = function(){

    // nothing in this test
    }; // end filter function


    wibbpanel = new Ext.Panel({
    renderTo: 'container',
    layout: 'form',
    labelWidth: 200,
    width:300,
    height:200,
    style: "padding:5px;",
    title: "Produtos de Banda Larga Sem Fio",
    bodyStyle: "padding:10px 10px 0 10px",

    items: [{
    id: 'wibb',
    xtype: 'checkboxgroup',
    hideLabel:true,
    bodyStyle: "border:1px solid red",
    itemCls: 'x-check-group-alt',
    columns: 1,

    items: [
    {boxLabel: 'Solu
    Aut viam inveniam aut faciam

  6. #6
    Sencha User mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236

    Default

    remove that hideLabel config
    scratch that. hold on.

  7. #7
    Sencha User mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236

    Default

    no dice.

    checkbox / radio labels are always getting overriden by this rule in ext-all.css:
    Code:
    .x-form-item label {
      clear:left;
      display:block;
      float:left;
      padding:3px 3px 3px 0;
      position:relative;
      width:100px;
      z-index:2;
    }
    because their labels don't get specific widths...

  8. #8
    Ext JS Premium Member glimjack's Avatar
    Join Date
    Oct 2007
    Location
    Durham, NC
    Posts
    13

    Default

    so maybe i show override that style locally?
    I hate that IE has a problem but not Safari and FF...

    I appreciate your quick help!
    Aut viam inveniam aut faciam

  9. #9
    Ext JS Premium Member glimjack's Avatar
    Join Date
    Oct 2007
    Location
    Durham, NC
    Posts
    13

    Default

    well that didn't work. I changed the style in my page, no luck with IE
    Aut viam inveniam aut faciam

  10. #10
    Sencha User mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236

    Default

    no dice with overriding either.

    i tried the following in IE6 to no avail:
    [code]
    Ext.override(Ext.form.Checkbox, {
    onRender : function(ct, position){
    Ext.form.Checkbox.superclass.onRender.call(this, ct, position);
    if(this.inputValue !== undefined){
    this.el.dom.value = this.inputValue;
    }
    this.el.addClass('x-hidden');

    this.innerWrap = this.el.wrap({
    tabIndex: this.tabIndex,
    cls: this.baseCls+'-wrap-inner'
    });
    this.wrap = this.innerWrap.wrap({cls: this.baseCls+'-wrap'});

    if(this.boxLabel){
    this.labelEl = this.innerWrap.createChild({
    tag: 'label',
    htmlFor: this.el.id,
    cls: 'x-form-cb-label',
    html: this.boxLabel,
    style: Ext.isIE && this.labelWidth > 0? 'width:' + this.labelWidth + 'px' : ''
    });
    }

    this.imageEl = this.innerWrap.createChild({
    tag: 'img',
    src: Ext.BLANK_IMAGE_URL,
    cls: this.baseCls
    }, this.el);

    if(this.checked){
    this.setValue(true);
    }else{
    this.checked = this.el.dom.checked;
    }
    this.originalValue = this.checked;
    }
    });

    Ext.onReady(function() {
    new Ext.Panel({
    renderTo: document.body,
    layout: 'form',
    width: 300,
    height: 200,
    style: "padding:5px;",
    title: "Produtos de Banda Larga Sem Fio",
    bodyStyle: "padding:10px 10px 0 10px",

    items: [{
    id: 'wibb',
    xtype: 'checkboxgroup',
    hideLabel:true,
    bodyStyle: "border:1px solid red",
    itemCls: 'x-check-group-alt',
    columns: 1,

    items: [
    {boxLabel: 'Solu

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •