Sencha touch 2

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

  0  

 Google +0  

   0
Đăng bởi: TheHalfHeart - Vào ngày: 07-08-2014 - Chuyên mục: Sencha Touch - View: 314
Để 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ụ:

1 2 3 4 5 6 7 8 9 10 11

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.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

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

1 2 3 4 5 6 7

// 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.

1 2 3 4 5 6 7 8

// 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ụ:

1 2 3 4 5 6 7 8

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:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

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ụ:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

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