Ext JS 4.2引擎

Question

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

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

我想将一些控件添加到呈现的页面。该软件在全球各地显示ID而不是文本。 示例：“由ID123创建的问题”。当我徘徊在领域是得到“ID123。约翰Doe”。好吧，我是一个JS忍者，所以我可以添加一个字段到HTML DOM中，在正确的位置显示“John Doe”。

我查看了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

“应用督察煎茶”

对于一个快速浏览一下组件层次，可以使用煎茶浏览器插件，

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

要快速搜索ExtJS组件或将您的发现转换为代码，您的main工具将是浏览器控制台和命令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的下一个组件;如果未提供，则选择下一个组件而不管其类型（例如直接父母，邻居兄弟）。

更改任何你想要的。

可以扩展，调试或修改任何现有的行为，包括但不限于ExtJS的自己的代码，使用所谓的override过任何组件，其中包括了组成该应用程序的意见或商店。 override是一个伟大的搜索字词，以获取更多信息。

或者您可以从应用程序外部向现有组件添加新组件，例如现有表单的按钮。例如，开放式煎茶文档，然后插入控制台：

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

您应该然后找到的权煎茶标志在左上角的按钮。点击它。

查找现有的控制器

对于这一点，你必须要找到应用程序命名空间的名称。

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

查找的ViewModels

你已经完成，ExtJS的4.2不支持他们。

更改模型

如果你想改款车型，谨慎：有没有支持功能将字段添加到模型。您可以覆盖模型原型，并将更多条目推入fields阵列。但是，如果您有任何模型实例（记录）在那段时间内已经运行，它们不会更新，并且任何现有保修都将失效。

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