thêm thư viện của bên thứ ba vào ứng dụng ext js một cách uể oải (chỉ khi cần)

Question

Tôi muốn thêm js của bên thứ ba vào ứng dụng sencha, một cách lười biếng, chỉ khi hiển thị cửa sổ mới, ví dụ: khi nhấp vào nút , một cửa sổ mới được bật lên và khi điều này xảy ra, thư viện js d3.js cũng được tải.

Đối với tải một file mới trong Ext js bản thân, chúng ta có thể sử dụng đòi hỏi then chốt:

requires : ['MyApp.stores.UserStore'] 

như mô tả trong extjs documentation. Chúng ta có thể làm một cái gì đó như thế này cho các thư viện của bên thứ ba không?

P.S. - Tôi đang sử dụng Ext Js 4.1.0

Answer 1

Cập nhật

Bạn sẽ có thể tải gần bất cứ điều gì với Ext.Loader. loadScript(options) Phương pháp này cũng cung cấp gọi lại được gọi khi quá trình tải hoàn tất.

---

Về cơ bản bạn có thể tải bất cứ điều gì miễn là nó là một lớp ExtJS duy nhất cho mỗi tập tin (Tôi phải thừa nhận rằng tôi chưa bao giờ thử bất cứ điều gì khác!). Bạn có thể đăng ký đường dẫn bổ sung bằng cách sử dụng

Ext.Loader.setPath('EL','your/path/name'); // not done in the example below! 

và yêu cầu điều gì đó trong thời gian chạy khá dễ dàng miễn là trình tải được định cấu hình cho điều đó. Sau đây là ví dụ tải Ext.ux.statusbar.StatusBar khi chạy từ miền khác và đường dẫn hoàn chỉnh mới. Đây là JSFiddle - chỉ cần nhấp vào nút và lớp được nạp và sau đó áp dụng với addDocked

Ext.Loader.setPath( 'Ext', 'http://docs.sencha.com/ext-js/4-1/extjs-build/examples'); 
Ext.create('Ext.Panel', { 
    width: 200, 
    height: 200, 
    renderTo: Ext.getBody(), 
    tbar: { 
     xtype: 'statusbar', 
     statusAlign: 'right', 
     items: [ 
      { 
      xtype: 'button', 
      text: 'show window', 
      id: 'ani-target', 
      handler: function(btn) { 
       if (btn.up('panel').down('window').isVisible()) { 
       btn.up('panel').down('window').hide(); 
       btn.setText('maximize'); 
       }else { 
       btn.up('panel').down('window').show(); 
       btn.setText('minimize'); 
       Ext.define('Ext.ux.custom.StatusBar',{ 
        extend: 'Ext.ux.statusbar.StatusBar', 
        alias: 'widget.cstatus', 
        requires: ['Ext.ux.statusbar.StatusBar'], 
        text: 'Ready', 
        initComponent: function() { 
        this.callParent(arguments); 
        } 
       }); 
       btn.up('panel').down('window').addDocked({ xtype: 'cstatus'}); 
       } 
      } 
      } 
     ], 
    }, 
    items: [{ 
    xtype: 'window', 
    closable: false, 
    width: 100, 
    height: 100, 
    id: 'demo-win', 
    animateTarget: 'ani-target' 
    }] 
})