配置ExtJS及使用其他框架

最新推荐文章于 2025-06-30 12:03:45 发布

原创最新推荐文章于 2025-06-30 12:03:45 发布 · 1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

ExtJS

本文深入探讨了ExtJS配置中的关键要素，包括如何替换开发环境中的ExtJS路径、配置图像垫片以及如何在使用Prototype、jQuery和YUI等基础框架时进行适配。通过具体的示例代码，详细展示了各步骤的操作方法。

ExtJS的配置

 <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"/>

    <script type="text/javascript" src="extjs/adapter/ext/ext-base-debug.js">
    </script>

    <script type="text/javascript" >
         BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif';
    </script>

    <script type="text/javascript" src="extjs/ext-all-debug.js">
    </script>

在配置第一个页面时，一定要确保把extjs路径替换成自己开发环境中的文件路径。

配置BLANK_IMAGE_URL

BLANK_IMAGE_URL属性锁指向的是一个1*1像素的透明图片的位置（也叫一个垫片），它是框架的UI部分的一个关键内容，是用来创建图标的。

BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif';

要想让ExtJS能使用之前提到的那些框架，在引用这些外部基础框架之前首先要加载一个适配器（adapter）。这个适配器会把ext-base方法映射到所选择的外部函数库，这是最关键的一步。如果想使用ExtJS之外的其他3种基础框架，可以使用下面的模式。

1、Prototype函数库

 <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"/>

    <script type="text/javascript" src="extjs/adapter/prototype/prototype.js">
    </script>

    <script type="text/javascript" src="extjs/adapter/prototype/scriptaculous.js?load=effects.js">
    </script>

    <script type="text/javascript" src="extjs/adapter/prototype/ext-prototype-adapter-debug.js">
    </script>

    <script type="text/javascript" src="extjs/ext-all-debug.js">
    </script>

可以看出来，除增加了两个JS文件外，剩下的和普通的ExtJS设置类似。Prototype和Scriptaculous取代了ext-base，ext-prototype-adapter.js吧外部函数库方法映射到Ext。注意，仍然要加载ext-all-debug.js。

2、jQuery函数库

<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"/>

    <script type="text/javascript" src="extjs/adapter/jQuery/jQuery.js">
    </script>

    <script type="text/javascript" src="extjs/adapter/jQuery/ext-jquery-adapter-debug.js">
    </script>

    <script type="text/javascript" src="extjs/ext-all-debug.js">
    </script>

配置jQuery和Prototype类似。YUI的配置也类似，区别就在于要加载不同的基础函数库和不同的适配器文件。

3、YUI函数库

<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"/>

    <script type="text/javascript" src="extjs/adapter/yui/yui-utilities.js">
    </script>

    <script type="text/javascript" src="extjs/adapter/yui/ext-yui-adapter-debug.js">
    </script>

    <script type="text/javascript" src="extjs/ext-all-debug.js">
    </script>

标签

#extjs #js #前端开发 #javascript