Extjs40 配置.doc

Extjs一路走来可谓风光无限！现在的extjs最新版本已经到了4.07，下载地址：/products/extjs 现在说下版权问题，商用是要收费的，个人学习研究是免费的GPL3的许可证.其余不多说！现在完之后解压，解压后的目录结构如下图所示：不多说，一步一步来。环境的搭建：建立web工程（当然本地工程也可以）在web目录下新建extjs目录复制extjs4.0的解压文件中 bootstrap.js,ext-debug-all.js,ext-all.js以及resource目录到此目录下，目录结构图如下：ok，截止目前为止所有环境ok。现在开发HelloWorld程序！很简单只是一个HelloWorld！【需求：在页面加载完成的时候alert一个hello的信息】现在extjs目录下新建hello.html页面，其内容如下： extjs-demo来自的教程 在此简单解释，ext-all.css是extjs通用的css文件。extjs本身的所有css样式都在这里面定义，bootstrap.js文件用来加载extjs的相应js文件，其能根据是开发环境还是生产环境进行动态加载。其在如下代码完成配置:isDevelopment = null 默认的isDevelopment 是null值，如果是null则加载的是ext-all-debug.js原因如下：if (queryString.match(?|&)debug) != null) isDevelopment = true; else if (queryString.match(?|&)nodebug) != null) isDevelopment = false; document.write();以上代码还算简单，不多费口舌了。现在访问以下你的页面，然后查看是否报错，如果报错，那么请检查以上步骤是否有问题。如果没有报错就继续下面（看报错不报错是要用firebug的，不是瞎看的）在页面加载完成的时候执行某个js函数，一般情况下我们会用 body 的onload 方法或window.onload=fn()，在jquery框架中$(document).ready();完成此功能！在此处当然是用Ext独有的东东了。代码如下：Ext.onReady();肿么样？简单吧！现在完善下代码，让我们把那个welcome msg 给alert出来。完整代码如下： extjs-demo来自的教程 Ext.onReady(function() alert( 欢迎来到博客); ); 让我们看一下惊人的效果吧！惊人吧!哈哈,如果是Extjs仅仅就这样,那也太令人吃惊了!这样的东西就不用学习了.啥都能实现么!但是extjs强悍之处就不仅仅是这样了,如果是下面效果呢!这样的效果是不是比较难实现了?但是Extjs确能够让我们简单实现,代码改动如下:将alert( 欢迎来到博客); 替换为:Ext.MessageBox.alert( welcome,欢迎来到博客); 即可,怎么样?简单吧! 这就是Extjs擅长的,也是我们选用extjs的原因,当然对extjs来说这个只是冰山上的一个雪粒,九牛一毛,微不足道的!让我们慢慢的探索extjs的更多美景吧!最终的代码贴出来: extjs-demo来自的教程 Ext.onReady(function() alert( 欢迎来到博客http:/w