How to use a processor to dynamically remove/edit properties from views in Extjs

I have a web application made in sencha extjs 4.0.7, and i want it to have a different behavior when its oppened in a mobile browser. V.G. I would like to remove/edit all the labels in the app based on the mobile browser without have to edit all the application.

I've tried to use the pre/post processors to access the view items but with no success.

Ext.Class.registerPreprocessor('test', function(cls, data, callback) {
    if(data.$className.indexOf('.view.') != -1 && ('items' in data))
    debugger;
}, true).setDefaultPreprocessorPosition('test', 'first');


Ext.ClassManager.registerPostprocessor('test1', function(cls, data, callback) {
    if(data.$className.indexOf('.view.') != -1 && ('items' in data))
    debugger;
}, true).setDefaultPostprocessorPosition('test1', 'first');

The processors stops on the debugger statements but the objects dont have a items property.

The main problem with your code is that the name of the preprocessor is supposed to be the name of the property (from the prototype) that you want to preprocess.

Ext.Class.registerPreprocessor('title', function(cls, data) {
    data.title = data.title + ' Changed';
});   
Ext.Class.registerPreprocessor('html', function(cls, data) {
    data.html = data.html + ' Changed';
});  

Ext.define('MyPanel', {
    extend: 'Ext.panel.Panel', 
    title: 'Here it is',
    html: 'Something'
});

Ext.define('MyPanel2', {
    extend: 'Ext.panel.Panel', 
    title: 'Here it is again',
    html: 'Something else'
});

See https://fiddle.sencha.com/#fiddle/n35

The documentation seems really out of date (there's no callback as the doc and my initial comments stated). It is a private method, so it's likely to break as new versions come out.

I don't think this a good way to implement what you'd like, you're abusing what preprocessors are meant to do because you're not using it as intended. I think it will be much more maintainable if you do re-architect. I'd suggest you create a file with all the labels

var LABELS = { label1: 'desktop 1', label2: 'desktop 2' };

And load a different file for the mobile version. Your classes will just reference the LABELS object.

Ext.define('MyPanel2', {
    extend: 'Ext.panel.Panel', 
    title: LABELS.label1,
    html: LABELS.label2
});

My experience is that these attempts to minimize changes with hacks make for code that future maintainers will cuss you for.