温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

【翻译】在Ext JS集成第三方库

发布时间:2020-07-22 07:42:05 来源:网络 阅读:952 作者:tianxiaode2008 栏目:web开发

原文地址:http://www.sencha.com/blog/integrating-ext-js-with-3rd-party-libraries/

作者:Kevin Kazmierczak
                                   Kevin Kazmierczak is a Senior Technical Architect at Universal Mind, an innovative digital solutions agency that fuses the design capabilities of an interactive firm with the the technical expertise of a systems integrator. He specializes in building frontend applications using Objective-C, HTML/JS, and Flex. Kevin holds an MBA and a BA in Computer Science from Alfred University.

介绍

Ext JS提供了大量可高度自定义的直接就可以使用的内部组件。如果组件不在框架中,也可以容易的通过扩展类的方式,甚至通过浏览Sencha市场来获取所需要的组件。这工作可能需要花费大量的时间,有时候为了节省时间,会考虑使用没有包含在Ext JS组件系统的第三方库。针对这种情况,有许多解决方案,而最简单的方法就是创建一个自定义封装组件来处理库,这样就可以在应用程序中实现重用。


实现概述

封装组件的目的是通过将第三方库所需的逻辑封装起来以方便配置以及与Ext JS框架实现交互。对于在应用程序中使用多少第三方库的API,有很大的自由度。如果库相当简单,且希望对API的访问进行控制,那就可以将API的每一个方法都封装为对应的方法。这样就可以在想要引用额外的自定义逻辑的时候隐藏对不想公开的方法或拦截方法的调用。另一种方式是公开一些API中的根对象,以便其他控件可以自由的通过对象直接调用任何API方法。在大多数情况下,这可能是最终的解决办法,不过,不同的项目会有不同。

为了演示这一方式,将为Leaflet创建一个封装组件Leaflet是一个由Universal Mind的 Vladimir Agafonki创建的开源的Javascript地图库。在应用程序中将使用这个封装组件来显示一张地图,并提供一个按钮来将地图移动到一个指定位置。


Leaflet可以将来自许多不同的地图服务的地图块整合起来,这样就为地图的显示提供了极大的灵活性。在示例中,将使用CloudMade提供的地图块。可以到CloudMade的网站上注册一个免费账号,然后就可在后续的请求(后面的示例需要使用到)中使用获得的API密钥。要想了解更多的与地图块有关的信息,可访问Leaflet的网站。


添加库引用


在应用程序中,首先要做的是在HTML文件中添加库的引用,这样才可以使用库。在示例中,需要在HEAD元素内添加两行来引用Leaflet。在Leaflet快速入门指南的Leftlet安装文档中可获得更多的详细信息。

[html]view plaincopy
向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI