前端框架Ext学习之框架搭建

学无止境啊，当你在工作时就会发现，只恨自己少长了几个脑袋。不够用啊，这不为了项目，领导发话不能只来后台啊，把前端也弄一下。为了快，就直接弄框架把。一句话ExtJS就这样进入了我的生活，带给我那就无尽的烦恼啊，埋头苦学，记录下学习进程。

既然要学习这个Ext的框架了，那么首先就要先了解一下这个框架的具体情况啊：

       前言 Ext：

	Ext是一个强大的js类库,以前是基于YAHOO-UI,现在已经完全独立了,主要包括data,widget,form,grid,dd,menu,其中最强大的应该算grid了,编程思想是基于面向对象编程(oop),扩展性相当的好.可以自己写扩展.自己定义命名空间.web应用可能感觉太大.不过您可以根据需要按需加载您想要的类库就可以了.主要包括三个大的文件ext-all.css,ext-base.js,ext-all.js(包括所有的类库,您可以根据需要进行删减.官方网站提供这一接口),在引用ext类库的时候.这三个文件必不可少.它提供了丰富的，非常漂亮的外观体验，成为众多界面层开发人员的追捧！其核心的组件基本覆盖了我们构建富客户端的常用的组件。

	Ext还要一个好处就是Ext是一个用javascript编写，与后台技术无关的前端ajax框架。因此，可以把Ext用在.Net、Java、Php等各种开发语言开发的应用中。

一、学习网站

当然一个技术学习好坏对于在哪里学习以及怎么学习都是有很大关系的，本人提供些学习的地方：

1. 首先就是ExtJS的官网了：Ext官网地址
2. 还有一个就是我也对照了w3c网站的：点击打开链接
3. 当然还有一些其他人写的博客等等

二、下载资源

       下载资源就去官网注册一个账号了，可以有一个月的试用机会，这个框架使用是要收费的。注册后，资源下载链接会下发到你注册的邮箱里（所以不要随便写邮箱哦！！）。下载下来是一个压缩包。

三、ExtJS框架的搭建

  第一步：把下载的资源解压出来，里边包含了Ext的源码，demo，文档（在ext4以后又加入了移动端的东西，可能就比较大了，第一次下载了最新的，太大了，4.X的就小很多，如果只有web就没必要用那么多）。由于是学习吗，所以没有进行筛选直接把所有的资源都放到了web项目中（建议：如果真的进行项目开发了，最好不要一股脑都放到项目里，用到哪些就放哪些）。具体操作就是把资源放到web项目的WebRoot（WebContent）文件夹下就ok了 。当然如果是这种copy过去的会有一个问题，你会发现编译不过去了，卡了 ，IDE崩了提示内存不足了，这就大发了。不要担心，只要这样做就ok了：

       去掉.project文件中的以下部分：
第一部分：

        org.eclipse.wst.jsdt.core.javascriptValidator
       
       

和第二部分：
org.eclipse.wst.jsdt.core.jsNature

        这样做可以将内存减下来；第二不要用eclipse自带的编辑工具打开js文件。

        第二步：可以开始使用了  试试可不可以就ok了，网上随便找个代码

1. Ext.application({
2. 
   
3. 
   
4.  name : 'MyApp',
5. 
   
6. 
   
7.  launch : function() {
8. Ext.create('Ext.data.Store', {
9.    storeId:'simpsonsStore',
10.    fields:['name', 'email', 'phone'],
11.    data:{'items':[
12.        { 'name': 'Lisa',  "email":"[email protected]",  "phone":"555-111-1224"  },
13.        { 'name': 'Bart',  "email":"[email protected]",  "phone":"555-222-1234" },
14.        { 'name': 'Homer', "email":"[email protected]",  "phone":"555-222-1244"  },
15.        { 'name': 'Marge', "email":"[email protected]", "phone":"555-222-1254"  }
16.    ]},
17.    proxy: {
18.        type: 'memory',
19.        reader: {
20.            type: 'json',
21.            root: 'items'
22.        }
23.    }
24. });
25. 
    
26. 
    
27. Ext.create('Ext.grid.Panel', {
28.    title: 'Simpsons',
29.    store: Ext.data.StoreManager.lookup('simpsonsStore'),
30.    columns: [
31.        { header: 'Name',  dataIndex: 'name' },
32.        { header: 'Email', dataIndex: 'email', flex: 1 },
33.        { header: 'Phone', dataIndex: 'phone' , renderer: function(value) {
34.            return Ext.String.format('{1}', value, value);
35.        }}
36.    ],
37.    height: 200,
38.    width: 400,
39.    renderTo: Ext.getBody()
40. });
41.  }
42.  });

       在服务器上跑一下就ok了！

      学习中！！！！！！！！！