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

Question

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

Я попытался использовать процессоры 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'); 

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

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/#fiddle/n35

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

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

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

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

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

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