程序员人生 网站导航

初学 ExtJS 遇到的一些问题及解决办法

栏目:jscript时间:2013-10-26 23:29:06

快毕业了,最近参加了一个面试,面试时考官要我用一个半小时完成一个Ajax的包括前台和后台的用户管理系统,由于我以前一直在练习用JavaScript直接去做Ajax的相关操作,没有去看市面上的JS框架,加上数据访问的方法由于最近学习WCF给遗忘了不少,最终结果可想而知。所以回来后我抓紧时间学习现有框架。建议要参加上机面试的同学赶紧熟悉熟悉这些框架吧,不要像我似的把好的机会丢掉了。以下是我这两天学习ExtJS遇到的一些问题和解决办法,希望能帮助和我一样刚开始学习ExtJS的人们。

1. 至少需要将 SDK 中哪些文件包含到项目中?

整个 resources 文件夹
ext-all.js
adapter/ext/ext-base.js (我下载的版本是3.0.3)
2. 如何让ExtJS在浏览器中运行起来?
一个CSS文件,两个 JavaScript 文件和一个属性设置(注意JS文件引入的顺序)

<!-- ExtJSPath 为 ExtJS 文件夹的路径-->
<!-- ext-all.css 控制 Ext 部件的显示,如果部件的显示需要改变可以在此文件后引入一个重载的 CSS 文件 -->
<link rel="stylesheet" type="text/css" href="ExtJSPath/resources/css/ext-all.css" />
<!-- ext-base.js 是 Ext 的“Adapter”,这个文件提供 Ext 的核心功能,我们也可以使用其他的JS库 -->
<script type="text/javascript" language="javascript" src="ExtJSPath/adapter/ext/ext-base.js"></script>
<!-- ext-all-debug.js/ext-all.js 包含所有的控件 -->
<script type="text/javascript" language="javascript" src="ExtJSPath/ext-all-debug.js"></script>
<!-- 设置 Ext.BLANK_IMAGE_URL 属性 -->
<script type="text/javascript" language="javascript">
Ext.BLANK_IMAGE_URL = "ExtJSPath/resources/images/default/s.gif";
</script>

3. 如何使用非 ExtJS 适配器?
这个问题解决办法其实在 SDK 中的 INCLUDE_ORDER.txt 文件已经给出了答案。
以下列出针对各个主流框架引用 JavaScript 文件的顺序:

Yahoo! UI (.12+)
-------------------------------------------------------------------
yui-utilities.js
ext-yui-adapter.js
ext-all.js (or your choice of files)

jQuery (1.1+)
-------------------------------------------------------------------
jquery.js
ext-jquery-adapter.js
ext-all.js (or your choice of files)

Prototype (1.5+) / Scriptaculous (1.7+)
-------------------------------------------------------------------
prototype.js
scriptaculous.js?load=effects (or whatever you want to load)
ext-prototype-adapter.js
ext-all.js (or your choice of files)

4. 断网情况下,显示出现问题!
产生原因:未找到 s.gif 这个图片,这个图片是 ExtJS 框架 UI 部分的重要成分,它用于创建像图标这样的项。默认情况下,Ext.BLANK_IMAGE_URL 属性指向 http://extjs.com/s.gif。
解决办法:配置 Ext.BLANK_IMAGE_URL 属性为“ExtJSPath/resources/images/default/s.gif”。如上面的代码所示。

5. 在 IE 和FF 中字体不一样!
产生原因:ExtJS 中很多情况下使用11px,对于11px,不同的浏览器对其渲染不同。IE 的渲染和12px相似,在 FF 中10px相似。
解决办法:将 resources/css/ext-all.css 中的 font 或 font-size 后的11px全部替换为12px。

6. 无法查看 API !
产生原因:API 的访问需要用到 Ajax 功能。
解决办法:将 SDK 文件夹部署到服务器上。

转自:http://www.cnblogs.com/lanpei/

------分隔线----------------------------
------分隔线----------------------------

最新技术推荐