Sencha Touch 2 使用视图.docx
《Sencha Touch 2 使用视图.docx》由会员分享,可在线阅读,更多相关《Sencha Touch 2 使用视图.docx(14页珍藏版)》请在冰豆网上搜索。
![Sencha Touch 2 使用视图.docx](https://file1.bdocx.com/fileroot1/2023-4/29/78475a23-7d21-4a29-8dbb-f1404c251624/78475a23-7d21-4a29-8dbb-f1404c2516241.gif)
SenchaTouch2使用视图
前言:
视图[View]是MVC应用程序的脸面,不管你的应用程序设计如何,用户都只能看到眼前的视图,因此对你的评价也只能通过对视图的体验来得到。
因此无论如何,一定要用心去设计你的视图。
这篇文章的英文原址是
原文标题是:
UsingViewsinyourApplications(在应用程序中使用视图)。
在官方文档目录中,它事实上的地位是MVC概述之后开篇三板斧之一,鉴于SenchaTouchMVC的特点,这三板斧的介绍顺序是倒过来的,先C控制器再V视图最后才是M数据模型,但是其重要性却不分先后。
SenchaTouch交流QQ群213119459欢迎您的加入。
UsingViewsinyourApplications
在应用程序中使用视图
注:
为方便起见,文中所有出现SenchaTouch的地方均以ST简写替代。
Fromtheuser'spointofview,yourapplicationisjustacollectionofviews.AlthoughmuchofthevalueoftheappisintheModelsandControllers,theViewsarewhattheuserinteractswithdirectly.Inthisguidewe'regoingtolookathowtocreatetheviewsthatbuildyourapplication.
从用户的视角来看,你的应用程序就是一堆视图的集合,尽管应用程序大部分有价值的东西都在数据模型和控制器里,但视图才是直接跟用户互动的东西。
这篇指南将带我们学习如何创建视图来搭建应用程序。
UsingExistingComponents
使用现存组件
TheeasiestwaytocreateaviewistojustuseExt.createwithanexistingComponent.Forexample,ifwewantedtocreateasimplePanelwithsomeHTMLinsidewecanjustdothis:
最简单的方法是使用Ext.create来创建一个ST中现存的内置组件,这同样也是一个视图。
例如我们只想要创建一个包含简单html代码的Panel,我们可以这么做:
Ext.create('Ext.Panel',{
html:
'Welcometomyapp',
fullscreen:
true
});
ThissimplycreatesaPanelwithsomehtmlandmakesitfillthescreen.Youcancreateanyofourbuilt-incomponentsthiswaybutbestpracticeistocreateasubclasswithyourspecializationsandthencreatethat.Thankfullythat'ssimpletoo:
上述例子将会创建一个包含html代码的Panel并使其充满屏幕。
你可以用这种方法创建任意内置组件,不过最好的方式还是专门创建一个(内置组件的)子类,然后再来创建这个(定制后的)子类的实例。
幸好这也不是什么麻烦事儿。
Ext.define('MyApp.view.Welcome',{
extend:
'Ext.Panel',
config:
{
html:
'Welcometomyapp',
fullscreen:
true
}
});
Ext.create('MyApp.view.Welcome');
Theoutcomeisthesame,butnowwehaveabrandnewcomponentthatwecancreateanynumberoftimes.Thisisthepatternwe'llnormallywanttofollowwhenbuildingourapp-createasubclassofanexistingcomponentthencreateaninstanceofitlater.Let'stakealookthroughwhatwejustchanged:
上述代码的结果是一样的,但是我们现在有了一个自己命名的新组件,而且以后我们还可以多次使用这个新组件。
这才是我们推荐的应用开发模式:
创建一个现存组件的子类然后再创建该子类的实例。
我们来看一下这种方式跟前面相比有哪些变化:
●Ext.defineallowsustocreateanewclass,extendinganexistingone(Ext.Panelinthiscase)
Ext.define允许我们通过继承一个存在的类(此例中是Ext.Panel)来创建一个新类。
●WefollowedtheMyApp.view.MyViewconventionforournewviewclass.Youcannameitwhateveryoulikebutwesuggeststickingwithconvention
遵循MyApp.view.MyView的常规来给新视图命名,我们也推荐你这样做,而不要随心所欲
●Wedefinedconfigforthenewclassinsideaconfigobject
我们使用config对象为新类定义它自己的参数
AnyoftheconfigoptionsavailableonExt.Panelcannowbespecifiedineitherournewclass'sconfigblockorwhenwecometocreateourinstance.Whendefiningasubclassbesuretousetheconfigobject,whencreatingjustpassinanobject.
此时Ext.Panel的所有有效config属性都可以在新类的config配置块中进行定义或者在创建实例时传入使用了。
定义子类的时候务必使用config对象(其实就是用{}包裹的一系列配置参数的集合),创建的时候也可以传入一个config对象集合。
Forexample,here'sthesamecodeagainbutwithadditionalconfigurationpassedinwithourExt.createcall:
下面的例子只在刚才代码基础之上,在Ext.create时传入了一个新的配置参数。
Ext.define('MyApp.view.Welcome',{
extend:
'Ext.Panel',
config:
{
html:
'Welcometomyapp',
fullscreen:
true
}
});
Ext.create('MyApp.view.Welcome',{
styleHtmlContent:
true
});
ARealWorldExample
一个更贴近现实的例子
ThisisoneoftheviewclassesfromourTwitterapp:
这个视图类来自于我们的Twitter应用:
Ext.define('Twitter.view.SearchBar',{
extend:
'Ext.Toolbar',
xtype:
'searchbar',
requires:
['Ext.field.Search'],
config:
{
ui:
'searchbar',
layout:
'vbox',
cls:
'big',
items:
[
{
xtype:
'title',
title:
'TwitterSearch'
},
{
xtype:
'searchfield',
placeHolder:
'Search...'
}
]
}
});
Thisfollowsthesamepatternasbefore-we'vecreatedanewclasscalledTwitter.view.SearchBar,whichextendstheframework'sExt.Toolbarclass.Wealsopassedinsomeconfigurationoptions,includingalayoutandanitemsarray.
它遵循前面提到的规则,创建了一个继承框架Ext.Toolbar类的新子类,命名为Twitter.view.SearchBar,我们给它传入一些配置参数,其中包含了一个layout属性和items数组。
We'veusedacoupleofnewoptionsthistime:
这次我们使用了两个新的参数:
●requires-becausewe'reusingasearchfieldinouritemsarray,wetellournewviewtorequiretheExt.field.Searchclass.Atthemomentthedynamicloadingsystemdoesnotrecognizeclassesspecifiedbyxtypesoweneedtodefinethedependencymanually
requires——由于我们在items数组中使用了一个searchfield,因此要告诉视图require(引用)Ext.field.Search类。
之所以要这样做是因为此时的系统自动加载功能还无法通过xtype识别这个类(Twitter.view.SearchBar),所以我们不得不手动定义这个依赖项。
●xtype-givesournewclassitsownxtype,allowingustoeasilycreateitinaconfigurationobject(justlikewedidwithsearchfieldabove)
xtype——给我们的新类一个自己的xtype,这样以后就可以轻松地通过配置参数轻松的创建它了。
Thisallowsustocreateinstancesofournewviewclassinacoupleofways:
以后我们就可以通过两种方式来创建新视图(Twitter.view.SearchBar)的实例了。
//createsastandaloneinstance
//创建一个独立的实例
Ext.create('Twitter.view.SearchBar');
//alternatively,usextypetocreateournewclassinsideaPanel
//或者我们在一个Panel中通过xtype方式来创建它
Ext.create('Ext.Panel',{
html:
'Welcometomyapp',
items:
[
{
xtype:
'searchbar',
docked:
'top'
}
]
});
CustomConfigurationsandBehavior
自定义配置和行为
SenchaTouch2makesextensiveuseoftheconfigurationsystemtoprovidepredictableAPIsandkeepthecodecleanandeasilytestable.Westronglysuggestyoudothesameinyourownclasses.
ST2广泛应用了configuration系统来提供可控性好的API并保持代码简洁和容易测试。
我们强烈建议你在自己的类里面也这么做。
Let'ssayyouwanttocreateaimageviewerthatpopsupinformationabouttheimagewhenyoutaponit.Ouraimistocreateareusableviewthatcanbeconfiguredwiththeimageurl,titleanddescription,anddisplaysthetitleanddescriptionwhenyoutaponit.
假设你要创建一个图片浏览视图,当它被点击的时候会弹出该图片的信息。
那么我们当然希望这个视图有很好的重用性,你可以配置图片url、标题、描述属性,并且当点触的时候会自动把标题和描述弹出来。
MostoftheworkarounddisplayingimagesistakencareofforusbytheExt.Imgcomponent,sowe'llsubclassthat:
Ext.Img组件已经围绕图片展示功能做了大量的工作,因此我们继承它既可:
Ext.define('MyApp.view.Image',{
extend:
'Ext.Img',
config:
{
title:
null,
description:
null
},
//setsupourtapeventlistener
//设置点击事件监听器
initialize:
function(){
this.callParent(arguments);
this.element.on('tap',this.onTap,this);
},
//thisiscalledwheneveryoutapontheimage
//每当你点触屏幕的时候就会调用这个函数
onTap:
function(){
Ext.Msg.alert(this.getTitle(),this.getDescription());
}
});
//createsafullscreentappableimage
//创建一个全屏的可点击的图片
Ext.create('MyApp.view.Image',{
title:
'OrionNebula',
description:
'TheOrionNebulaisratherpretty',
src:
'http:
//apod.nasa.gov/apod/image/1202/oriondeep_andreo_960.jpg',
fullscreen:
true
});
We'readdingtwomoreconfigurationstoourclass-titleanddescription-whichbothstartoffasnull.Whenwecreateaninstanceofournewclasswepassthetitleanddescriptionconfigsinjustlikeanyotherconfiguration.
我们给自己的类增加了两个新的配置参数:
title和description,初始都默认为null。
当我们创建这个新类的实例时,我们可以像传递其他参数一样把这两个参数传递进去。
OurnewbehaviorhappensintheinitializeandonTapfunctions.Theinitializefunctioniscalledwheneveranycomponentisinstantiated,soisagreatplacetosetupbehaviorlikeeventlisteners.Thefirstthingwedoisusethis.callParent(arguments)tomakesurethesuperclass'initializefunctioniscalled.Thisisveryimportant,omittingthislinemaycauseyourcomponentsnottobehavecorrectly.
新定义的动作在初始化和点击的时候发生,initialize函数每当组件实例化的时候都会被调用,所以这个地方用来设置事件侦听器是最合适的。
在这里我们做的第一件事是使用this.callParent(arguments)来确保父类的初始化函数已经被执行。
这很重要,忽略这一步可能会导致你的组件无法正确的工作。
AftercallParent,weaddataplistenertothecomponent'selement,whichwillcallouronTapfunctionwhenevertheelementistapped.AllcomponentsinSenchaTouch2haveanelementpropertythatyoucanuseinthiswaytolistentoeventsontheDOMobjects,addorremovestyling,ordoanythingelseyou'dnormallydotoanExt.dom.Element.
在callParent之后,我们给组件的element增加了一个tap侦听器,当这个element被点击时,onTap函数就会被调用。
ST2的每一个组件都有一个element属性,通过它你可以侦听Dom对象的事件,增删样式,或者做其他你以往用Ext.dom.Element来做的事情。
TheonTapfunctionitselfisprettysimple,itjustusesExt.Msg.alerttoquicklypopupsomeinformationabouttheimage.Notethatourtwonewconfigs-titleanddescription-bothreceivegeneratedgetterfunctions(getTitleandgetDescriptionrespectively),aswellasgeneratedsetterfunctions(setTitleandsetDescription).
onTap函数本身非常简单,它只是使用Ext.Msg.alert来快速弹出一些关于图片的信息。
注意我们的两个新参数title和description都自动获得了其对应的getter方法(getTitle和getDescription),同样还有setter方法(setTitle和setDescription)。
AdvancedConfigurations
高级配置
Whenyoucreateanewconfigurationoptiontoaclass,thegetterandsetterfunctionsaregeneratedforyousoaconfigcalled'border'isautomaticallygivengetBorderandsetBorderfunctions:
当你为类创建一个新的配置参数时,一对getter和setter方法也会被生成,因此一个叫做border的配置参数会自动被给予getBorder和setBorder方法。
Ext.define('MyApp.view.MyView',{
extend:
'Ext.Panel',
config:
{
border:
10
}
});
varview=Ext.create('MyApp.view.MyView');
alert(view.getBorder());//alerts10(弹出10)
view.setBorder(15);
alert(view.getBorder());//nowalerts15(弹出15)
Thegetterandsetteraren'ttheonlyfunctionsthataregenerated,thereareacouplemorethatmakelifeasacomponentauthormuchsimpler-applyBorderandupdateBorder:
除了getter和setter之外还会生成一对让开发者感到很爽的方法,applyBorder和updateBorder:
Ext.define('MyApp.view.MyView',{
extend:
'Ext.Panel',
config:
{
border:
0
},
applyBorder:
function(value){
returnvalue+"pxsolidred";
},
updateBorder:
function(newValue,oldValue){
this.element.setStyle('border',newValue);
}
});
OurapplyBorderfunctioniscalledinternallyanytimetheborderconfigurationissetorchanged,includingwhenthecomponentisfirstinstantiated.Thisisthebestplacetoputanycodethattransformsaninputvalue.Inthiscasewe'regoingtotaketheborderwidthpassedinanreturnaCSSborderspecificationstring.
applyBorder函数会在每次border参数设置或者改变的时候被调用,包括