Trong ứng dụng Ext JS 4 MVC, điều gì sẽ chịu trách nhiệm tải cửa hàng?

Question

Hãy xem xét một ứng dụng phức tạp nơi bạn có logic lọc tùy chỉnh và các chế độ tải khác nhau; tải chậm khi bị ẩn, không tải khi bị ẩn, nhưng tải khi được hiển thị và tải lại khi bộ lọc tùy chỉnh của bạn được sửa đổi, v.v.

Phần nào của ứng dụng mvc phải chịu trách nhiệm tải và cách kết nối tất cả?

Answer 1

Tôi chưa bao giờ tìm thấy câu trả lời dứt khoát về điều này từ Sencha khi tôi bắt đầu với MVC nhưng tôi có thể cho bạn biết những gì tôi đã làm cho một vài ứng dụng thành công.

Tôi tạo và tải các cửa hàng của mình theo cách chúng được sử dụng. Đó dường như đã chia thành ba loại khác nhau cho tôi:

1. Cửa hàng áp dụng cho toàn bộ ứng dụng

2. Cửa hàng áp dụng cho tất cả các trường hợp của một cái nhìn

3. Cửa hàng được gắn với một cái nhìn đơn dụ

1. Cửa hàng thứ tại áp dụng cho toàn bộ ứng dụng

Tôi thường có một "chính" điều khiển để xử lý khuôn khổ ứng dụng của tôi, mọi thứ như bàn phím điều hướng, menu chính, vv

Cửa hàng rơi vào các thể loại đầu tiên ở trên đi vào mảng stores của bộ điều khiển "Chính". Nếu các cửa hàng này không phụ thuộc vào một cửa hàng khác thì tôi chỉ đơn giản là làm cho chúng autoLoad: true và được thực hiện với chúng. Nhưng trong trường hợp chúng phụ thuộc vào dữ liệu của một cửa hàng khác thì tôi thêm người nghe vào kho lưu trữ gốc để tải cửa hàng phụ thuộc vào sự kiện onLoad của cha mẹ.

Ví dụ về một số cửa hàng mà tôi tìm thấy rơi vào danh mục đầu tiên này là các cửa hàng tham khảo mà tôi sử dụng trong các combobox trong suốt ứng dụng, thường ở nhiều loại chế độ xem khác nhau. Chúng thường được cấu hình với autoLoad: true và sau đó tôi không bao giờ tải lại chúng cho phiên của người dùng đó.Bất cứ khi nào tôi cần một combobox có sử dụng các cửa hàng tham khảo, tôi có thể thiết lập nó như thế này:

{ 
    xtype: 'combobox', 
    allowBlank: false, 
    forceSelection: true, 
    store: Ext.getStore('SomeReferenceStore'), 
    queryMode: 'local', // this makes sure the store doesn't reload 
    valueField: 'id', 
    displayField: 'name' 
} 

Để đưa ra một ví dụ về hai cửa hàng mà cả hai rơi vào loại đầu tiên, với một bị lệ thuộc vào nhau:

Trong một trong các ứng dụng của tôi, tôi có số lượng người dùng động, khi người dùng đăng nhập vào ứng dụng tôi cần tìm nạp các quyền khác nhau và sửa đổi mô hình User để bao gồm trường boolean cho mỗi quyền khác nhau sau:

Ext.define('MyApp.controller.Main', { 
    extend: 'Ext.app.Controller', 

    models: [ 
     'User', 
     'Reference', 
     // etc... 
    ], 

    stores: [ 
     'CurrentUser', 
     'PermissionRef', // this is "autoLoad: true" 
     // etc... 
    ], 

    init: function() { 
     var me = this;  

     // update the user model and load the user 
     me.getPermissionRefStore().on('load', function(store, records) { 
      var model = me.getUserModel(), 
       fields = model.prototype.fields.getRange(); 

      // append the permissions onto the User model fields 
      Ext.each(records, function(permission) { 
       fields.push({ 
        name: permission.get('name'), 
        type: 'bool', 
       }); 
      }); 

      // update the user model with the permission fields 
      model.setFields(fields); 

      // load the current user 
      me.getCurrentUserStore().load(); 

      // other stuff... 

     }); 

     // other stuff... 

    } 

}); 

Với điều này, bất cứ khi nào tôi cần một tham chiếu đến người dùng và những quyền mà anh ta có sẵn, tôi chỉ cần gọi:

var user = Ext.getStore('CurrentUser').first(); 

