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的下一个组件；如果未提供，则选择下一个组件，无论类型如何(例如直接父级、相邻兄弟级)。

更改您想要的任何内容。

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

或者，您可以从应用程序外部向现有组件添加新组件，例如向现有表单添加按钮。例如，打开 sencha 文档，然后在控制台中插入:

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 注释模型的所有字段，甚至插入另一个字段。