Extjs4快速上手二——基础知识(一)

     首先声明一下，在此介绍的内容多数来自“Extjs中文学习手册”，这好像是一位前辈的博文整理，想快速全面学习Extjs4的可以看一下。

     1.1 下载Extjs4

               下载地址：http://extjs.org.cn/ （也可以去官方下），版本4.1.1

     1.2 在项目中加入Extjs文件

                可以直接在项目的WebRoot文件加下新建ext，将下载文件加压后全部放入，但是这样往往会导致Myeclipse直接卡死，而且文件大概有200多M，这对于一个小项目来说绝对是不可接受的。其实不必怕，有经验的人都知道，包里边多数都是源码、Demo和API文档，真正需要引入项目的其实没几个。需引入的文件如下：

            

　　1.3 Extjs布局

　　　　fit布局：在Fit布局中，子元素将自动填满整个父容器。注意：在fit布局下，对其子元素设置宽度是无效的。如果在fit布局中放置了多个组件，则只会显示第一个子元素。

　　　　border布局：border布局也称边界布局，他将页面分隔为west,east,south,north,center这五个部分，我们需要在在其items中指定使用region参数为其子元素指定具体位置。我们的面主框架就采用这种布局方式。

            注意：north和south部分只能设置高度（height），west和east部分只能设置宽度（width）。north south west east区域变大，center区域就变小了。

　　　　　　参数 split:true 可以调整除了 center四个区域的大小。

　　　　　　参数 collapsible:true 将激活折叠功能， title必须设置，因为折叠按钮是出现标题部分的。

　　　　　　center 区域是必须使用的，而且 center 区域不允许折叠。 Center区域会自动填充其他区域的剩余空间。尤其在 Extjs4.0 中，当指定布局为 border时，没有指定 center 区域时，会出现报错信息。

　　　　accordion布局：accordion布局也称手风琴布局，在accordion布局下，在任何时间里，只有一个面板处于激活状态。其中每个面边都支持展开和折叠。accordion布局：accordion布局也称手风琴布局，在accordion布局下，在任何时间里，只有一个面板处于激活状态。其中每个面边都支持展开和折叠。

　　　　card布局：这种布局用来管理多个子组件，并且在任何时刻只能显示一个子组件。这种布局最常用的情况是向导模式，也就是我们所说的分布提交。

　　　　anchor布局：将使组件固定于父容器的某一个位置，使用anchor布局的子组件尺寸相对于容器的尺寸，即父容器容器的大小发生变化时，使用anchor布局的组件会根据规定的规则重新渲染位置和大小。

 Absolute布局：继承Ext.layout.container.Anchor 布局方式，并增加了X/Y配置选项对子组件进行定位，Absolute布局的目的是为了扩展布局的属性，使得布局更容易使用。

　　　　column布局：一般被称为列布局，这种布局的目的是为了创建一个多列的格式。其中每列的宽度，可以为其指定一个百分比或者是一个固定的宽度。

　　1.4 Extjs代码相关

　　　　Extjs的特点之一就是面向对象编程，这让我们能够像写java代码那样编写界面和前端的一些处理代码。但是对于一个非专业的前端开发人员来说，去学习熟悉Ext那对类库实在很费劲，所以我觉得我们这类路过党（偶尔用用而已），只要知道一些基本的类就行了。

　　　　　　(1).Extjs4的代码是从一个Ext.application({})的方法开始的，这个相当于我们项目中的main函数。

　　　　　　(2).和net一样，Extjs4中也有命名空间的概念，而且命名结构通常和文件结构一致，这点和java的包很相似。

　　　　　　(3).Extjs本身提供错误处理机制和调试函数，但是我觉得作为业余人士而言，一般还是不要用，只要运行正常，没有异常抛出即可，而调试我觉的Chrome/Firefox+console.log()一般就能搞定。

　　　　　　(4)至于其他的可以去查看API文档即可。

　　　　下边是一个Extjs TabPanel类的定义

