原文地址：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安装文档中可获得更多的详细信息。