Ext Js: Định nghĩa và khởi tạo Class

Trong bài viết này, chúng ta sẽ khám phá sự khác nhau về cú pháp khi định nghĩa class của Ext Js 3 và 4. Và bạn sẽ thấy được lợi ích khi dùng Ext Js 4.

Định nghĩa class

Để định nghĩa class, trong Ext Js 3, chúng ta kế thừa từ class Object:

MyApp.NewClass = Ext.extend(Object, {
//class functionalities here
});

Trong Ext Js 4, chúng ta định nghĩa theo cấu trúc sau:

Ext.define('MyApp.NewClass', {
//class functionalities here
});

Ext.extend là hàm cũ, và được khuyến khích sử dụng Ext.define để thay thế.

Kế thừa

        Ext.namespace('MyApp');
        MyApp.MyWindow = Ext.extend(Ext.Window, {
            title: 'Welcome!',
            initComponent: function () {
                Ext.apply(this, {
                    items: [
                        {
                            xtype: 'textfield',
                            name: 'tfName',
                            fieldLabel: 'Enter your name'
                        }
                    ]
                });
                MyApp.MyWindow.superclass.initComponent.apply(this, arguments);
            }
        });
        var win = new MyApp.MyWindow();
        win.show();

Trên đây là đoạn code của Ext Js 3. Nó bộc lộ điểm yếu là khi bạn quên khai báo namespace App, và chương trình sẽ bị crash khi định nghĩa Ext.Window.
Trong Ext Js 4, vấn đề này được giải quyết khi sử dụng Ext.define:

        Ext.define('MyApp.MyWindow', {
            extend: 'Ext.Window',
            title: 'Welcome!',
            initComponent: function () {
                this.items = [{
                    xtype: 'textfield',
                    name: 'tfName',
                    fieldLabel: 'Enter your name'
                }],
                this.callParent(arguments);
            }
        });
        var win = Ext.create('MyApp.MyWindow');
        win.show();

Bạn có thể ngạc nhiên là tại sao trong Ext Js 4 lại gọi tên class bằng chuỗi thay vì đối tượng. Việc sử dụng chuỗi trước hết giải quyết lỗi namespace ở trên. Thứ hai, Class Manager trong Ext Js sẽ kiểm tra: Ext.Window đã được định nghĩa hay chưa? Trường hợp chưa định nghĩa, thì ứng dụng sẽ trì hoãn việc tạo cửa sổ Ext.Window cho đến khi nó được định nghĩa.
Đây là cách rất hay, và bạn sẽ không phải lo lắng về thứ tự xuất hiện của các component. Framework Ext sẽ quản lý chuyện này.
Để truyền tham số từ subClass (lớp con) cho superClass (lớp cha), bạn dùng hàm this.callParent(arguments) thay vì dùng hàm MyApp.MyWindow.superclass.initComponent.apply(this, arguments)
Để tạo đối tượng, dùng từ khóa Ext.create thay cho từ khóa new.

Lưu ý:

• Ext.define là bí danh của hàm Ext.ClassManager.create
• Ext.create là bí danh của hàm Ext.ClassManager.íntantiate