Ext.define('sxpt.view.TabPanel',{ 　　　//类名    extend: 'Ext.tab.Panel', 　　　　　　//父类    initComponent : function(){ 　　　　//初始化方法        Ext.apply(this,{ 　　　　　　　　//Ext.apply(X1,X2),将对象X1拷贝至X2，这里目的是见这个面板拷贝至‘content-panel’中作为首页            id: 'content-panel',             region: 'center',              defaults: {             activeTab: 0,             border: false,             items: [{               id: 'HomePage',               title: '首页',               iconCls:'home',              items:[                  {                    xtype: 'textfield',                      name: 'name',                    fieldLabel: '测试'                  }              ]            }]         });         this.callParent(arguments);     } }); 

　　　　可以结合资料了解一下这段代码的大概意思，重点是熟悉Extjs4的编码方式。

　　1.5 Extjs 数据定义、存储

　　　　Extjs里边有两个很核心的对象：model模型类和store存储类，前者我们可以理解为java的model类，定义了存储数据的格式，后边可以理解为一个实例化的model类集合，一般后台传来的列表数据使用store存储。下边是一个例子：

model：Ext.define('sxpt.model.User', {     extend: 'Ext.data.Model',     fields:  ['loginid', 'name','role','email','grade']});store：Ext.define('sxpt.store.User',{    extend: 'Ext.data.Store',    requires: 'sxpt.model.User',     model: 'sxpt.model.User',　　　　　　　　　　     autoLoad: true,　　　　　　　　　　　　　　　　//是否自动加载，即是否自动向后台请求数据     pageSize:1,　　　　　　　　　　　　　　　　　　//设置分页大小     proxy: {　　　　　　　　　　　　　　　　　　　　//这是请求代理,实现异步想后台请求数据        type: 'ajax',        url: 'user_getstudent',        reader: {　　　　　　　　　　　　　　　　　　            type: 'json',            root: 'ls',             successProperty: 'success',            totalProperty: 'totalCount'        }    } });

　　1.6 Extjs 向后台请求数据 　　　

　　　　Extjs本身是基于jquery的框架，所以其请求数据的方式与jquery一致，只不过很多时候用起来更简单。需要明确一点的是Extjs使用json格式数据和后台交互，当然也可以使用xml格式，这个自行研究吧。

　　　　Extjs向后台请求数据主要的方式就是Ext.Ajax.request，应该也有其他方法，但是目前就用过这一个（上边store的proxy也是使用的这个），谁让咱是业余人士呢。看代码：

          Ext.Ajax.request({                url: "链接", //Response.Write("[{username:'likeshan',age:20},{username:'liudehua',age:50}]");                params: { id: 1 },//传递参数到服务器中                timeout: 60000,//设置请求超时时间                method: "POST",                success: function (response, operation) {                    Ext.Array.each(eval_r(response.responseText), function (item) {//注意eval里面放的一定是js的可执行代码，就是js认识的代码，在这里是数组这是可以认识的                        alert(item.username);                    });                },                failure: function (response, operation) {                    alert(response.responseText);                }            });

　　　　这里需要特别提醒的是Extjs4大多数情况下采用异步请求，也就是发起请求后外部也不知道他是么时候请求完成，所以要注意想获取请求后的数据只能在Ajax内部方法中访问，如success、store的load方法等，当初我就在这点上栽了很大跟头。

　　　　那么有时候我们希望能够同步获取数据该怎么办呢？只要将Ext.Ajax.request中的async设为false即可，可以看个例子：

var name;Ext.Ajax.request({    url:'common_login_userinfo',    method: 'post',    async :  false,//同步请求数据    success: function(result, request) {        name=Ext.JSON.decode(result.responseText).lui.role;        }});console.log(name);　　　　　　//如果不设置同步，这里一般输出是undefine（即null），为什么说一般呢？都说过了是异步请求，如果请求已经完成了，那就可能输出正确的值（比如在　　　　　　　　　　　　　　　　　　上一步打个断点暂停一会），当初我调试时发现都有值，但是控制台输出却是undefine，当时都快抓狂了。