Bài 04: Tìm hiểu Xtype Component trong sencha touch

Từ bài 1 đến nay các bạn đã thao tác với những lớp đối tượng như xtype button thì đó là những components của Sencha Touch và nó là một thành phần của  của đối tượng xtype component (Ext.component).

Mỗi đối tượng component đều có các đặc điểm chung như:

  • Hiển thị lên màn hình
  • Hiển thị hoặc ẩn
  • Sư dụng template trong sencha touch
  • Canh giữa so với màn hình
  • Nằm đè lên các component khác như Message box
  • Thay đổi kích thước
  • chọn nơi định vị ...
  • Các events .....

Và rất nhiều các đặc điểm nữa vì tôi không thể liệt kê hết được.

Các component có sẵn trong Sencha Touch

Có rất nhiều component có sẵn trong sencha touch và được quy tụ về 4 nhóm chính đó là

Navigation components

Store-bound components

Form components

General components

Trong một thời gian ngắn ta không thể nắm vững hết các components trên đó được mà chúng ta sẽ đi từ từ, trong loạt serie này tôi và các bạn sẽ đi từng component và học cách sử dụng nó, và đương nhiên chỉ ở mức căn bản chứ không thể tìm hiểu sâu tất cả các Events, method được. Các bạn phải tự lên trang documents của sencha để nghiên cứu thêm.

Tạo và hiển thị components

Cách 1: Sử dụng hàm Ext.create

Sencha touch cung cấp cho chúng ta một hàm gọi là Ext.create(name, config) để gọi các đối tượng components trong hệ thống. Trong đó name là tên đầy đủ của đối tượng component (Ext.Button. Ext.Panel), config là các thông số tùy chọn tùy vào từng component  mà có những tùy chọn khác nhau.

Ví dụ:

Ext.application({
    name: 'user',
    launch: function() 
    {
        //this is the Panel we'll be adding below
        var panel = Ext.create('Ext.Panel', {
            html: 'This is my panel'
        });

    }
});
Chạy ứng dụng lên kết quả sẽ là màn hình màu trắng không có gì. Lý do là vì Panel chưa được cấu hình hiển thị như thế nào nên nó bị ẩn, vì thế để hiển thị lên màn hình ta phải thêm một vài thông số cấu hình như sau:

Ext.application({
    name: 'user',
    launch: function() 
    {
        //this is the Panel we'll be adding below
        var panel = Ext.create('Ext.Panel', {
            html: 'This is my panel',
            fullscreen:true
        });

    }
});
Hoặc ta sẽ đưa nó vào Viewport của ứng dụng thay vì thiết lập thuộc tính fullscreen = true

Ext.application({
    name: 'user',
    launch: function() 
    {
        //this is the Panel we'll be adding below
        var panel = Ext.create('Ext.Panel', {
            html: 'This is my panel'
        });
        Ext.Viewport.add([panel]);
    }
});
Chạy ứng dụng lên trên màn hình sẽ có background hơi xám và có dòng chữ "This is my Panel"

Các thuộc tính của mỗi đối tượng chúng ta sẽ đi vào từng bài và tìm hiểu .

Cách 2: Dùng Alias xtype

Với cách này bắt buộc các bạn phải thêm nó vào đối tượng Ext.Viewport mới hiển thị lên màn hình. Như cách 1 trên thì ta dùng hàm Ext.create nên hàm này nó sẽ hiển thị luôn cho chúng ta. Còn cách này ta chỉ tạo một đối tượng component mới chứ chưa hiển thị ra màn hình.

Ví dụ dưới đây sẽ không xuất hiện trên màn hình

Ext.application({
    name: 'user',
    launch: function() 
    {
        var panel = {
            xtype : "panel",
            fullscreen:true,
            html : "This is my panel"
        };
    }
});
Ví dụ dưới đây sẽ xuất hiện trên màn hình

Ext.application({
    name: 'user',
    launch: function() 
    {
        var panel = {
            xtype : "panel",
            fullscreen:true,
            html : "This is my panel"
        };
        Ext.Viewport.add([panel]);
    }
});
Cách tạo các đối tượng component khác cũng tương tự như vậy, các bạn có thể tự tập làm trước hoặc đợi tới những bài tiếp theo chúng ta sẽ nghiên cứu từng component

Danh sách Xtype thông dụng

Dưới đây là danh sách các xtype thông dụng trong Sencha Touch

 xtype                   Class
 -----------------       ---------------------
 actionsheet             Ext.ActionSheet
 audio                   Ext.Audio
 button                  Ext.Button
 image                   Ext.Img
 label                   Ext.Label
 loadmask                Ext.LoadMask
 map                     Ext.Map
 panel                   Ext.Panel
 segmentedbutton         Ext.SegmentedButton
 sheet                   Ext.Sheet
 spacer                  Ext.Spacer
 titlebar                Ext.TitleBar
 toolbar                 Ext.Toolbar
 video                   Ext.Video
 carousel                Ext.carousel.Carousel
 navigationview          Ext.navigation.View
 datepicker              Ext.picker.Date
 picker                  Ext.picker.Picker
 slider                  Ext.slider.Slider
 thumb                   Ext.slider.Thumb
 tabpanel                Ext.tab.Panel
 viewport                Ext.viewport.Default

 DataView Components
 ---------------------------------------------
 dataview                Ext.dataview.DataView
 list                    Ext.dataview.List
 nestedlist              Ext.dataview.NestedList

 Form Components
 ---------------------------------------------
 checkboxfield           Ext.field.Checkbox
 datepickerfield         Ext.field.DatePicker
 emailfield              Ext.field.Email
 hiddenfield             Ext.field.Hidden
 numberfield             Ext.field.Number
 passwordfield           Ext.field.Password
 radiofield              Ext.field.Radio
 searchfield             Ext.field.Search
 selectfield             Ext.field.Select
 sliderfield             Ext.field.Slider
 spinnerfield            Ext.field.Spinner
 textfield               Ext.field.Text
 textareafield           Ext.field.TextArea
 togglefield             Ext.field.Toggle
 urlfield                Ext.field.Url
 fieldset                Ext.form.FieldSet
 formpanel               Ext.form.Panel

Kết thúc bài học

Bài này chỉ mang tính chất giới thiệu và tra cứu (xtype component, danh sách xtype) dành cho những bài tiếp theo vì thế các bạn có thể đọc sơ lược qua và làm theo các ví dụ là coi như ổn rồi. Ở những bài tiếp theo sẽ đi sâu vào từng component thay vì giới thiệu chung chung như thế này, mong các bạn theo dõi. Chúc các bạn đầu tuần vui vẻ.

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.