The checkbox style problem

  • by
  • on 01.08.09
  • creampiesca.com
  • edit
  • hi,
    I want to ask how to control the position of the boxLabel of the checkbox?
    Seems the default position of the boxLabel is the right hand side of the checkbox,
    I want to make it on top of the box, or are there any config property already exist to do this?

    thanks
    Regards,
    kenneth


  • Let's have a look at the generated code for a checkbox + its label:






  • Hi all,

    The problem still not solve yet,
    can anyone give a help ><:(

    thanks
    kenneth


  • Thank you very much efege,:)
    After I try your code, it works to swap the checkbox and boxlabel from left to right,
    As my lazy and i am weak in css,
    I try to a style to instead of x-form-cb-label:



    I still can't complete my task.
    Actualy, I am now deal with a task to create a 2-d dynamic checkboxes inside a formpanel suppose the length of col and row is got from db, and what i did now is sth like below:

    /////////////////////////////////////////////////////////////////////////////////////////////////
    function newcheckbox(row, col) {
    var fptemp = new Ext.form.Checkbox({ hideLabel: true, labelSeparator:'', boxLabel:'row_'+row,
    onRender: function(ct, p){
    Ext.form.Checkbox.prototype.onRender.call(this, ct, p);
    this.wrap.addClass('x-column');
    }, height: 40, inputValue: row*10+col });

    return fptemp;
    }

    var outerfield = new Ext.form.FieldSet({align:"center", title: 'Title', autoHeight: true, name: 'outer', id: 'outer' });

    function newinner(col) {
    var innerfield = new Ext.form.FieldSet({ collapsible: true, collapsed: true, title: 'col_'+col, autoWidth:true, autoHeight: true, name: 'inner'+col, id: 'inner'+col });
    for(var row=1; row<6; row++) {
    innerfield.add(newcheckbox(row,col));
    }
    return innerfield;
    }

    for(var col=1; col<4; col++) {
    outerfield.add(newinner(col));
    }
    /////////////////////////////////////////////////////////////////////////////////////////////////////
    inside the formpanel i just add
    items:[outerfield] inside.
    ////////////////////////////////////////////////////////////////////////////////////////////////////
    And the look is not what i really want. I want to build the formpanel is like a table look with the col and row marker.
    would you mind sharing some more to me?


    thanks deeply,
    kenneth


  • I"ve try to use the other way to build the 2-d dynamic checkboxes,
    the outlook is ok but not functional:(
    the code is below:

    function newcheckbox(row, col) {
    var fptemp;

    if(col==5) {
    fptemp = new Ext.form.Checkbox({ hideLabel: true, labelSeparator:'', boxLabel:row+'_'+col, height: 40, inputValue:row+'_'+col });
    } else {
    fptemp = new Ext.form.Checkbox({ hideLabel: true, labelSeparator:'', boxLabel:row+'_'+col,
    onRender: function(ct, p){
    Ext.form.Checkbox.prototype.onRender.call(this, ct, p);
    this.wrap.addClass('x-column');
    }, height: 40, inputValue:row+'_'+col });
    }
    return fptemp;
    }

    var field = new Ext.form.FieldSet({ collapsible: true, title: 'User Role', autoWidth:true, autoHeight: true, name: 'role', id: 'role' });

    for(var row=1; row<4; row++) {
    for(var col=1; col<6; col++) {
    field.add(newcheckboxn(row,col));
    }
    }


    any idea?:-?

    thanks
    Regards,
    kenneth







    • #If you have any other info about this subject , Please add it free.#
    Your name:
    E-mail:
    Telphone:

    Your comments:


    If you have any other info about The checkbox style problem , Please add it free.