javascript - Ext JS 4.2 入门

Question

我的公司刚刚购买了一个基于 ext js 4.2 的第三方应用程序。框架。

该软件是封闭源代码，但它是基于 Web 的，因此我可以添加一个 .js 文件来根据我的需要更改 UI。

我想向呈现的页面添加一些控件。该软件到处都显示 ID 而不是文本。示例:“问题创建者:ID123”。当我悬停该字段时，会得到“ID123. John Doe”。好的，我是一个 JS 忍者，所以我可以向 HTML DOM 添加一个字段，它将在正确的位置显示“John Doe”。

我查看了 HTML 代码以获得正确的控件，并查看了生成的 ID。我编写的代码很容易随着第三方软件的每个新版本而中断。

现在，因为它是一个 Ext JS 应用程序，我可能可以更优雅地解决这个问题，比如不直接向 DOM 添加一个字段，而是向 Ext JS 容器添加一个字段。

问题:在 Javascript 中，我引用了 Ext JS 应用程序。我将如何访问当前 View 或 View 模型或模型以查询数据并添加字段？

粗略的想法/伪代码:

var id = app.getCurrentModel.getValue("creatorID");
var name = myserver.getPersonData(id).name;
app.currentView.addLabelControl(name);

我在谷歌上搜索了很多，但我发现的所有示例都假设您正在编写 ext js 应用程序并且您已经在 Controller 或 View 中。但我只得到了对应用程序的引用。

抱歉新手问题:)

Answer 1

“Sencha 应用检查器”

要快速浏览组件层次结构，您可以使用 Sencha 浏览器插件，

以编程方式查找某个 ExtJS 组件

要快速搜索 ExtJS 组件或将您的发现转化为代码，您的主要工具将是浏览器控制台和命令 Ext.ComponentQuery.query(xtype)，例如

Ext.ComponentQuery.query("grid")
Ext.ComponentQuery.query("panel")
Ext.ComponentQuery.query("form")

然后您将在浏览器控制台中找到该类型所有组件的数组。选择正确的一个，并检查它是否有一个不是自动生成的 id 或 itemId(所有像 xtype-1234 都是自动生成的)。对于表单字段，name 属性可能很有用。命令如

Ext.ComponentQuery.query("[itemId=ABC]")
Ext.ComponentQuery.query("[name=DEF]")
Ext.getCmp(id)

与 Ext.ComponentQuery.query("panel")[12] 相比，可读性更高，而且不易产生副作用。

大多数时候，用树结构思考也很有用。如果您想要一个包含您看到的唯一 slider 的特定容器，请尝试

Ext.ComponentQuery.query("slider")
Ext.ComponentQuery.query("slider")[0].up()

可能比筛选数十个甚至数百个容器更容易。遍历组件结构的方式有up(xtype), down(xtype), nextSibling(xtype), previousSibling(xtype) 。如果提供了 xtype，则选择相应 xtype 的下一个组件；如果未提供，则选择下一个组件，而不管类型(例如，直接父级、相邻兄弟级)。

随意更改。

您可以扩展、调试或修改任何现有行为，包括但不限于 ExtJS 自己的代码，使用所谓的 override 覆盖任何组件，包括构成此应用程序的 View 或存储. override 是获取更多信息的绝佳搜索词。

或者您可以从应用外部向现有组件添加新组件，例如向现有表单添加按钮。比如打开sencha docs然后在console中插入:

Ext.ComponentQuery.query("searchcontainer")[0].up().insert(1,{xtype:'button',text:'Test',handler:function(){Ext.Msg.alert('Test Button clicked');}});

然后您应该在 Sencha Logo 的左上角找到一个按钮。点击它。

查找现有 Controller

为此，您必须找到应用命名空间的名称。

如果是MyApp，然后 MyApp.app.controllers.items 包含 Controller 列表。 Controller 包含控制逻辑，以及组件和逻辑之间的映射。创建组件时， Controller 将它们的事件附加到这些新组件。许多更改可以而且应该在组件层中进行，因为 Controller 覆盖很困惑。

查找 View 模型

你已经完成了，ExtJS 4.2 不支持它们。

改变模型

如果要更改模型，请注意:不支持向模型添加字段的函数。您可以覆盖模型原型(prototype)，并将更多条目推送到 fields 数组中。但是，如果到那时您已经有任何模型实例(记录)在运行，它们将不会更新，并且任何现有的保证都将失效。

也就是说，您可以在 MyApp.model 中找到它们。你可以例如使用 Docs.model.Comment.prototype.fields 获取 Sencha Docs 的 Comment 模型的所有字段，或者甚至插入另一个字段。