Bài 06: Tìm hiểu đối tượng Xtype toolbar trong Sencha Touch

Tổng quan Ext.Toolbar

Trong các ví dụ ở bài trước chúng ta có sử dụng đối tượng Toolbar component và tôi đã đề nghị các bạn là làm theo vậy nên trong bài này chúng ta sẽ đi sâu tìm hiểu nó kỹ hơn chút xíu.

Ext.Toolbar (xtype toolbar) là một component thường hay sử dụng trong các ứng dụng Sencha Touch, nó dùng để tạo các tiêu đề của cửa sổ window và thường được thêm vào component container.

Cũng như các component khác để khai báo một Ext.toolbar ta làm như sau:

  var topToolbar = {
            xtype : "toolbar",
            title : "Danh sách người dùng",
            docked : "top", // Vị trí hiển thị toolbar trong container
            items : [] // Danh sách component được thêm vào
        };

Ví dụ:

Ext.application({
    name: 'user',
    launch: function() 
    {
        // Tạo tollbar
        var topToolbar = {
            xtype : "toolbar",
            title : "Danh sách người dùng",
            docked : "top", // Vị trí hiển thị toolbar trong container
            items : [] // Danh sách component được thêm vào
        };
        
        // Tạo container
        var container = {
            xtype : "container",
            items : [topToolbar] // Thêm toolbar vào container
        };
        
        // Hiển thị lên dt
        Ext.Viewport.add([container]);
    }
});
Khi chạy lên màn hình sẽ xuất hiện như sau:

Xác định vị trí hiển thị toolbar

Để xác định vị trí của toolbar trong container của sencha touch ta dựa vào thuộc tính docked của nó. Có 4 vị trí đó là top, bottom, left và right. Như ở ví dụ trên tôi đã chọn thuộc tính docked = "top", bây giờ các bạn thử thay đổi lần lượt sang left, right và bottom để kiểm tra xem nó sẽ hiển thị như thế nào.

Ví dụ:

Ext.application({
    name: 'user',
    launch: function() 
    {
        // Tạo tollbar
        var topToolbar = {
            xtype : "toolbar",
            title : "Danh sách người dùng",
            docked : "bottom", // Vị trí hiển thị toolbar trong container
            items : [] // Danh sách component được thêm vào
        };
        
        // Tạo container
        var container = {
            xtype : "container",
            items : [topToolbar] // Thêm toolbar vào container
        };
        
        // Hiển thị lên dt
        Ext.Viewport.add([container]);
    }
});
Và kết quả trên màn hình toolbar sẽ nằm ở dưới bottom:

Thêm button vào toolbar

Thông thường toolbar sẽ có các button để thao tác. Để thêm button vào toolbar ta chỉ cần tạo một button mới và gán vào danh sách items của toolbar.

Ví dụ:

Ext.application({
    name: 'user',
    launch: function() 
    {
        // Taoj button
        var button = {
            xtype : "button",
            text : "New User",
            ui : "action"
        };
        
        // Tạo tollbar
        var topToolbar = {
            xtype : "toolbar",
            title : "Danh sách người dùng",
            docked : "top", // Vị trí hiển thị toolbar trong container
            items : [button] // Them button vao toolbar
        };
        
        // Tạo container
        var container = {
            xtype : "container",
            items : [topToolbar] // Thêm toolbar vào container
        };
        
        // Hiển thị lên dt
        Ext.Viewport.add([container]);
    }
});    
Các bạn chạy đoạn code này lên sẽ thấy trên toolbar có một button xuất hiện

Giả sử mình muốn thêm một button Edit User nằm phía bên phải màn hình thì phải làm thế nào. Ở ví dụ trên các button luôn luôn lằm phía bên tay trái vậy làm sao để đẩy qua tay phải? để làm được điều này chúng ta sẽ sử dụng một đối tượng mới đó là Ext.spacer. Chúng ta sẽ thêm spacer rồi mới thêm button Edit User, đoạn code như sau:

Ext.application({
    name: 'user',
    launch: function() 
    {
        // Tao button add
        var add_button = {
            xtype : "button",
            text : "New User",
            ui : "action"
        };
        
        // Tao button edit
        var edit_button = {
            xtype : "button",
            text : "Edit User",
            ui : "action"
        };
        
        // Tao đối tượng spacer
        var spacer = {
            xtype : "spacer"
        };
        
        
        // Tạo tollbar
        var topToolbar = {
            xtype : "toolbar",
            title : "Danh sách người dùng",
            docked : "top", // Vị trí hiển thị toolbar trong container
            items : [add_button, spacer, edit_button] // Them button vao toolbar
        };
        
        // Tạo container
        var container = {
            xtype : "container",
            items : [{xtype:"spacer"},topToolbar] // Thêm toolbar vào container
        };
        
        // Hiển thị lên dt
        Ext.Viewport.add([container]);
    }
});                                             
Chạy đoạn code lên màn hình sẽ như sau:

Đối tượng spacer đã đẩy button Edit User sang phía tay phải, lý do là spacer đã chếm phần không gian phía trước của button Edit User. Ta có thể thay đổi chiều dài của Spacer thì button Edit User sẽ thay đổi vị trí theo. Ví dụ:

        // Tao đối tượng spacer
        var spacer = {
            xtype : "spacer",
            width: '50%' // xac dinh chieu dai cho spacer
        };
Các bạn chạy code lên và ngắm nghía nhé nó thay đổi như thế nào nhé =))

Lời Kết

Còn rất nhiều thứ để tìm hiểu nhưng phạm vi bài này tôi nghĩ chỉ bấy nhiêu là đủ để các bạn đọc không bị nhàm chán và dễ nhớ hơn. Những tùy chọn chuyên sâu hơn chúng ta sẽ tìm hiểu trong quá trình xây dựng dự án cần tới nó. Nếu các bạn muốn tìm hiểu sâu hơn thì lên trang document sencha touch để đọc.

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.