1. #1
    Sencha Premium Member
    Join Date
    Jun 2012
    Posts
    45
    Vote Rating
    2
    madmax797 is on a distinguished road

      0  

    Default Reuse my panel class with different config

    Reuse my panel class with different config


    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

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,077
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


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

    Code:
    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.

  3. #3
    Sencha Premium Member
    Join Date
    Jun 2012
    Posts
    45
    Vote Rating
    2
    madmax797 is on a distinguished road

      0  

    Default Re:

    Re:


    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

  4. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,077
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Remove: items: [],

    Scott.

  5. #5
    Sencha Premium Member
    Join Date
    Jun 2012
    Posts
    45
    Vote Rating
    2
    madmax797 is on a distinguished road

      0  

    Default Re: Thx that worked

    Re: Thx that worked


    Hi Scott,
    That worked perfectly. Thank you.

Thread Participants: 1