Using Components in senchaTouch2.docx
- 文档编号:18536121
- 上传时间:2023-08-19
- 格式:DOCX
- 页数:10
- 大小:40.66KB
Using Components in senchaTouch2.docx
《Using Components in senchaTouch2.docx》由会员分享,可在线阅读,更多相关《Using Components in senchaTouch2.docx(10页珍藏版)》请在冰点文库上搜索。
UsingComponentsinsenchaTouch2
UsingComponentsinSenchaTouch2
翻译者:
郭玉潮
(为了方便书写,本文中约定senchatouch2简写为ST2。
)
WhatisaComponent?
在ST2中,那些我们可见的类几乎都是组件,他们都是Ext.Component的子类,这就意味着他们都必将有以下的功能:
1.可以利用template在页面上渲染自己。
2.随意的显示或者隐藏自己。
3.可以将自己放置到屏幕的中间。
4.可以改变自己是否可用。
除此之外,他们还能实现一些比较高级的功能:
1.漂浮在其他组件上面。
2.带有动画效果的来改变自己的大小和位置。
3.将其他组件停靠在自己的内部。
4.和其他组件对齐,或者允许被拖拽等。
WhatisaContainer?
我们创建的每一个组件都包括了上面的这些功能,但是我们的一个应用程序通常有很多的组件组成,并且会经常的嵌套。
Container其实也是一个Component,只不过它是比较特殊的Component,就像一个容器一样,可以放置其他的组件在它里面。
大多数的应用程序都有一个顶级的Container,叫做Viewport,它将占满这个屏幕。
其他的组件都会作为它的子组件,被填充到Viewport中。
Container里面有一些函数,可以帮助我们实现我们的逻辑:
包括组件的添加和移除,还有整个Container的布局等等。
Layout,也就是布局,决定了各个组件在一个容器里面的位置。
关于Layout的讲解,可以参考我翻译的其他文章。
InstantiatingComponents
在ST2中,组件的创建和其他类的创建,可以使用相同的方法:
Ext.create。
下面我们就来看看,如何创建一个简单的panel:
varpanel=Ext.create('Ext.Panel',{
html:
'Thisismypanel'
});
上面的代码将创建一个panel的实例,只包括了最简单的HTML内容。
panel只是一个最简单的组件,它可以渲染HTML内容,并且可以作为其他组件的容器。
虽然我们创建了一个Panel的实例,但是它并不会马上在屏幕上显示出来,那是因为在我们实例化之后,并不会马上渲染。
这就允许我们可以创建一些其他的组件,然后将他们放置到panel中,然后开始渲染,这样比渲染完之后再放置组件会快很多的。
我们可以利用全局的变量Viewport来将上面创建的组件显示在屏幕上:
Ext.Viewport.add(panel);
其实panel也是一个容器,现在让我们来看看panel这个容器的简单用法吧:
varpanel=Ext.create('Ext.Panel',{
layout:
'hbox',
items:
[
{
xtype:
'panel',
flex:
1,
html:
'LeftPanel,1/3rdoftotalsize',
style:
'background-color:
#5E99CC;'
},
{
xtype:
'panel',
flex:
2,
html:
'RightPanel,2/3rdsoftotalsize',
style:
'background-color:
#759E60;'
}
]
});
Ext.Viewport.add(panel);
我们创建了一个panel容器,它的布局方式是hbox的,它包括了两个子项(通过items来设置的),最后将panel显示在屏幕上了。
这个例子还是比较简单了,我就不详细解释了,主要说说它的渲染或者说是加载过程吧:
首先创建一个panel容器,然后通过xtype创建两个子组件(xtype是创建组件的一个快捷方式,就相当于create的简写),然后我们指定panel容器的布局,也就是这两个item在容器中的位置。
最后我们开始将整个容器渲染。
ConfiguringComponents
其实,我们在定义一个组件的时候,可以在config中进行我们需要的配置,这样,在创建组建的时候,就会按照我们配置好的组件进行渲染了。
不过有时候,我们同样可以对定义的组件进行修饰,下面我们就来看一些简单的例子:
/wecanconfiguretheHTMLwhenweinstantiatetheComponent
varpanel=Ext.create('Ext.Panel',{
fullscreen:
true,
html:
'ThisisaPanel'
});
//wecanupdatetheHTMLlaterusingthesetHtmlmethod:
panel.setHtml('SomenewHTML');
//wecanretrievethecurrentHTMLusingthegetHtmlmethod:
alert(panel.getHtml());//alerts"SomenewHTML"
对于每一个config都有相应的getter和setter方法,来从外部改变我们的config项,具体的config项,可以在api文档中自行查找。
Usingxtype
上面我们已经简单实用了xtype,下面我们就来详细的讲解一下xtype吧。
我们在创建class的时候,我们必须要给create传入类名的完整名字,但是我们使用xtype的话,就不需要了,我们只需要告诉框架他的xtype是什么,框架就会自动为我们创建的。
我们在Container中使用的时候,就会显得格外简单了,看下面的例子:
Ext.create('Ext.Container',{
fullscreen:
true,
layout:
'fit',
items:
[
{
xtype:
'panel',
html:
'Thispaneliscreatedbyxtype'
},
{
xtype:
'toolbar',
title:
'Soisthetoolbar',
dock:
'top'
}
]
});
我们只需要告诉框架,我们的xtype是什么,如果是我们自己定义的xtype的话,需要在前面requires中引入。
这样就非常方便的实现了创建,其实这些都是框架给我们封装好的。
Listofxtypes
xtypeClass
--------------------------------------
actionsheetExt.ActionSheet
audioExt.Audio
buttonExt.Button
componentExt.Component
containerExt.Container
imageExt.Img
labelExt.Label
loadmaskExt.LoadMask
mapExt.Map
maskExt.Mask
mediaExt.Media
panelExt.Panel
segmentedbuttonExt.SegmentedButton
sheetExt.Sheet
spacerExt.Spacer
titleExt.Title
titlebarExt.TitleBar
toolbarExt.Toolbar
videoExt.Video
carouselExt.carousel.Carousel
carouselindicatorExt.carousel.Indicator
navigationviewExt.navigation.View
datepickerExt.picker.Date
pickerExt.picker.Picker
pickerslotExt.picker.Slot
sliderExt.slider.Slider
thumbExt.slider.Thumb
tabbarExt.tab.Bar
tabpanelExt.tab.Panel
tabExt.tab.Tab
viewportExt.viewport.Default
DataViewComponents
---------------------------------------------
dataviewExt.dataview.DataView
listExt.dataview.List
listitemheaderExt.dataview.ListItemHeader
nestedlistExt.dataview.NestedList
dataitemEponent.DataItem
FormComponents
---------------------------------------------
checkboxfieldExt.field.Checkbox
datepickerfieldExt.field.DatePicker
emailfieldExt.field.Email
fieldExt.field.Field
hiddenfieldExt.field.Hidden
inputExt.field.Input
numberfieldExt.field.Number
passwordfieldExt.field.Password
radiofieldExt.field.Radio
searchfieldExt.field.Search
selectfieldExt.field.Select
sliderfieldExt.field.Slider
spinnerfieldExt.field.Spinner
textfieldExt.field.Text
textareafieldExt.field.TextArea
textareainputExt.field.TextAreaInput
togglefieldExt.field.Toggle
urlfieldExt.field.Url
fieldsetExt.form.FieldSet
formpanelExt.form.Panel
AddingComponentstoContainers
正如我们上面提到的,Container是比较特殊的组件,因为它可以作为容器来放置其他的组件的。
我们在上面的例子里面创建了两个panel然后添加到一个panel中,其实我们也可以这样实现的:
//thisisthePanelwe'llbeaddingbelow
varaboutPanel=Ext.create('Ext.Panel',{
html:
'Aboutthisapp'
});
//thisisthePanelwe'llbeaddingto
varmainPanel=Ext.create('Ext.Panel',{
fullscreen:
true,
layout:
'hbox',
defaults:
{
flex:
1
},
items:
{
html:
'FirstPanel',
style:
'background-color:
#5E99CC;'
}
});
//nowweaddthefirstpanelinsidethesecond
mainPanel.add(aboutPanel);
我想大家看代码就明白是什么意思了。
首先我们创建了一个aboutPanel,然后我们创建了一个mainPanel,其中已经包括了一个子组件,然后我们通过add函数向mainPanel中添加我们创建的aboutPanel。
同样我们也可以使用remove函数将组件从容器中移除:
mainPanel.remove(aboutPanel);
ShowingandHidingComponents
在ST2,我们可以轻松的显示或者隐藏一个组件的:
mainPanel.hide();
我们隐藏了mainPanel组件,它内部的组件也会被隐藏。
mainPanel.show();
同样,在显示组件的时候,也会是内部的子组件显示出来。
Events
每一个组件可能触发一定的事件的,我们可以对这些事件进行监听,然后在触发事件的时候实现我们需要的逻辑功能的。
例如,当一个Textfield输入的时候,都会触发它的change事件。
我们可以通过配置listeners来实现事件的监听。
Ext.create('Ext.form.Text',{
label:
'Name',
listeners:
{
change:
function(field,newValue,oldValue){
myStore.filter('name',newValue);
}
}
});
每一次,当textfield的内容改变的时候,都将触发change事件,此时将调用我们定义的函数了。
ST2的组件可以触发很多的事件的,我们可以在这些事件中定义好我们的逻辑,实现我们的应用程序需要的功能。
当我们的组件创建之后,我们同样可以指定这些事件的。
例如:
假如我们有个仪表盘来实时显示投票,但是我们并不想当它不可见时还进行监听,那么我们可以这样做:
dashboard.on({
hide:
MyApp.stopPolling,
show:
MyApp.startPolling
});
每一个组件都有一系列的事件,你可以查看相关的api文档的。
Docking
ST2中,我们可以将组件停靠在容器的某些位置,例如,我们可以使用hbox布局,将一个标题放置在顶部:
DestroyingComponents
我们的ST2是专门为移动设备开发的框架,所以我们一定要考虑的就是移动设备有限的内存空间。
当我们不需要一个组件的时候,将它销毁就显得十分有必要了。
销毁一个组件的代码很简单的:
mainPanel.destroy();
这将吧mainPanel从DOM中移除,并且移除它所设置的事件监听,以及自组件,并调用子组件的destroy方法来销毁子组件。
一旦销毁之后,在DOM中就不再存有它了,所以任何指向它的引用都是非法的了。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Using Components in senchaTouch2