I'm trying to select multiple objects (2 labels & 2 textfields) that are located in a panel. I gave these ponents a property (changeVisibility: true).

So the thing i'm trying to acplish here is quite simple: when the user checks the checkbox, all the ponents with the property (changeVisibility:true) should bee invisible. So in my controller i'm trying to select these ponents but i'm unable to acplish this thusfar.

Help is much appreciated!

Code of my panel:

Ext.define('Edocs.view.wizard.card-2.content.mobile-password.Panel', {
extend : 'Ext.FormPanel',
alias : 'widget.mobilePassword',
layout : {
    type : 'vbox',
    pack: 'center'
},
bodyStyle:{"background-color":"beige"},
border:false,
defaults:{

    width: '100%'     
},

items: [{        
    xtype           : 'checkboxfield',
    boxLabel        : 'Enable mobile (iphone) accesibility',
    boxLabelAlign   : 'before',
    name            : 'enableMobile',
    inputValue      : '1',
    id              : 'cbxMobile',
    itemId          : 'cbxMobile'

},{
    xtype: 'label',
    text: "Please enter a password to connect to the platform by mobile (iphone/ipad)",
    style: 'font-weight:bold;',
    changeVisibility :true
},{
    xtype: 'textfield', 
    name: 'mobilePassword',
    id: 'txtMobilePassword',
    inputType: 'password'  ,
    changeVisibility :true
    //width: '100%'
},{
    xtype: 'label',
    text: "Confirm password",
    style: 'font-weight:bold;',
    changeVisibility :true
},
{
    xtype: 'textfield', 
    name: 'mobilePasswordConfirm',
    itemId: 'txtMobilePasswordConfirm',
    inputType: 'password'  ,
    vtype: 'password',
    initialPassField: 'txtMobilePassword',
    changeVisibility :true
}],


initComponent : function() {

    Ext.apply(this, {})
    this.callParent(arguments);
}
});

This is the function in my controller (this function is called on the change event of the checkbox):

addMobilePassword : function(checkbox) {
    var items = checkbox.up().down('mobilePassword[changeVisibility=true]');
    if (checkbox.checked){
        for (var i in items){
            items[i].setVisible(false);
        }
    }
}

I'm having troubles with this selector:

 var items = checkbox.up().down('mobilePassword[changeVisibility=true]');

If anyone could give me some advice on how to select these ponents.

Thanks!

I'm trying to select multiple objects (2 labels & 2 textfields) that are located in a panel. I gave these ponents a property (changeVisibility: true).

So the thing i'm trying to acplish here is quite simple: when the user checks the checkbox, all the ponents with the property (changeVisibility:true) should bee invisible. So in my controller i'm trying to select these ponents but i'm unable to acplish this thusfar.

Help is much appreciated!

Code of my panel:

Ext.define('Edocs.view.wizard.card-2.content.mobile-password.Panel', {
extend : 'Ext.FormPanel',
alias : 'widget.mobilePassword',
layout : {
    type : 'vbox',
    pack: 'center'
},
bodyStyle:{"background-color":"beige"},
border:false,
defaults:{

    width: '100%'     
},

items: [{        
    xtype           : 'checkboxfield',
    boxLabel        : 'Enable mobile (iphone) accesibility',
    boxLabelAlign   : 'before',
    name            : 'enableMobile',
    inputValue      : '1',
    id              : 'cbxMobile',
    itemId          : 'cbxMobile'

},{
    xtype: 'label',
    text: "Please enter a password to connect to the platform by mobile (iphone/ipad)",
    style: 'font-weight:bold;',
    changeVisibility :true
},{
    xtype: 'textfield', 
    name: 'mobilePassword',
    id: 'txtMobilePassword',
    inputType: 'password'  ,
    changeVisibility :true
    //width: '100%'
},{
    xtype: 'label',
    text: "Confirm password",
    style: 'font-weight:bold;',
    changeVisibility :true
},
{
    xtype: 'textfield', 
    name: 'mobilePasswordConfirm',
    itemId: 'txtMobilePasswordConfirm',
    inputType: 'password'  ,
    vtype: 'password',
    initialPassField: 'txtMobilePassword',
    changeVisibility :true
}],


initComponent : function() {

    Ext.apply(this, {})
    this.callParent(arguments);
}
});

This is the function in my controller (this function is called on the change event of the checkbox):

addMobilePassword : function(checkbox) {
    var items = checkbox.up().down('mobilePassword[changeVisibility=true]');
    if (checkbox.checked){
        for (var i in items){
            items[i].setVisible(false);
        }
    }
}

I'm having troubles with this selector:

 var items = checkbox.up().down('mobilePassword[changeVisibility=true]');

If anyone could give me some advice on how to select these ponents.

Thanks!

• javascript
• extjs
• extjs4

• Have you tried [checkbox.up().query('mobilePassword[changeVisibility=true]')](docs.sencha./ext-js/4-0/#!/api/…)? – Eugene Ramirez Commented Apr 25, 2012 at 8:47
• Just tried and didn't work... – Fbo Commented Apr 25, 2012 at 8:55
• I know that if the ponents would only be labels this should work: var items = checkbox.up().down('label[changeVisibility=true]'); – Fbo Commented Apr 25, 2012 at 8:58
• But in my case i need labels & textfields and i don't know how to select multiple types of ponents... – Fbo Commented Apr 25, 2012 at 8:59

2 Answers 2

down() will find the first matched descendant of the container. So I think you should try:

checkbox.up().down('mobilePassword').query('label[changeVisibility], textfield[changeVisibility]')

or briefer

checkbox.up().query('label[changeVisibility], textfield[changeVisibility]')

Try query('[changeVisibility=true]')