CODEWITHSUNDEEP
javascriptextjs
Demian
Demian

Reputation: 390

ExtJS - reading a property from a custom panel

I'm trying to read a property from my custom panel for using it into a property item from the same panel. Let me show my code so you can understand what I mean:

Ext.define('XXX.XXX.XXX.MyPanel', {
extend: 'Ext.panel.Panel',
title: 'My Panel',
autoScroll: true,
isMyProperty: false,
defaults: {
    margin: 4,
    xtype: 'horizontalfieldpanel'
},
items: [
    {
        title: 'SOme title',
        itemId: 'title1',
        items: [
            {
                xtype: 'textfield',
                name: 'name',
                fieldLabel: 'Name',
                allowBlank: !this.isMyProperty
            }, {
                xtype: 'textfield',
                name: 'lastName',
                fieldLabel: 'Last Name',
                allowBlank: !this.isMyProperty
            }, {

As you can see I have isMyProperty and I'm trying to use it on allowBlank, but it is not taking it. it is taking the value for default.

Any idea what I'm doing wrong?

Thanks,

Upvotes: 1

Views: 225

Answers (1)

Joe Holloway
Joe Holloway

Reputation: 28948

The conventional way is to use the 'config' subsystem. This tells it to add a new configuration option to your class which also generates a getter/setter method for it.

The configuration option can be overridden when the panel is constructed just like any other config option in the base class.

One trick is that your items must then be constructed in the initComponent method as opposed to doing it in the class definition. I've found that in sophisticated applications, it's better to plan on overriding initComponent to create your items instead of using "static" item declarations in most situations. 

Ext.define('XXX.XXX.XXX.MyPanel', {
    extend: 'Ext.panel.Panel',
    config: {
        isMyProperty: false
    },
    title: 'My Panel',
    autoScroll: true,
    defaults: {
        margin: 4,
        xtype: 'horizontalfieldpanel'
    },
    initComponent: function() {
        this.items = [{
            title: 'Some title',
            itemId: 'title1',
            items: [{
                xtype: 'textfield',
                name: 'name',
                fieldLabel: 'Name',
                allowBlank: !this.@getIsMyProperty()
            }, {
                xtype: 'textfield',
                name: 'lastName',
                fieldLabel: 'Last Name',
                allowBlank: !this.@getIsMyProperty()
            }, {
                ...
            }]
        }];

        this.callParent(arguments);
    }
});

To override the value at construction:

var panel = Ext.create('XXX.XXXX.XXXX.MyPanel', {
 isMyProperty: true 
});

Upvotes: 2

Related Questions