6

Tôi chỉ mới bắt đầu nhận Sencha Touch 2 MVC. Tôi có kinh nghiệm Ext 3 nặng, nhưng đây là một thế giới hoàn toàn mới.Ext.define/Ext.extend trong Sencha Touch 2

Tôi dường như không thể xây dựng chế độ xem rất xa. Tôi đã lấy mã của tôi theo hai hướng dựa trên những gì tôi đã thấy trên Internet và không hoạt động.

Path 1

app.js của tôi:

Ext.application({ 
     name: 'BkAdmin', 
     views: ['LoginForm'], 
     launch: function() { 
      Ext.create('BkAdmin.view.LoginForm'); 
    } 
}); 

Quan điểm của tôi/LoginForm.js:

Ext.define('BkAdmin.view.LoginForm', { 
     extend: 'Ext.form.FormPanel', 
     config: { 
      fullscreen: true, 
      initComponent: function() { 
         alert('yo!'); 
         BkAdmin.view.LoginForm.superclass.initComponent.apply(this, arguments); 
      } 
     } 
    } 
); 

này tải không có lỗi, và tôi thậm chí có thể thêm các mục trong hình thức phần cấu hình. Tuy nhiên, initComponent() không thể giải thích không bao giờ được gọi, vì vậy khung nhìn hoàn toàn không linh hoạt.

Đường dẫn 2

app.js của tôi:

Ext.application({ 
    name: 'BkAdmin', 
    views: ['LoginForm'], 
    launch: function() { 
    BkAdmin.view.LoginForm = new BkAdmin.view.LoginForm(); 
    } 
}); 

Quan điểm của tôi/LoginForm.js:

BkAdmin.view.LoginForm = Ext.extend(Ext.form.FormPanel, { 
    fullscreen: true, 
    initComponent: function() { 
       alert('yo!'); 
     BkAdmin.view.LoginForm.superclass.initComponent.apply(this, arguments); 
    } 
}); 

phẳng ra này không hoạt động. Báo cáo Chrome 'Không thể đặt thuộc tính' LoginForm 'không xác định' ... làm thế nào trên trái đất đã xem được không xác định? Ngoài ra, nó nói 'Các lớp sau đây không được khai báo ngay cả khi tệp của họ đã được tải:' BkAdmin.view.LoginForm '.' Chắc chắn vẻ được tuyên bố với tôi.

Nhiều câu hỏi ở đây: tôi đã làm gì sai trong các đường dẫn ở trên? Làm thế nào tôi có thể nhận initComponent() để được gọi trong Path 1, và có được Path 2 để làm việc? Mã nào được trích dẫn-không được sử dụng tốt hơn?

Cảm ơn!

Trả lời

7

Đường dẫn 1 là (gần đúng) cách chính xác. Bạn nên sử dụng Ext.define và không phải Ext.extend (không hoạt động tốt/đáng tin cậy) vì hệ thống lớp mới (giống như Ext JS 4).

Khối config chỉ được sử dụng cho các cấu hình được xác định trong lớp/tài liệu cho lớp đó. Những thứ như fullscreen, items, cls, style và v.v. Mọi thứ khác được xác định trong khối config đó là không cấu hình sẽ được lưu trữ trong instance.config.

Thay vào đó, bạn nên đặt những phương pháp bạn muốn ghi đè trong đối tượng cấu hình chính trong Ext.define:

Ext.define('MyApp.view.MyView', { 
    extend: 'Ext.Component', 

    config: { 
     cls: 'custom-cls', 
     html: 'Some html' 
    }, 

    initComponent: function() { 
     // do something 
    } 
}); 

Sencha cũng đã bị phản đối initComponent trong Sencha Touch 2,0. Khi bạn cần một phương thức được gọi khi lớp được khởi tạo, bạn nên sử dụng phương thức initialize. Xin lưu ý, lý tưởng là bạn không nên đặt cấu hình bên trong initialize trừ khi bạn thực sự cần. Bạn nên luôn đặt chúng bên trong khối config.

Cuối cùng, bạn có thể gọi phương thức mở rộng lớp bằng cách sử dụng:

this.callParent(arguments); 

Có một hướng dẫn về những thay đổi đối với hệ thống lớp giữa Ext JS 3.x và 4.x Ext JS sẵn here mà có thể giúp ích cho bạn. Ngoài ra còn có một hướng dẫn hệ thống lớp học được cập nhật cho Sencha Touch 2.x here.