Bài 07: Tìm hiểu đối tượng Xtype Titlebar trong sencha touch

Cũng như đối tượng Ext.Toolbar trong Sencha Touch, Titlebar trong sencha touch dùng để hiển thị tiêu đề và ta cũng có thể thêm các button vào trong nó. Sự khác biệt chủ yếu giữa Titlebar và Toolbar trong Sencha Touch đó là đối với Titilebarcác button khi thêm vào ta có thể sử dụng các thông số align (left, right) để xác định vị trí của button nên đối tượng Spacer không có tác dụng đối với Titlebar, ngược lại đối với Toolbar các button thêm vào sẽ hiển thị từ trái qua phải, nếu ta button nằm ở phái bên phải thì phải sử dụng thêm đối tượng Spacer, các bạn có thể xem lại bài này để hiểu hơn đối tượng Toolbar trong sencha touch.

Xin nhắc lại với các bạn mỗi đối tượng chúng ta có một danh sách các items dùng để lưu các đối tượng ta muốn thêm vào đối tượng hiện tại.

Thêm titlebar trong sencha touch

Xét ví dụ:

Ext.application({
    name: 'user',
    launch: function() 
    {
        Ext.Viewport.add({
            xtype: 'titlebar',
            docked: 'top', // hoặc bottom, left, right
            title: 'Danh Sách Người Dùng',
            align : "left",
            items: [
                {
                    xtype : "button",
                    iconCls : "add", 
                    align: 'right' // hoặc left
                },
                {
                    xtype : "button",
                    iconCls : "home",
                    align: 'left' // hoặc right
                }
            ]
        });
    }
});
Để thêm một Toolbar vào Viewport ta sẽ dùng hàm Viewport.add để thêm. Trong ví dụ đưới đây tôi sẽ thêm một Toolbar và trong Toolbar tôi có thêm  2 button Add và Home.

Có lẽ các bạn hơi bỡ ngỡ trong đoạn code này tôi không khai báo các biến lưu trữ từng đối tượng nữa mà tôi thêm trực tiếp vào, đây cũng là một cách giúp ta nhìn gọn code hơn, các bạn hãy học thêm cách viết này trong đối tượng javascript nhé.

Trong mỗi button tôi có xác định class icon cho nó bằng cách thêm vào thuộc tính iconCls, có một số class có sẵn trong sencha touch, nếu ta muôn tự viết class icon thì ta viết trong file css rồi sửa ở iconCls này. Và một thuộc tính nữa đó là align, như trên tôi đã nói để xác định vị trí Button trong Toolbar ta dùng thuộc tính align cho mỗi button, các bạn lưu ý thuộc tính này không có tác dụng bên Toolbar nhé.

Chạy đoạn code này kết quả sẽ như sau:

Lời kết

Trong bài này vẫn còn thiếu rất nhiều thông tin về Titilebar trong Sencha Touch, nếu các bạn muốn tìm hiểu thêm thì hãy vào link này để tìm hiểu nhé. Bài này chỉ mang tính chất giới thiệu và cách sử dụng căn bản, mỗi ngày chúng ta tìm hiểu một chút rồi dồn lại các bạn sẽ có được một kho kiến thức. hẹn gặp lại các bạn ở bài tiếp theo

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.