Bài 02: Tìm hiểu Ext singleton trong sench touch

Ext là một global namespace của Sencha Touch Framwork. Tất cả các classs, function hay các thông số configuration của ứng dụng sencha đều nằm trong đối tượng này, vì thế ta có thể gọi Ext là một lớp toàn cục mà trong đó có những thuộc tính, phương thức. Cũng như các framwork khác như Codeigniter, ... trong Ext cũng có rất nhiều các thư viện, helper giúp chúng ta xây dựng chương trình một cách nhanh nhất và tối ưu nhất.

Ext namespace có tổng cộng hơn 60 phương thức vì thế tôi không thết liệt kê hết ở đây được, tôi chỉ đề cập đến một phương thức hay sử dụng và là sự khởi đầu cho một ứng dụng đó là Ext.application.

Trong bài này chúng ta sẽ tìm hiểu những function có sẵn trong đối tượng này và thực hành theo nó. Và chúng ta sẽ dựa vào cấu trúc folder ở bài trước để thực hành, vì thế nếu các bạn chưa đọc bài đó thì quay lại đọc đi nhé.

Ext.application

Đây là function gọi đến đối tượng Ext.app.Application và đối tượng này sẽ chạy ứng dụng của chúng ta. Function này cũng có những thông số cấu hình để chúng ta thiết lập.

Cú pháp: Ext.application( config)

Trong đó config gồm các thông số cấu hình hay sử dụng như  ví dụ sau:

Ext.application({
    name: 'user',
    models: [],
    stores: [],
    controllers: [],
    views: [],
    requires: [],
    launch: function() {
        Ext.Viewport.add({
            xtype: 'container',
            items : [
                {
                    xtype : "button",
                    text : "New",
                    ui : "action",
                    scope: this
                }
            ]
        });
    }
});
Khi chạy lên màn hình sẽ xuất hiện một button như thế này

Vậy các thông số trong đó hoạt động như thế nào mà có thể làm được như vậy ? Chúng ta sẽ đi tìm hiểu từng dòng code trong đó.

Tất cả các thông số đều đặt trong một đối tượng (nằm trong cặp dấu ngoặc nhọn {}).

Đây là dòng đặt tên cho ứng dụng, ở đây tôi đặt tên là user

name: 'user',
Những dòng khai báo các controller, view, store, model, mỗi lớp con (model, view, controller, store) sẽ là một phần tử trong mảng tương ứng đó, ví dụ:  view : ["mainview","supview"].

models: [],
    stores: [],
    controllers: [],
    views: [],
Dòng này sẽ khai báo những lớp bắt buộc phải dùng trong ứng dụng, nếu chúng ta khai báo ở đây thì nó sẽ load thư viện sencha touch tương ứng với thư viện chúng ta khai báo. Điều này rất hay vì ta chỉ load những thư viện cần thiết trong dụng và giúp ứng dụng chạy nhanh hơn thay vì phải load một cụm toàn bộ thư viện.

requires: [],
Đoạn mã này căng nhất. Hàm launch sẽ được gọi đầu tiên khi trang web được load xong. Nội dung bên trong hàm này là thêm một button vào màn hình, các bạn hãy hình dung cả màn hình điện thoại ta sẽ gọi nó là một Viewport và ta muốn thêm gì vào màn hình thì sẽ dùng hàm Ext.Viewport.add.

launch: function() {
        Ext.Viewport.add({
            xtype: 'container',
            items : [
                {
                    xtype : "button",
                    text : "New",
                    ui : "action",
                    scope: this
                }
            ]
        });
    }
Tất cả những đối tượng trong Ext đều phải khai báo ở dạng đối tượng, như ở trên tôi đã add một đối tượng với xtype là container, container là một kiểu dùng để chứa các đối tượng khác, và muốn đối tượng khác nằm trong container thì ta sẽ đặt nó trong biến items, và cũng tuân theo quy luật này bên trong items tôi định nghĩa một đối tượng button (xtype : "button"), như vậy luồng làm việc sẽ là:

1. Tạo một đối tượng button
2. Tạo một container và add button vào container
3. Đưa container vào Viewport và hiển thị ra màn hình

Ta có thể viết lại ví dụ cho các bạn dễ hình dung như sau:

Ext.application({
    name: 'user',
    models: [],
    stores: [],
    controllers: [],
    views: [],
    requires: [],
    launch: function() 
    {
        // Tao moi button
        var button = {
            xtype : "button",
            text : "New",
            ui : "action",
            scope: this
        };
        
        // Tao container va add button vao container
        var container = {
            xtype: 'container',
            items: [button]
        };
        
        // Hien thi container tren man hinh
        Ext.Viewport.add(container);
    }
});
Qua phần comment tôi sẽ không giải thích gì thêm

Kết thúc bài học

Trong bài học này các bạn phải hiểu được ý nghĩa của đối tượng Ext.application và hiểu được ví dụ mà tôi đưa ra. các bạn chỉ cần gõ theo và hiểu luồng làm việc chứ chưa cần phải hiểu từng dòng code, vì khi các bạn gõ dần dần các bạn sẽ tự hiểu ra. Bài tiếp theo ta sẽ tìm hiểu đối tượng button trong sencha touch.

 

Hãy để lại link bài viết gốc khi chia sẻ bài viết này, mình sẽ report DMCA với những website lấy nội dung mà không để nguồn hoặc copy bài với số lượng lớn.

Nguồn: freetuts.net

Profile photo of adminTheHalfHeart

TheHalfHeart

Có sở thích viết tuts nên đã từng tham gia viết ở một số diễn đàn, đến năm 2014 mới có điều kiện sáng lập ra freetuts.net. Sinh năm 90 và có 1 vợ 2 con, thích ca hát và lập trình.

ĐĂNG BÌNH LUẬN: Đăng câu hỏi trên Group Facebook để được hỗ trợ nhanh nhất.