Đôi khi một lượt xem cũng sẽ phụ thuộc vào cửa hàng đang được tải. Ví dụ các mục menu chính của tôi được xác định bởi một bảng cơ sở dữ liệu, trong trường hợp đó tôi sẽ bao gồm một onLoad người nghe cùng một cách (bên trong chức năng của bộ điều khiển init):

// create the menu once we know what menu items are available 
me.getMenuStore().on('load', function(store) { 
    me.getViewport().add(Ext.widget('mainpanel'));    
}); 

Các MyApp.store.Menu bản thân sẽ được cấu hình với autoLoad: true.

2. Cửa hàng áp dụng cho tất cả các trường hợp của một cái nhìn

tôi có thể tạo và tải những giống như các loại đầu tiên duy nhất tôi đặt chúng trong xem cụ thể điều khiển của mảng stores thay vì "Main" bộ điều khiển stores mảng.

Sau đó, khái niệm cơ bản giống nhau, một số là autoLoad: true một số không phải là nếu chúng phụ thuộc vào dữ liệu của cửa hàng khác.

Đối với người không phải là autoLoad: true, chúng được tải ở đâu đó bên trong chức năng init của bộ điều khiển hoặc do kết quả của một số sự kiện được kích hoạt.

3. Cửa hàng được gắn với một cái nhìn duy nhất dụ

Ở đây tôi có thể đi ngược lại các hạt MVC, nhưng có thực sự không phải là nơi tốt đẹp hơn cho một cửa hàng áp dụng cho một trường hợp duy nhất của một xem sau đó bên trong chính chế độ xem.

Trong hầu hết các trường hợp, tôi thậm chí không đặt các cửa hàng này trong mảng stores của bộ điều khiển xem. Tôi chỉ cần tạo và tải chúng bên trong chức năng initComponent của chế độ xem. Kết quả là, khi khung nhìn bị phá hủy, không có tham chiếu đến cửa hàng để cửa hàng cũng sẽ bị phá hủy. Điều đó giúp giảm bớt tài nguyên cho các cửa hàng có thể được tạo nhiều lần.

Ví dụ: giả sử bạn có một số MyApp.view.UnicornWeightGrid kéo dài gridpanel và hiển thị trọng số lũy tiến của kỳ lân theo thời gian. Người dùng có thể mở UnicornWeightGrid cho tất cả các kỳ lân trong lĩnh vực để so sánh và tham chiếu chéo. Sẽ có nhiều phiên bản khác nhau của UnicornWeightStore vì có các trường hợp của UnicornWeightGrid.

Quan điểm có thể được định nghĩa như thế này:

Ext.define('MyApp.view.UnicornWeightGrid', { 
    extend: 'Ext.grid.Panel', 
    alias: 'widget.unicornweight', 
    requires: [ 
     'MyApp.model.UnicornWeight' 
    ], 
    closable: true,  
    initComponent: function() { 
     var me = this; 

     me.store = Ext.create('Ext.data.Store', { 
      model: 'MyApp.model.UnicornWeight', 
      proxy: { 
       type: 'ajax', 
       url: 'unicorns/weight', 
       extraParams: { 
        name: me.unicornName 
       } 
      } 
     }); 

     me.store.load(); 
    }); 
}); 

Sau đó, bất cứ khi nào chúng tôi muốn có được một khác nhau UnicornWeightGrid chúng tôi chỉ có thể gọi:

var grid = Ext.widget('unicornweight', { 
    unicornName: someUnicornNameVariable 
}); 

myTabPanel.add(grid); 

Bất kỳ onLoad nghe tôi cần trên các cửa hàng được định nghĩa trong chế độ xem, tôi cũng đính kèm bên trong chế độ xem. Vì vậy, tôi không thực sự cần một tài liệu tham khảo bất cứ nơi nào khác.

Với tất cả những gì đã nói, đây không phải là cách duy nhất để thiết lập cửa hàng của bạn.

Tôi đã nhận thấy đây là cách hiệu quả nhất để xử lý các cửa hàng một cách nhất quán trong việc tạo ra một vài ứng dụng "MVC" ExtJS khác nhau, nhưng đôi khi tôi cũng làm điều đó khác trong trường hợp "đặc biệt".

Bạn nên nhớ rằng "MVC" là mẫu thiết kế khá lỏng lẻo, nó được xác định và thực hiện khác nhau trong hầu hết mọi khung công tác tôi đã sử dụng. Vì vậy, bạn có thể làm bất cứ điều gì làm việc tốt nhất cho bạn.

Answer 2

Bạn nên đặt logic để tải cửa hàng bên trong bộ điều khiển cho lưới sẽ hiển thị cửa hàng này. Tôi đặt chúng vào bộ xử lý của sự kiện afterrender.