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應用程序的引用。 如何訪問當前視圖或視圖模型或模型以查詢數據並添加字段？

粗略的想法/偽代碼：

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

我在Google上搜索了很多，但是發現的所有示例都假定您正在編寫ext js應用程序，並且您已經在控制器或視圖中。 但是我只得到了該應用程序的參考。

對不起，新手問題:)

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]更易讀，並且沒有副作用。

在大多數情況下，思考樹結構也很有用。 如果您想要某個包含唯一看到的滑塊的容器，請嘗試

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

比篩選數十個甚至數百個容器更容易。 遍歷組件結構的方法包括up(xtype) ， down(xtype) ， nextSibling(xtype) ， previousSibling(xtype) 。 如果提供了xtype，則選擇相應xtype的下一個組件；否則，請參見圖4。 如果未提供，則選擇下一個組件，而與類型無關（例如，直接父級，相鄰同級）。

更改您想要的任何內容。

您可以使用對任何組件的所謂override來擴展，調試或修改任何現有行為，包括但不限於ExtJS自己的代碼，包括構成此應用程序的視圖或存儲。 override是搜索更多信息的絕佳搜索條件。

或者，您可以從應用程序外部將新組件添加到現有組件，例如添加到現有表單的按鈕。 例如，打開sencha docs，然后插入控制台：

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找到它們。 例如，您可以使用Docs.model.Comment.prototype.fields來獲取Sencha Docs注釋模型的所有字段，甚至可以將另一個字段壓入其中。