EXTjs学习札记（1）
日期：2014-05-16 浏览次数：20349 次
?? 一直对于前端的开发有一种恐惧感，总是觉得无从下手。后端做的无论如何的精巧与华丽，没有前端的渲染与体现也是一种很大的遗憾的。 从06年开始关注Ajax，应该就是从那时开始前端的开发在国内慢慢被重视起来了，进入公司的时候前端的开发主要还是已先做原型，然后开发人员根据前端的原型改成jsp进行开发的，再后来在已有系统的更改上此时联原型都么有了，大家摸索着在繁杂的jsp和js中寻觅要解决的问题。比起后端的业务逻辑更改我更怕去更改前端的js，jsp当然这个主要是因为如此庞大的系统前端的代码相比后端代码相当的复杂没有秩序没有规则，原有的代码规则早已被无数的人践踏了当然我也是其中一个，因为这个一直在想前端的开发何时能像组件搭积木一般简化该是多么美好的事情，羡慕于VB，Jbuilder等对前端界面的拖拉式开发方法。记得最早开发的一个界面还是用纯java代码写的，等到用C++Builder时才觉得界面编程原来如此之轻巧，让人对编程的欲望和信息更加强烈。
?? 一个简易灵活方便的前端开发工具和方法不只是简化工作，更是对初学者对编程人员信心和兴趣的极大鼓励。自从知道EXT那天开始就被他的精美的界面所吸引，让自己更有打造属于自己创造产品的欲望。无论做什么开头总是不易的，EXT给了我们更容易的开头方式。一直以来在前端的技术选择上摸索着，看过jquery，YUI，dojo，Jquery-UI等等但是只有EXT是最吸引我的，他精美的组件好比身材姣好的美女一般不由的想要靠近她，最初的时候难免会因为她的美丽而觉得不易下手，但是当你跟她打了招呼慢慢了解她的时候，你会有惊人的发下她是那样的平易近人。
??? 下面开始我EXT学习之路吧。
?
1. EXT初识
??? Ext是一款javascript框架，不只是对javascript的封装，更是对javascript编程模式的优化和规范化，更是提供了优良的编程模式让前端展现代码与js优美的分离，更是提供了精美绝伦的前端组件，更是提供了更面向对象更能让编程人员喜欢的编程模式、
?
2. EXT安装
??? 下载EXT，无需特别的安装。下载后解压即可。将解压后的adpeter文件夹，ext-all.js 拷贝到项目的js文件夹下，
将resources文件夹拷贝到css目录下。 js和css目录是我在web项目下自己创建的文件夹。
?
3.?HelloWorld
? 创建html，里面我们处理引入必须的css和js外什么都不做。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="css/resources/css/ext-all.css" /> <script type="text/javascript" src="js/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="js/ext-all.js"></script> <title>Insert title here</title> </head> <body> EXT-TEST </body> </html>
??让页面弹出 HelloWrold 警告框（EXT的）
Ext.onReady(function() {//页面加载时执行
var button = new Ext.Button({//创建button 对象
text : "ExtLearn",//button的value值
id : "1",//button 的id
width : "200",
handler : function() {//点击button时执行
Ext.MessageBox.alert("Alert", "HelloWorld");
},
renderTo: Ext.getBody()//button在body标签下显示
});
});
?
?
? 就这样一个Helloworld实现了。 html文件中没有一行js代码就实现了按钮的创建，按钮点击事件的执行，更可喜的是这些组件都很漂亮。
?
?
