Как использовать процессор для динамического удаления / редактирования свойств из представлений в Extjs

Question

У меня есть веб-приложение, созданное в sencha extjs 4.0.7, и я хочу, чтобы оно имело другое поведение, когда оно противопоставлено в мобильном браузере. В.Г. Я хотел бы удалить / отредактировать все ярлыки в приложении на основе мобильного браузера без необходимости редактировать все приложения.

Я пытался использовать pre/post процессоры для доступа к элементам просмотра, но безуспешно.

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

Процессоры останавливаются на операторах отладчика, но объекты не имеют свойства items.

Answer 1

Основная проблема в вашем коде заключается в том, что имя препроцессора должно быть именем свойства (из прототипа), которое вы хотите предварительно обработать.

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

Смотрите https://fiddle.sencha.com/

Документация кажется действительно устаревшей (обратного вызова нет, как указано в документе и моих первоначальных комментариях). Это частный метод, поэтому он может сломаться, когда выйдут новые версии.

Я не думаю, что это хороший способ реализовать то, что вы хотите, вы злоупотребляете тем, что должны делать препроцессоры, потому что вы не используете это по назначению. Я думаю, что это будет гораздо более ремонтопригодным, если вы сделаете ре-архитектор. Я бы предложил вам создать файл со всеми метками

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

И загрузите другой файл для мобильной версии. Ваши классы будут просто ссылаться на объект LABELS.

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

По моему опыту, эти попытки свести к минимуму изменения с помощью хаков делают код, за который вас будут ругать будущие сопровождающие.