Bài 04: Tìm hiểu Xtype Component 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: 293
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
- Ext.form.Panel
- Ext.form.FieldSet
- Ext.field.Checkbox
- Ext.field.Hidden
- Ext.field.Slider
- Ext.field.Text
- Ext.picker.Picker
- Ext.picker.Date
General components
- Ext.Panel
- Ext.tab.Panel
- Ext.Viewport
- Ext.Img
- Ext.Map
- Ext.Audio
- Ext.Video
- Ext.Sheet
- Ext.ActionSheet
- Ext.MessageBox
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ẻ.
Bài đăng
0 nhận xét:
Đăng nhận xét