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!!

While you can't get it using `newItem.material` or `newItem.getMaterial()`, you can always access it using `newItem.config.material`. — Alexander, Jun 11 '15 at 11:48
I have added a new potion of code from the controller, this code manages the modal window.. — inane, Jun 11 '15 at 11:59
Replace `var matId = button.up('panel').material` with `var matId = button.up('panel').config.material` for a quick&dirty working solution. — Alexander, Jun 11 '15 at 12:05
Exactly @Alexander your solution is working.. in the future I will try to solve it of a best way.. — inane, Jun 11 '15 at 14:24
One remark, it's better to use getInitialConfig as config might not work properly on real devices. Had this issue before: http://docs.sencha.com/touch/2.3.1/#!/api/Ext.Base-method-getInitialConfig — Baidaly, Jun 12 '15 at 10:52

John Tough · Answer 1 · 2015-06-11T11:48:26.663

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);

score 0 · Accepted Answer · answered Jun 11 '15 at 12:07

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";
    }
});

Override Sencha Touch class

2 Answers2