Javascript Ext JS 4.2底漆

我的公司刚刚购买了一个基于ExtJS4.2的第三方应用程序。框架

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

我想向呈现的页面添加一些控件。软件到处显示ID而不是文本。 示例：问题创建人：ID123。当我悬停时，字段是get ID123。无名氏。好的，我是JS忍者，所以我可以在HTMLDOM中添加一个字段，它将在正确的位置显示John Doe

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

现在，由于是一个ExtJS应用程序，我可能可以更优雅地解决这个问题，就像不是直接向DOM而是向ExtJS容器添加字段一样

问题: 在Javascript中，我引用了ExtJS应用程序。如何访问当前视图或viewmodel或model以查询数据和添加字段

粗略想法/伪代码：

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

我在谷歌上搜索了很多，但我发现的所有示例都假设您正在编写ExtJS应用程序，并且您已经在控制器或视图中。但我只得到了应用程序的参考

很抱歉问了这个新手问题：

Sencha应用程序检查器

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

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

要快速搜索ExtJS组件或将搜索结果转换为代码，您的主要工具将是浏览器控制台和命令Ext.ComponentQuery.queryxtype，例如

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

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

与Ext.ComponentQuery.querypanel[12]相比，更具可读性且不易产生副作用

大多数情况下，在树结构中思考也很有用。如果您希望某个容器包含您看到的唯一滑块，请尝试

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

可能比筛选几十个甚至数百个容器更容易。遍历组件结构的方法包括upxtype、downxtype、nextSiblingxtype、previousSiblingxtype。如果提供了xtype，则选择对应xtype的下一个组件；如果未提供，则选择下一个组件，而不考虑其类型，例如直接父级、相邻同级

你想换什么就换什么

您可以扩展、调试或修改任何现有行为，包括但不限于ExtJS自己的代码，对任何组件（包括构成此应用程序的视图或存储）使用所谓的覆盖。override为进一步的信息提供了一个很好的搜索词

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

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

然后，您应该在Sencha徽标的左上角、右上角找到一个按钮。点击它

查找现有控制器

为此，您必须找到应用程序名称空间的名称

如果是例如MyApp，则MyApp.app.controllers.items包含控制器列表。控制器包含控制逻辑以及组件和逻辑之间的映射。创建组件时，控制器会将其事件附加到这些新组件。许多更改可以而且应该在组件层中进行，因为控制器覆盖比较混乱

查找视图模型

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

改变模式

如果您想更改模型，请小心：没有支持的函数可以向模型添加字段。您可以覆盖模型原型，并将更多条目推送到字段数组中。但是，如果到那时您已经有任何模型实例记录在运行，它们将不会更新，并且任何现有的保修都将无效

也就是说，您可以在MyApp.model中找到它们。例如，您可以使用Docs.model.Comment.prototype.fields获取Sencha文档注释模型的所有字段，甚至可以推送另一个字段

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