Override Sencha Touch class

Question

I am working in a Sencha Touch application and I have the next doubt/issue with this code.

Ext.each(records, function(record){
            newItem = Ext.create('Ext.Panel', {
                material: record.get('material'),
                cls: 'setitems-item',
                tpl: '<div class="setitems-item-material">{material}</div>' +
                '<div class="setitems-item-atpstatus {atpstatus}">{cquantity}</div>' +
                '<div class="setitems-item-cdd">{[Cicero.Helper.formatSAPdate2Str(values.cdd)]}</div>' +
                '<div class="setitems-item-netprice">{netprice}</div>' +
                '<div class="setitems-item-netvalue">{netvalue}</div>',
                items: [
                    {
                        xtype: 'button',
                        text: Cicero.Text.getText('SC_I_CONDITIONS_BTN'),
                        itemId: 'setItemConditions',
                        cls:'setConditions'
                    }
                ],
                data: record.getData()
            });
            newSetItems.push(newItem);
        }, this);

And this code manages the button created for each modal window from the controller.

manageSetItemConditions: function (button) {
    var matId = button.up('panel'),
    //var matId = button.up('panel').material,
        recordId = button.up('cartItem').getRecordId(),
        record = Ext.getStore('CartItems').getById(recordId),
        conditionsStore = record.setitems().findRecord('material', matId).conditions(),
        orderTypeConditionsStore = this.getCartHeader().down('#headerOrderType').getRecord().sconditions(),
        view = Ext.create('xx.view.cart.Conditions', {
            orderTypeConditionsStore: orderTypeConditionsStore
        });
    //view.setRecordId(record.getId());//TODO: mirar si es necesario
    view.down('dataview').setStore(conditionsStore);
    view.showBy(button);
},

Here you can see the property "material" but this is not a included property in the Sencha class, How to add this new config property in the class Panel (in this case)?

Do I need to override the class Panel?

This code is working in localhost but not after the production build, command line of Sencha CMD because material property is not included in the class.

Thanks!!

Answer 1

You could extend the panel class and explicitly define a material configuration like shown below. I would hope that SenchaCmd would be OK with this.

    Ext.define("my.custom.Panel", {
      extend: 'Ext.Panel',
      alias: 'widget.mycustompanel',

      config: {
          /**
           * @cfg {Object} material
           * Custom configuration for material
           */
          material : undefined
      }
    });

And use as follows in your code...

Ext.each(records, function(record){
            newItem = Ext.create('my.custom.Panel', {
                material: record.get('material'),
                // other config
            });
}, this);

Answer 2

When looking into the Sencha Touch code, I think you would have to add material to the panel's eventedConfig property, because the setters are set as follows in touch/src/Evented.js :

for (name in eventedConfig) {
    if (eventedConfig.hasOwnProperty(name)) {
        nameMap = ExtClass.getConfigNameMap(name);
        data[nameMap.set] = this.generateSetter(nameMap);
    }
}

You can't influence the eventedConfig property inside Ext.create, you would have to define an override for this, which would influence all panels:

Ext.define('MyApp.override.Panel',{
    override: 'Ext.panel.Panel',
    constructor:function() {
        this.callParent(arguments);
        this.eventedConfig.material = "SomeDefaultValue";
    }
});

or define a derived class and use that:

Ext.define('MyApp.ux.Panel',{
    extend: 'Ext.panel.Panel',
    xtype: 'mypanel',
    constructor:function() {
        this.callParent(arguments);
        this.eventedConfig.material = "SomeDefaultValue";
    }
});