Set the prohibition on editing the field in Ext.window.Window provided

Question

I need to set a ban on editing the text field in Ext.window.Window, provided that the value of the drop-down list is set to Postponed.

I'm trying to do this in the filterCombo function with:

var inp = this.up ('window'). down ('# MyTextField');

inp.disable ();

but in the console I get the error: TypeError: this.up is not a function

What am I doing wrong? Below is my code:

var store = Ext.create('Ext.data.Store', {
            fields: ['order', 'id', 'name'],
            storeId: 'DoubleBookStore',
            data : [
                {"id": 23, name: "New", order_install: 1},
                {"id": 24, name: "In Work", order_install: 2},
                {"id": 29, name: "Postponed", order_install: 3},
                {"id": 34, name: "Shipped", order_install: 4},
                {"id": 31, name: "In_transit", order_install: 5}
            ]
        });

function filterCombo(combobox, records) {
    if(records.data.name == 'Postponed'){
      var inp = this.up('window').down('#MyTextField');
      console.log(inp); 
      inp.disable();
    }
    index = records.data.order_install;
    store = combobox.getStore();
    store.clearFilter();

    store.filterBy(
                function(record) {
                    if ((record.internalId == index - 1) || (record.internalId == index) || (record.internalId == index + 1)) {
                        return true;
                    } else {
                        return false;
                    }
                }
            );
};

var window = Ext.create('Ext.window.Window', {
    title: 'Приложение',
    width: 300,
    height: 200,
    items:[{
                xtype: 'combobox',
                fieldLabel: 'Status',
                name: 'status',
                store: store,
                valueField: 'id',
                displayField: 'name',
                typeAhead: true,
                queryMode: 'local',
                value: 24,
                listeners: {
                select : function(combo, records) {
                    filterCombo(combo, records);
                    }
                }

            },
            {
                        xtype: 'textfield',
                        fieldLabel: 'Ваше имя:',
                        itemId:'MyTextField',
                        name: 'name'
            }]
});
window.show();

Answer 1

You cant use "this" outside the scope of the select function, you are already passing "this" as the parameter "combobox", so use it like this:

function filterCombo(combobox, records) {

    var inp = combobox.up('window').down('#MyTextField');

    if(records.data.name == 'Postponed'){
      inp.disable();
    } else {
      inp.enable();    
    }
    ...

Answer 2

When you define the filterCombo method as you define it takes this as global scope. Thats why there is no this.up as this here is global.

To make your code working you need to pass the scope when calling your function, just replace

    listeners: {
            select : function(combo, records) {
                filterCombo(combo, records);
                }
            }

with

    listeners: {
            select : function(combo, records) {
                filterCombo.apply(this,[combo, records]);
                }
            }

Notice the use of apply to alter the behavior of this in your method.

Answer 3

Solution:

function filterCombo(combobox, records) {
    if (records.data.name == 'Postponed'){
        var inp = combobox.up('window').getComponent('MyTextField');
        console.log(inp);
        inp.disable();
    }
    ...
}); 

Explanation:

What you want to do is to get reference to your textfield and then disable it.

• your texfield config uses itemId , so you must use texfield's container getComponent() method
• to get textfield container use combobox.up('window') , not this.up('window')