Reuse my panel class with different config

[madmax797]

Hi all,

I have a panel class with say 2 fields (text field and textarea). I am using this in one screen, where user is allowed to edit its contents. I want to re-use this class in another screen, but make the fields in it readonly. For simplicity, I am showing only text field in my panel

Ext.define('EC.view.removecp.TestPanel' ,{
extend: 'Ext.panel.Panel',
alias: 'widget.testPanel', // the part after "widget." is automatically added as this xtype
anchor: '100% 100%',
autoScroll: true,
config: {

rdFlag: false,

},

bodyStyle:'border-top:none;border-right:none;border-bottom:none;border-left:none;',
items: [
{

xtype: 'textfield',
name : 'ProfileName',
fieldLabel: 'Profile Name',
maxLength: 50,
width: 450,
height: 25,
allowBlank: false,
action: 'chg',
readOnly: this.rdFlag,
margin: '10 0 10 10' // top right bottom left

}
],
constructor : function(config) {

this.initConfig(config);
return this;

}
});

In my controller, I am building object like this

var r2120v = Ext.create('EC.view.removecp.TestPanel', {rdFlag: true});

I get error like "me.hasListeners is undefined in AbstractComponent.js"
If i use readOnly: rdFlag instead of this.rdFlag, I get rdFlag is undefined.

The second option I was thinking (if the above is not easy or valid) was setting panel to disabled, but the background color for disabled is too dark. So I tried this
var r2120v = Ext.create('EC.view.removecp.TestPanel');
r2120v.disabledCls = 'disabled-class';
r2120v.setDisabled(true);
"disabled-class" is applied at top level, but the last entry <div id="ext-gen1064" class="x-mask"> is overwriting my disabled-class value. as seen in firefox debug

<div id="resultPanelView-body" class="x-panel-body x-panel-body-default x-panel-body-default" style="overflow: auto; width: 1898px; left: 0px; top: 0px; height: 117px;">
<div id="testPanel-1022" class="x-panel disabled-class x-panel-default x-masked-relative x-masked" style="height: 115px;">
<div id="testPanel-1022-body" class="x-panel-body x-panel-body-default x-panel-body-default" style="border-width: medium; border-style: none; border-color: -moz-use-text-color; overflow: auto; left: 0px; top: 0px; width: 1896px; height: 115px;">
<div id="ext-gen1064" class="x-mask"></div>

Appreciate any tips on this.

Thanks

[scottmartin]

Try create your class with something like this.. where you are adding your items inside a constructor.

Ext.define('APP.view.MyPanel', {
    extend : 'Ext.grid.Panel',
    alias  : 'widget.mypanel',

    requires : [ .. ],

    title     : 'Title',
    layout    : 'fit',

    initComponent : function () {

        var me = this;

        Ext.applyIf(me, {
            items   : me.buildItems()
        });

        me.callParent(arguments);
    },

    buildItems : function () {
        var me = this;

        return [
            {
                xtype     : 'form',
                items     : [ ]
            }
        ]
    }

});

Scott.

[madmax797]

Hi Scott,

I changed my panel like below:
and the calling code like this, but my panel does not show the text field
Calling Code:

myPanel = Ext.create('EC.view.removecp.TestPanel', {rdFlag: true});

myContainer.add(myPanel);

Ext.define('EC.view.removecp.TestPanel' ,{

extend: 'Ext.panel.Panel',
alias: 'widget.testPanel', // the part after "widget." is automatically added as this xtype
anchor: '100% 100%',
autoScroll: true,
config: {

rdFlag: false,

},

bodyStyle:'border-top:none;border-right:none;border-bottom:none;border-left:none;',
items: [],

initComponent : function (config) {

var me = this;

Ext.applyIf(me, config);

Ext.applyIf(me, {

items : me.buildItems()

});

me.callParent(arguments);

},

buildItems : function () {

var me = this;

return [

{

xtype : 'panel',

items: [

{

xtype: 'textfield',

name : 'ProfileName',

fieldLabel: 'Profile Name',

maxLength: 50,

width: 450,

height: 25,

allowBlank: false,

action: 'chg',

readOnly: this.rdFlag,

margin: '10 0 10 10' // top right bottom left

}

]

}

]

}

});

Thanks

[scottmartin]

Remove: items: [],

Scott.

[madmax797]

Hi Scott,
That worked perfectly. Thank you.