Bài 05: Tìm hiểu Xtype container trong sencha touch

Container Sencha Touch là một đối tượng component đặc biệt trong Sencha Touch, nó có đầy đủ các tính chất của một component và các component khác có thể được thêm vào trong container này.

Khi các bạn làm giao diện web thì thường các bạn tạo một thẻ div để bao quanh  và nó được gọi là container, bên trong container thường tạo các block header, footer, sidebar.... Trong Sencha cũng vậy đối tượng container dùng để bao quanh ứng dụng và ta có thể thêm các đối tượng component khác để hiển thị nội dung theo yêu cầu của ứng dụng.

Thêm một component vào container

Trong ví dụ này tôi sẽ thêm một thanh Toolbar nằm trên cùng của container.

Ext.application({
    name: 'user',
    launch: function() 
    {
        // Tạo tollbar
        var topToolbar = {
            xtype : "toolbar",
            title : "Danh sách người dùng",
            docked : "top"
        };
        
        // Tạo container
        var container = {
            xtype : "container",
            items : [topToolbar]
        };
        
        // Hiển thị lên dt
        Ext.Viewport.add([container]);
    }
});
Dòng code tạo toolbar dưới đây vì chưa học nên các bạn cứ code như vậy đừng quan tâm đến nó nhé, chúng ta sẽ tìm hiểu nó ở một bài nào đó tiếp theo.

// Tạo tollbar
        var topToolbar = {
            xtype : "toolbar",
            title : "Danh sách người dùng",
            docked : "top"
        };
Dòng code tạo container dưới đây tôi chọn xtype là container và trong items tôi add toolbar vào

// Tạo container
        var container = {
            xtype : "container",
            items : [topToolbar]
        };
Cuối cùng thêm Container vào Ext.Viewport để hiển thị ra màn hình

// Hiển thị lên dt
        Ext.Viewport.add([container]);
Chạy đoạn code này lên trên màn hình sẽ xuất hiện như hình bên dưới

Thêm một button vào container

Trong bài Ext Singleton tôi đã demo thêm một button vào container và nó hiển thị full màn hình. Trong bài này chúng ta sẽ thêm một button vào container bằng cách thêm nó vào ở một vị trí nào đó, và tôi chọn toolbar là nơi sẽ thêm button. Các bạn xem ví dụ sau:

Ext.application({
    name: 'user',
    launch: function() 
    {
        // Tạo Button
        var newButton = {
            xtype : "button",
            text : "New User",
            ui : "action"
        };
        
        // Tạo tollbar
        var topToolbar = {
            xtype : "toolbar",
            title : "Danh sách người dùng",
            docked : "top",
            items : [newButton]
        };
        
        // Tạo container
        var container = {
            xtype : "container",
            items : [topToolbar]
        };
        
        // Hiển thị lên dt
        Ext.Viewport.add([container]);
    }
});
Trong ví dụ này tôi đã tạo một button và đưa nó vào toolbar, sau đó tôi đưa toolbar vào trong container và cuối cùng là hiển thị ra màn hình. Qua ví dụ này các bạn có thể thấy muốn thêm một container khác vào trong container hiện tại thì chỉ cần đặt nó vào trong danh sách items của đối tượng được thêm.

Chạy chương trình này lên trên màn hình sẽ xuất hiện như bên dưới

Kết Thúc Bài Học

Trong container có rất nhiều thuộc tính và phương thức khác, các bạn lên trang chủ documents của Sencha touch và tìm hiểu thêm nhé, vì trong serie này tôi muốn cho các bạn hiểu những gì đơn giản nhất thông qua ví dụ chứ không nói lý thuyết một mạch rồi các bạn không nắm được gì

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 Facebook để được hỗ trợ nhanh nhất.