Home | Mail | Syndicate

welcome to my space

15 March, 2010 |

How to enable a Fieldset checkbox

  • Hi All,
    I am trying to enable a checkbox within a fieldset component.

    Here is the fieldset source code:

    var edit_topic_form = new Ext.FormPanel
    ({
    labelAlign: 'top',
    title: 'Edit Topic!',
    closeAction:'hide',
    bodyStyle:'padding:5px',
    items: [{
    layout:'column',
    border:false,
    items:[{
    columnWidth:1,
    layout: 'form',
    border:false,
    items: [{
    xtype:'textfield',
    id:'title',
    fieldLabel: 'Title',
    name: 'title',
    anchor:'95%'
    }, {
    xtype:'textfield',
    id:'category',
    fieldLabel: 'Category',
    name: 'category',
    anchor:'95%'
    },
    new Ext.ux.form.Spinner
    ({
    fieldLabel: 'Search Depth (1-100)',
    id:'search_depth',
    name: 'search_depth',
    value: 1,
    strategy: new Ext.ux.form.Spinner.NumberStrategy({minValue:'1', maxValue:'100'})
    })
    ]
    }]
    },{
    xtype:'tabpanel',
    plain:true,
    activeTab: 0,
    height:235,
    defaults:{bodyStyle:'padding:10px'},
    items:[{
    title:'Description',
    layout:'form',
    defaults: {width: 230},
    defaultType: 'textarea',
    items: [{
    fieldLabel: 'Description',
    id:'description',
    name: 'description',
    height: 175,
    width: 450,
    allowBlank:false
    }]
    },{
    title:'Notification',
    layout:'form',
    width: 230,
    items: [
    {
    xtype:'fieldset',
    checkboxToggle:true,
    title: 'Send Email',
    autoHeight:true,
    defaults: {width: 210},
    defaultType: 'textfield',
    checkboxName:'emailList_checkbox',
    collapsed: true,
    items :[{
    fieldLabel: 'Email Address',
    id:'emailList',
    name: 'emailList',
    allowBlank:true
    }]
    },
    {
    xtype:'fieldset',
    checkboxName:'smsList_checkbox',
    name:'smsList_checkbox',
    checkboxToggle:true,
    title: 'Send SMS',
    autoHeight:true,
    defaults: {width: 210},
    defaultType: 'textfield',
    collapsed: true,
    items :[{
    fieldLabel: 'SMS Number',
    id:'smsList',
    name: 'smsList',
    allowBlank:true
    }]
    },
    {
    xtype:'fieldset',
    checkboxToggle:true,
    checkboxName:'rssList_checkbox',
    name:'rssList_checkbox',
    title: 'Send RSS Update',
    autoHeight:true,
    defaults: {width: 210},
    defaultType: 'textfield',
    collapsed: true,
    items :[{
    fieldLabel: 'RSS Address',
    id:'rssList',
    name: 'rssList',
    allowBlank:true
    }]
    }
    ]
    }]
    }]
    });



    I calll a function to load the data into the from on the show event. I want to enable the emailList, smsList and the rssList if the specified. So would like to have the checkbox enabled and the data shown in the edit field (which does work). But I am unable to get the checkbox to be checked. Here is the function that gets called to enable the checkbox:

    var fillInTopoic = function(Comp){
    edit_topic_form.findById('title').setValue(Selecte dTopic.data.title);
    edit_topic_form.findById('category').setValue(Sele ctedTopic.data.category);
    edit_topic_form.findById('description').setValue(S electedTopic.data.description);
    edit_topic_form.findById('search_depth').setValue( SelectedTopic.data.search_depth);
    switch (SelectedTopic.data.notification) {
    case "Email":
    edit_topic_form.findById('emailList').setValue(Sel ectedTopic.data.emailList);
    edit_topic_form.findById('emailList_checkbox').che cked = true;
    break;
    case "SMS":
    edit_topic_form.findById('smsList').setValue(Selec tedTopic.data.smsList);
    edit_topic_form.findById('smsList_checkbox').check ed = true;
    break;
    case "RSS":
    edit_topic_form.findById('rssList').setValue(Selec tedTopic.data.smsList);
    edit_topic_form.findById('rssList_checkbox').check ed = true;
    break;
    }
    }


    So what is the best way to do this? Is it correct to call ..checked = true or best to called enabled? Appreciate some guidance here. Thanks


  • Give your fieldset an id and use:

    Ext.getCmp('id-of-fieldset').expand();

    or even:

    Ext.getCmp('id-of-fieldset')[checked ? 'expand' : 'collapse']();


  • Ok, but is there a way to make the checkbox that is rendered in a fieldset control show up with the check enabled and expanded to show the text in the text field? TIA

    I am having the same problem

    Did you get the solution for it?

    Thank you,


  • Ok, but is there a way to make the checkbox that is rendered in a fieldset control show up with the check enabled and expanded to show the text in the text field? TIA


  • Set deferredRender:false in your tabpanel.

    ps. Sometime layoutOnTabChange:true is also required.


  • well done...
    Great Help

    Thank you sir


  • Hi tngoldmant,
    I am looking for a solution for the same problem, please let me know if you find something.

    Thank you!


  • Ext checkbox is not the same as html checkbox. Please read Ext.Checkbox document.


  • hi,
    I tried your solution but I got this error:

    this.el has no properties

    but when I switch between taps after the error it works fine

    what else should I do ?







    • #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 How to enable a Fieldset checkbox , Please add it free.
    PNNL, SGI Think Big Danes Launch Europe's First 24-Hour Internet TV Station