Question

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

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

我想为渲染页面添加一些控件。该软件在任何地方都显示ID而不是文本。示例：＆＃34;问题创建者：ID123＆＃34;。当我悬停在田地上时，得到了＃ID; ID123。 John Doe＆＃34;。好吧，我是一个JS忍者，所以我可以在HTML DOM中添加一个字段，它将在正确的位置显示＆＃34; John Doe＆＃34;

我查看了HTML代码以获得正确的控件并查看生成的ID。我写的代码很容易与第三方软件的每个新版本打破。

现在，既然是一个Ext JS应用程序，我可以更优雅地解决这个问题，就像直接向DOM添加一个字段而不是Ext JS容器。

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

粗略的想法/伪代码：

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

我google了很多，但我发现的所有例子都假设您正在编写ext js应用程序并且您已经在控制器或视图中。但我只得到了应用程序的引用。

抱歉新手问题：）

Answer 1

＆＃34; Sencha的App Inspector＆＃34;

要快速浏览一下组件层次结构，可以使用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]那样容易出现副作用。

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

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

可能比筛选数十甚至数百个容器更容易。遍历组件结构的方法包括up(xtype)，down(xtype)，nextSibling(xtype)，previousSibling(xtype)。如果提供了xtype，则选择相应xtype的下一个组件;如果没有提供，则无论类型如何都选择下一个组件（例如直接父级，相邻兄弟）。

更改您想要的任何内容。

您可以使用所谓的override扩展，调试或修改任何现有行为，包括但不限于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不支持它们。

更改模型

如果要更改模型，请务必小心：没有支持的功能可以向模型添加字段。您可以覆盖模型原型，并将更多条目推送到fields数组中。但是，如果您在此之前已经运行过任何模型实例（记录），则不会更新它们，并且任何现有的保修都将无效。

那就是说，你在MyApp.model找到了它们。你可以，例如获取Sencha Docs的所有字段＆＃39;评论模型使用Docs.model.Comment.prototype.fields，甚至推送其他字段。

Ext JS 4.2引物

1 个答案: