Ext JS 4 (1) —— Hello World

最近要做个小项目,就是个数据维护系统,不外乎 增、删、改、查 等功能,正好适合我这个刚入门的

前台需要用 Ext JS 来写,这个以前没玩过,正好不久前官方更新了 4.0 新版本,所以就直接学习新的吧,但 3.0 到 4.0 更新了不少东西,还有像 Grid 这样的大模块甚至都彻底的换了摸样,无法向下兼容,网上很多的代码都已经不能用了,最后只好去看了自带的 API DOC,外加上网上搜到的一些资料,总算是把架子都搭起来了

现在就写点自己的心得,好把之前学到的东西整理、吸收下,也可以帮助下跟我一样刚刚入门的菜鸟,如果有什么错误请及时指出

第一步,先上 http://www.sencha.com/ 下载 Ext JS 4,不知道为什么,最近上去老是跳 503 错误,现在最近的版本是 4.0.7 了

Ext JS 4 (1) —— Hello World_第1张图片

解 压后发现有不少东西,可以直接打开根目录下的 index.html ,上面有5个标签,可以看到更新的内容、API DOC、Example 等,现在都整合在一起了,resources 里放着页面美化的一些 CSS 和图片什么的,src 里当然都是 JS 源文件了

Ext JS 4 (1) —— Hello World_第2张图片



然后就动手写第一个页面 HelloWorld.html,代码如下:

Ext JS 4 (1) —— Hello World_第3张图片

 

 

中间的就是 Ext 的部分,第一个引入的 ext-all.css 是 Ext 的默认主题的 CSS 文件,ext-base.js 包含了一些重要的方法,如 extend、apply 和一些判断浏览器的方法,ext-all.js 是 Ext 的核心文件,Ext.onReady() 相当于以前 <body> 标签里的 onload 属性,在页面加载完后运行其中的代码,其中运行了一个 Ext 的警告框,效果如下:

Ext JS 4 (1) —— Hello World_第4张图片
Ext 的样式都已经用上去了,背景、阴影、按钮都有了,Hello World 就讲到这里

你可能感兴趣的:(helloworld,ExtJs,Ext.MessageBox)