Ext JS 4: Điểm yêu cầu là gì?

Question

Tôi đã cố gắng tìm ra những gì đòi hỏi trong Ext JS 4, và tôi dường như không thể đưa ra một câu trả lời hợp lý. Hãy nói rằng tôi có đoạn mã sau:

app.js

Ext.Loader.setConfig({ 
    enabled: true 
}); 

Ext.Loader.setPath('Ext.ux', 'examples/ux'); 

Ext.application({ 
    name: 'Test', 
    appFolder: 'app', 
    controllers: ['TheController'], 
    requires: ['Test.Utils', 'Test.Utils2'], // I don't think this does anything... couldn't find this option for Ext.application 
    launch: function() { 
    Ext.create('Ext.Viewport', { 
     layout: 'border', 
     items: [{ 
     xtype: 'thegrid', 
     region: 'center', 
     title: 'blah!' 
     }] 
    }); 
    } 
}); 

app/controller/TheController.js

Ext.define('Test.controller.TheController', { 
    extend: 'Ext.app.Controller', 
    models: ['TheModel'], 
    stores: ['TheStore'], 
    views: ['TheGrid'], 
    init: function() { 
    } 
}); 

app/view/TheGrid.js

Ext.define('Test.view.TheGrid', { 
    extend: 'Ext.grid.Panel', 
    alias: 'widget.thegrid', 
    requires: ['Test.store.TheStore'], 
    store: 'TheStore', 
    columns: [ 
    {header: 'Name', dataIndex: 'name'}, 
    {header: 'Phone', dataIndex: 'phone'}, 
    {header: 'Hello', dataIndex: 'hello'} 
    ] 
}); 

app/cửa hàng/TheStore.js

Ext.define('Test.store.TheStore', { 
    extend: 'Ext.data.Store', 
    requires: ['Test.model.TheModel', 'Test.Utils'], 
    model: 'Test.model.TheModel', 
    data: [ 
    {name: 'keanu reeves', phone: '1800matrices', hello: Test.Utils.getText()}, 
    {name: 'james earl jones', phone: '1800starwar', hello: 'nothing here'}, 
    {name: 'barack obama', phone: '1800prsidnt', hello: 'hello world'} 
    ] 
}); 

app/mô hình/TheModel.js

Ext.define('Test.model.TheModel', { 
    extend: 'Ext.data.Model', 
    fields: [ 
    {name: 'name', type: 'string'}, 
    {name: 'phone', type: 'string'}, 
    {name: 'hello', type: 'string'} 
    ] 
}); 

app/Utils.js

Ext.define('Test.Utils', { 
    singleton: true, 
    requires: ['Test.Utils2'], 
    getText: function() { 
    return Test.Utils2.hello + 'world'; 
    } 
}); 

ứng dụng /Utils2.js

Ext.define('Test.Utils2', { 
    singleton: true, 
    hello: 'hello' 
}); 

Tôi nhận thấy đây là một ví dụ thực sự dài, nhưng tôi cần đảm bảo rằng tôi đã mô tả đầy đủ những gì tôi đang làm. Utils dựa trên Utils2 vì nó cần gọi biến hello của Utils2. Phần còn lại của mã đang thiết lập một lưới và gọi hàm Utils.getText trong TheStore. Firebug ném một Test.Utils is undefined trên dòng 6 trong TheStore.js, và tại thời điểm đó, Test.Utils rõ ràng là không tồn tại, nhưng Test.Utils2 thực hiện.

Câu hỏi của tôi là ... tại sao Utils2 lại tồn tại, nhưng Utils thì không? Tôi nghĩ rằng đòi hỏi phải đưa vào các lớp học mà tôi cần, do đó cho phép tôi sử dụng chúng, nhưng tôi đoán tôi là sai. Tôi đã đọc các tài liệu Sencha và vô số các chủ đề, nhưng không có gì thực sự có ý nghĩa, và nó không thực sự giải thích ví dụ này. Có ai có thể làm sáng tỏ một số hiểu biết ở đây không? Tôi đánh giá cao nó.

