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
    8,918
    Vote Rating
    443
    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
    8,918
    Vote Rating
    443
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi