javascript - 如何使用处理器动态删除/编辑 Extjs View 中的属性

Question

我有一个使用 sencha extjs 4.0.7 制作的 Web 应用程序，我希望它在移动浏览器中打开时具有不同的行为。V.G.我想根据移动浏览器删除/编辑应用程序中的所有标签，而不必编辑所有应用程序。

我尝试使用前置/后置处理器来访问 View 项，但没有成功。

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

代码的主要问题是预处理器的名称应该是您要预处理的属性(来自原型(prototype))的名称。

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

该文档似乎确实已经过时了(正如文档和我最初的评论所述，没有回调)。它是一种私有(private)方法，因此随着新版本的出现，它可能会被破坏。

我认为这不是实现您想要的功能的好方法，您正在滥用预处理器的用途，因为您没有按预期使用它。我认为如果你重新架构的话，它会更容易维护。我建议您创建一个包含所有标签的文件

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

并为移动版本加载不同的文件。您的类将仅引用 LABELS 对象。

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

我的经验是，这些通过黑客来最小化更改的尝试会导致 future 的维护人员会咒骂你的代码。