** Ngoài ra, tôi nhận ra tôi đang làm một số điều ngu ngốc ở đây, nhưng nó chỉ là một ví dụ, vì vậy tôi không tìm cách kết hợp Utils toàn cầu hoặc không sử dụng globals ở tất cả ... Tôi chỉ cố gắng tìm ra tùy chọn yêu cầu.

CẬP NHẬT

Nhờ câu trả lời Izhaki của dưới đây, tôi tìm một cái gì đó. Nếu tôi muốn sử dụng một lớp được yêu cầu trong một lớp mà tôi đang xác định, tôi sẽ phải chờ đối tượng được tạo (IE, sử dụng initComponent), vì vậy mã cửa hàng và mã lưới của tôi thay đổi thành:

app/cửa hàng/TheStore.js

Ext.define('Test.store.TheStore', { 
    extend: 'Ext.data.Store', 
    requires: ['Test.model.TheModel'], 
    model: 'Test.model.TheModel' 
}); 

app/view/TheGrid.js

Ext.define('Test.view.TheGrid', { 
    extend: 'Ext.grid.Panel', 
    alias: 'widget.thegrid', 
    requires: ['Test.store.TheStore'], 
    store: 'TheStore', 
    columns: [ 
    {header: 'Name', dataIndex: 'name'}, 
    {header: 'Phone', dataIndex: 'phone'}, 
    {header: 'Hello', dataIndex: 'hello'} 
    ], 
    // This is the change that works 
    initComponent: function() { 
    this.callParent(); 
    this.store.loadData([ 
     {name: 'keanu reeves', phone: '1800matrices', hello: Test.Utils.getText()}, 
     {name: 'james earl jones', phone: '1800starwar', hello: 'nothing here'}, 
     {name: 'barack obama', phone: '1800prsidnt', hello: 'hello world'} 
    ]); 
    } 
}); 

này hoạt động, nhưng câu hỏi cuối cùng của tôi là ...thế nào để tôi phải có các yêu cầu cho TheModel trong TheStore, và/hoặc TheStore trong TheGrid? Nó có vẻ như TheController là chăm sóc của tất cả những người yêu cầu bởi vì tôi có thể sử dụng Test.Utils trong TheGrid, nhưng TheGrid không đặc biệt nhà nước rằng nó đòi hỏi Test.Utils.

Ngoài ra, this example từ tài liệu Sencha làm cho tôi bối rối hơn vì tôi rõ ràng không sử dụng Test.Utils cho đến khi TheStore được tạo, nhưng ví dụ này có vẻ như nó có thể sử dụng lớp con mà không phải đợi nó khởi tạo (sử dụng initComponent).

Answer 1

Đây thực sự không phải là một câu hỏi ngớ ngẩn chút nào.

Bạn có thể nhìn vào đòi hỏi như một cách để nói ExtJS:

"Khi bạn xây dựng một đối tượng của lớp này, hãy chắc chắn để tự động tải các kịch bản cần thiết đầu tiên".

Bạn có quyền về dòng này:

requires: ['Test.Utils', 'Test.Utils2'], 

không được cần thiết trong app.js, Lí do là các ứng dụng đã có:

controllers: ['TheController'], 

mà cũng giống như nói rằng bạn yêu cầu js tập lệnh trong đó TheController nằm (bất kỳ định nghĩa mô hình/chế độ xem/bộ điều khiển/cửa hàng nào cũng có nghĩa là các tập lệnh có liên quan được yêu cầu, tức là sẽ được tải động).

TheController có:

requires: ['Test.model.TheModel', 'Test.Utils'], 

đó sẽ được tải những động - đây là lý do tại sao cùng requires là không cần thiết nó app.js;

Lý do bạn nhận được Firebug ném Test.Utils là undefined là bạn cho một cấu hình (hello) với một tham chiếu đến một đối tượng mà chưa được tự động nạp - không có Test.Utils trong phạm vi cho đến khi TheStore được xây dựng.

Answer 2

1. mối quan hệ HasMany đơn giản là không làm việc mà không có nó

2. Nó giúp JSBuilder biết những tập tin bao gồm. Ví dụ: nếu Chế độ xem của bạn sử dụng bố cục đường viền, chế độ xem sẽ không được bao gồm không chính xác và bạn phải sử dụng hoặc sử dụng yêu cầu để bao gồm nó.