• 浙产纸尿裤能叫板国际大牌吗 2019-03-19
  • 关闭

    关闭

    关闭

    封号提示

    内容

    北京pk10是国家彩票吗 EXT(js)教程

    北京赛车高手贴吧:EXT(js)教程.doc

    EXT(js)教程

    教育文库
    2019-01-07 0人阅读 0 0 0 暂无简介 举报

    北京pk10是国家彩票吗 www.qdpo.net 简介:本文档为《EXT(js)教程doc》,可适用于高等教育领域

    Ext简介我们将讲讲怎么使用Ext来完成一些JavaScript常见的任务。如果你想自己试试就应该先下IntroToExtzip用来构建已下面的Ext代码。Zip包里有三个文件:ExtStarthtml,ExtStartjs和ExtStartcss。解包这三个文件到Ext的安装目录中(例如Ext是在“C:codeExtv”中那应该在"v"里面新建目录“tutorial”。双击ExtStarthtm接着你的浏览器打开启动页面应该会有一条消息告诉你配置已完毕。如果出现了Javascript错误请按照页面上的指引操作。现在在你常用的IDE中或文本编辑器中打开ExtStartjs看看。ExtonReady(function(){?????alert("Congratulations!YouhaveExtconfiguredcorrectly!")})ExtonReady可能是你接触的第一个也可能是在每个页面都要使用的方法。这个方法会在DOM加载全部完毕后保证页面内的所有元素能被Script引用(reference)之后调用。你可删除alert()那行加入一些实际用途的代码试试。Element:Ext的核心大多数的JavaScript操作都需要先获取页面上的某个元素的引用(reference),好让你来做些实质性的事情。传统的JavaScript做法是通过ID获取Dom节点的:varmyDiv=documentgetElementById('myDiv')这毫无问题不过这样单单返回一个对象(DOM节点)用起来并不是太实用和方便。为了要用那节点干点事情你还将要手工编写不少的代码另外对于不同类型浏览器之间的差异要处理起来可真头大了。进入Extelement对象。元素(element)的的确确是Ext的心脏地带无论是访问元素(elements)还是完成一些其他动作都要涉及它。Element的API是整个Ext库的基础如果你时间不多只是想了解Ext中的一两个类的话Element一定是首??!由ID获取一个ExtElement如下(首页ExtStarthtm包含一个divID名字为“myDiv”然后在ExtStartjs中加入下列语句):ThecorrespondingcodetogetanExtElementbyIDlookslikethis(thestarterpageExtStarthtmlcontainsadivwiththeid"myDiv,"sogoaheadandaddthiscodetoExtStartjs):ExtonReady(function(){?????varmyDiv=Extget('myDiv')})再回头看看Element对象发现什么有趣的东东呢?·????????Element包含了常见的DOM方法和属性提供一个快捷的、统一的、跨浏览器的接口(若使用Elementdom的话就可以直接访问底层DOM的节点。)·????????Elementget()方法提供内置缓存(Cache)多次访问同一对象效率上有极大优势·????????内置常用的DOM节点的动作并且是跨浏览器的定位的位置、大小、动画、拖放等等(addremoveCSSclasses,addremoveeventhandlers,positioning,sizing,animation,dragdrop)。这意味着你可用少量的代码来做各种各样的事情这里仅仅是一个简单的例子(完整的列表在ElementAPI文档中)。继续在ExtStartjs中在刚才我们获取好myDiv的位置中加入:myDivhighlight()?????黄色高亮显示然后渐退myDivaddClass('red')添加自定义CSS类(在ExtStartcss定义)myDivcenter()????????在视图中将元素居中myDivsetOpacity()使元素半透明获取多个DOM的节点通常情况下想获取多个DOM的节点难以依靠ID的方式来获取。有可能因为没设置ID,或者你不知道ID,又或者直接用ID方式引用有太多元素了。这种情况下你就会不用ID来作为获取元素的依据可能会用属性(attribute)或CSSClassname代替?;谝陨系脑駿xt引入了一个异常强大的DomSelector库叫做DomQuery。DomQuery可作为单独的库使用但常用于Ext你可以在上下文环境中(Context)获取多个元素然后通过Element接口调用。令人欣喜的是Element对象本身便有Elementselcect的方法来实现查询即内部调用DomQuery选取元素。这个简单的例子中ExtStarthtm包含若干段落(标签)没有一个是有ID的而你想轻松地通过一次操作马上获取每一段全体执行它们的动作可以这样做:每段高亮显示Extselect('p')highlight()Elementselect在这个例子中的方便性显露无疑。它返回一个复合元素能通过元素接口(Elementinterface)访问每个元素。这样做的好处是可不用循环和不分别访问每一个元素。DomQuery的选取参数可以是一段较长的数组其中包括WCCSSDom选取器、基本XPatch、HTML属性和更多请参阅DomQueryAPI文档以了解这功能强大的库个中细节。响应事件到这范例为止我们所写的代码都是放在onReady中即当页面加载后总会立即执行功能较单一这样的话你便知道如何响应某个动作或事件来执行你希望做的事情做法是先分配一个function再定义一个eventhandler事件处理器来响应。我们由这个简单的范例开始打开ExtStartjs编辑下列的代码:ExtonReady(function(){???Extget('myButton')on('click',function(){???????alert("你单击了按钮")???})})代码依然会加载好页面后执行不过重要的区别是包含alert()的function是已定义好的但它不会立即地被执行是分配到按钮的单击事件中。用浅显的文字解释就是:获取ID为'myDottom'元素的引用监听任何发生这个元素上被单击的情况并分配一个function,以准备任何单击元素的情况。一般来说Elementselect也能做同样的事情即作用在获取一组元素上。下一例中演示了页面中的某一段落被单击后便有弹出窗口:ExtonReady(function(){?????Extselect('p')on('click',function(){????????????????????alert("你单击一段落")?????})})这两个例子中事件处理的function均是简单几句没有函数的名称这种类型函数称为“匿名函数(anonymousfunction)”即是没有名的的函数。你也可以分配一个有名字的eventhandler,这对于代码的重用或多个事件很有用。下一例等效于上一例:ExtonReady(function(){?????varparagraphClicked=function(){????????????????????alert("Youclickedaparagraph")?????}?????Extselect('p')on('click',paragraphClicked)})到目前为止我们已经知道如何执行某个动作。但当事件触发时我们如何得知这个eventhandler执行时是作用在哪一个特定的元素上呢?要明确这一点非常简单Elementon方法传入到evenhandler的function中(我们这里先讨论第一个参数不过你应该浏览API文档以了解evenhandler更多的细节)。在我们之前的例子中function是忽略这些参数的到这里可有少许的改变我们在功能上提供了更深层次的控制。必须先说明的是这实际上是Ext的事件对象(eventobject),一个跨浏览器和拥有更多控制的事件的对象。例如可以用下列的语句得到这个事件响应所在的DOM节点:ExtonReady(function(){?????varparagraphClicked=function(e){????????????????????Extget(etarget)highlight()?????}?????Extselect('p')on('click',paragraphClicked)})注意得到的etarget是DOM节点所以我们首先将其转换成为EXT的Elemnet元素然后执行欲完成的事件这个例子中我们看见段落是高亮显示的。使用Widgets(Widget原意为“小器件”现指页面中UI控件)除了我们已经讨论过的核心JavaScript库当前的Ext亦包括了一系列的最前端的JavaScirptUI组件库。文本以一些常用的widget为例子作简单的介绍。MessageBox比起略为沉闷的“HelloWolrd”消息窗口我们做少许变化前面我们写的代码是单击某个段落便会高亮显示现在是单击段落在消息窗口中显示段落内容出来。在上面的paragraphClicked的function中将这行代码:Extget(etarget)highlight()替换为:varparagraph=Extget(etarget)paragraphhighlight()ExtMessageBoxshow({?????title:'ParagraphClicked',?????msg:paragraphdominnerHTML,?????width:,?????buttons:ExtMessageBoxOK,?????animEl:paragraph})这里有些新的概念需要讨论一下。在第一行中我们创建了一个局部变量(LocalVariable)来保存某个元素的引用即被单击的那个DOM节点(本例中DOM节点指的是段落paragrah,事因我们已经定义该事件与标签发生关联的了)。为什么要这样做呢?嗯观察上面的代码我们需要引用同一元素来高亮显示在MessageBox中也是引用同一元素作为参数使用。一般来说多次重复使用同一值(Value)或对象是一个不好的方式所以作为一个具备良好OO思维的开发者应该是将其分配到一个局部变量中反复使用这变量!现在为了我们接下来阐述新概念的演示请观察MessageBox的调用。乍一看这像一连串的参数传入到方法中但仔细看这是一个非常特别的语法。实际上传入到MessageBoxshow的只有一个参数:一个Objectliteral,包含一组属性和属性值。在Javascript中ObjectLiteral是动态的你可在任何时候用{和}创建一个典型的对象(object)。其中的字符由一系列的namevalue组成的属性属性的格式是propertyname:propertyvalue。在整个Ext中你将会经常遇到这种语法因此你应该马上消化并吸收这个知识点!使用ObjectLiteral的原因是什么呢?主要的原因是“可伸缩性(flexibility)”的考虑"随时可新增、删除属性亦可不管顺序地插入。而方法不需要改变。这也是多个参数的情况下为最终开发者带来不少的方便(本例中的MessageBoxshow())。例如我们说这儿的fooaction方法有四个参数而只有一个是你必须传入的。本例中你想像中的代码可能会是这样的fooaction(,,,'hello'),若果那方法用ObjectLiteral来写却是这样fooaction({param:'hello'})这更易用和易读。GridGrid是Ext中人们最想先睹为快的和最为流行Widgets之一。好让我们看看怎么轻松地创建一个Grid并运行。用下列代码替换ExtStartjs中全部语句:ExtonReady(function(){?????varmyData=????????????????????'Apple',,,,':am',????????????????????'Ext',,,,':am',????????????????????'Google',,,,':am',????????????????????'Microsoft',,,,':am',????????????????????'Yahoo!',,,,':am'??????????varmyReader=newExtdataArrayReader({},????????????????????{name:'company'},????????????????????{name:'price',type:'float'},????????????????????{name:'change',type:'float'},????????????????????{name:'pctChange',type:'float'},????????????????????{name:'lastChange',type:'date',dateFormat:'njh:ia'}?????)?????vargrid=newExtgridGridPanel({????????????????????store:newExtdataStore({???????????????????????????????????data:myData,???????????????????????????????????reader:myReader????????????????????}),????????????????????columns:???????????????????????????????????{header:"Company",width:,sortable:true,dataIndex:'company'},???????????????????????????????????{header:"Price",width:,sortable:true,dataIndex:'price'},???????????????????????????????????{header:"Change",width:,sortable:true,dataIndex:'change'},???????????????????????????????????{header:"Change",width:,sortable:true,dataIndex:'pctChange'},???????????????????????????????????{header:"LastUpdated",width:,sortable:true,??????????????????????????????????????????????????renderer:ExtutilFormatdateRenderer('mdY'),?????????????????????????????dataIndex:'lastChange'}????????????????????,????????????????????viewConfig:{???????????????????????????????????forceFit:true????????????????????},????????????????????renderTo:'content',????????????????????title:'MyFirstGrid',????????????????????width:,????????????????????frame:true?????})?????gridgetSelectionModel()selectFirstRow()})这看上去很复杂但实际上加起来只有四行代码(不包含测试数据的代码)?!????????第一行创建数组并作为数据源。实际案例中你很可能从数据库、或者WebService那里得到动态的数据?!????????接着我们创建并加载datastoredatastore将会告诉Ext的底层库接手处理和格式化这些数据。不同的数据类型须在类Reader中指明?!????????接着我们创建一个Grid的组件传入各种的配置值有:o???新的datastore,配置好测试数据和readero???列模型columnmodel定义了列columns的配置o???其他的选择指定了Grid所需的功能·????????最后通过SelectionModel告诉Grid高亮显示第一行。当然你现在还未掌握这段代码的某些细节但先不要紧这个例子的目的是告诉你只要学习了少量的几行代码创建一个富界面的多功能的UI组件是可能的。更多的grid细节读者可作为一种练习去学习。这儿有许多学习Grid的资源ExtGrid教程、Grid交互演示交和GridAPI文档?;褂懈嗟恼庵皇潜揭唤??;褂幸淮虻腢IWidgets可以供调用如layouts,tabs,menus,toolbars,dialogs,treeview等等。请探索范例演示。編輯使用Ajax在弄好一些页面后你已经懂得在页面和脚本之间的交互(interact)原理。接下来你应该掌握的是怎样与远程服务器(remoteserver)交换数据常见的是从数据库加载数据(load)或是保存数据(save)到数据库中。通过JavaScript异步无刷新交换数据的这种方式就是所谓的Ajax。Ext内建卓越的Ajax支持例如一个普遍的用户操作就是异步发送一些东西到服务器然后UI元素根据回应(Response)作出更新。这是一个包含textinput的表单一个div用于显示消息(注意你可以在ExtStarthtml中加入下列代码但这必须要访问服务器):<divid="msg"><div><div>???Name:<inputtype="text"id="name">???<inputtype="button"id="okButton"value="OK"><div><divid="msg"><div>接着我们加入这些处理交换数据的JavaScript代码到文件ExtStartjs中(用下面的代码覆盖):ExtonReady(function(){?????Extget('okButton')on('click',function(){????????????????????varmsg=Extget('msg')????????????????????msgload({???????????????????????????????????url:'ajaxexamplephp',<按实际改动???????????????????????????????????params:'name='Extget('name')domvalue,???????????????????????????????????text:'Updating'????????????????????})????????????????????msgshow()?????})})注意:这个例子需要webserver才可运行。浏览器的URL地址不应是以file:开头而是http:开头否则的话Ajax的数据交互将不会工作。Localhost就可以工作得很好但必须是通过http的。这种模式看起来已经比较熟悉了吧!先获取按钮元素加入一个匿名函数监听单击。在事件处理器中(eventhandler)我们使用一个负责处理Ajax请求、接受响应(Response)和更新另一个元素的Ext内建类称作UpdateManagerUpdater。UpdateManager可以直接使用或者和我们现在的做法一样通过Element的load方法来引用(本例中该元素是id为“msg“的div)。当使用Elementload方法请求(request)会在加工处理后发送等待服务器的响应(Response)来自动替换元素的innerHTML。简单传入服务器url地址加上字符串参数便可以处理这个请求(本例中参数值来自“name”元素的value),而text值是请求发送时提示的文本完毕后显示那个msg的div(因为开始时默认隐藏)。当然和大多数Ext组件一样ExtAjax有许多的参数可选不同的Ajax请求有不同的方案。而这里仅演示最简单的那种。最后一个关于Ajax隐晦的地方就是服务器实际处理请求和返回(Resposne)是具体过程。这个过程会是一个服务端页面一个Servlet一个Http调度过程一个WebService,甚至是Perl或CGI脚本即不指定一个服务器都可以处理的http请求。让人无法预料的是服务器返回什么是服务器的事情无法给一个标准的例子来覆盖阐述所有的可能性。。下面的例子是一些常见的语言以方便开始测试(这段代码输出刚才我们传入'name'的那个值到客户端即发送什么返回什么然后在我们刚才写的'msg'div中加入该文本)。PHP的已经包含在下载文件中文件名为'ajaxexamplephp'可换成你自己服务端的代码:PlainPHP<phpif(isset($POST'name')){????????????????????echo'FromServer:'$POST'name'?????}>CakePHP<phpif(isset($this>data'name')){????????????????????$this>flash('FromServer:'$this>data'name')?????}>ASPNetprotectedvoidPageLoad(objectsender,EventArgse){?????if(RequestForm"name"!=)?????{????????????????????ResponseWrite("FromServer:"RequestForm"name")????????????????????ResponseEnd()?????}}

    用户评价(0)

    关闭

    新课改视野下建构高中语文教学实验成果报告(32KB)

    抱歉,积分不足下载失败,请稍后再试!

    提示

    试读已结束,如需要继续阅读或者下载,敬请购买!

    评分:

    /75

    ¥20.0

    立即购买

    意见
    反馈

    立即扫码关注

    爱问共享资料微信公众号

    北京pk10是国家彩票吗

    举报
    资料

  • 浙产纸尿裤能叫板国际大牌吗 2019-03-19