如何使用处理器从 Extjs 中的视图动态 remove/edit 属性

Question

我有一个用 sencha extjs 4.0.7 制作的 Web 应用程序，我希望它在移动浏览器中打开时具有不同的行为。 V.G。我想remove/edit基于移动浏览器的应用程序中的所有标签，而无需编辑所有应用程序。

我尝试使用 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
});

我的经验是，这些试图通过黑客手段尽量减少更改的做法会导致未来的维护者会责备您的代码。

如何使用处理器从 Extjs 中的视图动态 remove/edit 属性

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

javascript

extjs

preprocessor

post-processor