如何在show extjs窗口后調用jQuery？

Question

我有一個ExtJS窗口：

screenshotWindow = new Ext.Window({bla bla});

打開它可以：

screenshotWindow.show();

我需要在加載窗口后調用jQuery方法。

$(window).load(function() {
    debugger;
    $("#imageAnn").annotateImage({
        editable: true,
        useAjax: false,
    });
});

我該怎么做/在哪里？ 上面的所有代碼都發生在我的ExtJS控制器中。 itemID是否正確引用方法？

var changingImage = Ext.create('Ext.Img', {
    src: '/images/trafalgar-square-annotated.jpg',
    renderTo: Ext.getBody(),
    itemID: 'imageAnn',
});

Answer 1

每個ExtJS組件都有一組您可以監聽的事件：

screenshotWindow = new Ext.Window({
  // ...
  listeners: {
    show: function() {
      // anything you want to do after this component is displayed
    }
  }
});

如果要在加載應用程序后執行某些操作，可以使用Ext.onReady() ：

Ext.onReady(function() {
  // app has been loaded and is ready to use
});

---

我通常建議不要混用jQuery和ExtJS，因為它們遵循不同的范例並在不同的抽象級別上運行。 在ExtJS應用程序中需要jQuery通常意味着你做錯了什么（除非你依賴一些高度專業化的jQuery插件...）

Answer 2

我不熟悉ExtJS，但看起來你會......

screenshotWindow.show(this, function(){
  $("#imageAnn").annotateImage({
    editable: true,
    useAjax: false,
  });
});

基於此示例： http ： //docs.sencha.com/extjs/4.2.1/extjs-build/examples/window/layout.html