Bài 03: Tìm hiểu Xtype Button trong sencha touch

Để làm được các ví dụ trong bài này các bạn vui lòng quay lại bài 1 để xây dựng cấu trúc folder ứng dụng sencha touch để tạo những file cần thiết.

Giới Thiệu

xtype button là một định danh (alias) của lớp đối tượng Ext.Button, vì thế khi ta gọi đến xtype button tức là ta đang gọi đến lớp đối tượng Ext.Button. Đây là một class hiển thị button lên trình duyệt và cung cấp các sự kiện xử lý khi thao tác với button đó.

Với Sencha Touch Version 2.0.2 này thì class Ext.Button (xtype button) có tổng cộng 58 configs, 155 methods và 25 events. Các bạn vào link này để tham khảo thêm

Hiển thị một button

Để hiển thị button lên giao diện thì các bạn phải thông qua thao tác sau:

1. Tạo button
2. Thêm button lên giao diện

Và các bạn phải biết đến Viewport, ở đây ta có thể hiểu Viewport là cái điện thoại và ta muốn hiển thị những cái gì thì chỉ cần thêm nó vào cái điện thoại (Viewport). Viewport cung cấp cho ta hàm add để thêm các đối tượng vào giao diện.

Ví dụ:

Ext.application({
    name: 'user',
    launch: function() 
    {
        var button = {
            xtype : "button",
            text : "Click Me"
        };
        Ext.Viewport.add(button);
    }
});
Khi các bạn chạy ví dụ này lên sẽ xuất hiện một cái button to đùng chiếm hết cả màn hình. đấy là tại vì chúng ta thêm vào mà không xác định vị trí cho button này. Để xác định vị trí cho button thì chúng ta phải dùng một mẹo đó là tạo một đối tượng khác rồi thêm button vào. Bây giờ  ta sẽ dùng đối tượng container nhé, đây là một khung chứa các control.

Ext.application({
    name: 'user',
    launch: function() 
    {
        // Khai bao button
        var button = {
            xtype : "button",
            text : "Click Me"
        };
        
        // Khai bao container
        var container = {
            xtype : "container",
            items : [button] // them button vao container
        };
        
        Ext.Viewport.add(container);
    }
});
Chạy đoạn code này lên thì button sẽ nằm ở trên cùng thay vì nó chiếm hết cả màn hình, lý do là nó được thêm vào container và sau đó Viewport add container thay vì add button.

Tùy chỉnh Icon hiển thị

Thuộc tính iconCls dùng để tùy chọn hinh dạng icon. Ví dụ hiển thị icon refresh

// Khai bao button
        var button = {
            xtype : "button",
            text : "New",
            iconCls : "refresh",
            scope : this
        };
Đây là danh sách các icon có trong sencha touch

  • action
  • add
  • arrow_down
  • arrow_left
  • arrow_right
  • arrow_up
  • compose
  • delete
  • organize
  • refresh
  • reply
  • search
  • settings
  • star
  • trash
  • maps
  • locate
  • home

Hiển thị đoạn text trên Top Button

Để hiển thị một đoạn text trên top button ta thêm đoạn text cần hiển thị vào thuộc tính badgeText.

// Khai bao button
        var button = {
            xtype : "button",
            text : "New",
            iconCls : "refresh",
            badgeText: 'Mot hay ba bon nam',
            scope : this
        };

Thay đổi hình dạng, màu sắc button

Đối tượng Button cung cấp cho chúng ta một thuộc tính tên là ui (user interface) và các giá trị để ta lựa chọn. Ví dụ:

var button = {
            xtype : "button",
            text : "New",
            iconCls : "refresh",
            badgeText: 'Mot hay ba bon nam',
            ui : "action",
            scope : this
        };
Dưới đây là danh sác các giá trị của thuộc tính này

  • normal
  • back
  • forward
  • round
  • action
  • decline
  • confirm

Để hấp dẫn các bạn hãy tự sửa code và chạy thử và xem kết quả nhé =))

Sự kiện click vào button

Sự kiện click trong lập trình di động ta sẽ gọi là sự kiện tap. Để thêm sự kiện tap cho button ta làm như sau:

Ext.application({
    name: 'user',
    launch: function() 
    {
        // Khai bao button
        var button = {
            xtype : "button",
            text : "New",
            ui : "action",
            // su kien tap
            handler : function (){alert('Tap');},
            scope : this
        };
        
        // Khai bao container
        var container = {
            xtype : "container",
            items : [button] // them button vao container
        };
        
        Ext.Viewport.add(container);
    }
});
hàm handler sẽ gọi khi ta tab vào button này, và nội dung của hàm này là alert lên một đoạn text.

Hoặc bạn đặt sự kiện tap trong danh sách listeners của button này, ví dụ:

Ext.application({
    name: 'user',
    launch: function() 
    {
        // Khai bao button
        var button = {
            xtype : "button",
            text : "New",
            ui : "action",
            // su kien tap
            scope : this,
            listeners : {
                tap : function (){alert('Tap');},
                resize: function (){alert("Resize");}
            }
            
        };
        
        // Khai bao container
        var container = {
            xtype : "container",
            items : [button] // them button vao container
        };
        
        Ext.Viewport.add(container);
    }
});
Ở đoạn code này tôi đã truyền vào 2 sự kiện là tap và khi trình duyệt kéo giãn (resize).

Lời kết

Trên đây chỉ là những thuộc tính hết sức căn bản, vẫn còn rất rất nhiều các phương thức, thuộc tính khác mà trong bài này không thể đề cập hết được. Bài này chỉ mang tính chất hướng dẫn và giới thiệu các bạn đối tượng button trong Sencha Touch nên các bạn vào document của Sencha Touch để xem đầy đủ hơn nhé. Bài tiếp theo ta sẽ tìm hiểu đối tượng component trong secha 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 Facebook để được hỗ trợ nhanh nhất.