Extjs4快速上手二——基础知识(一)-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

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

简介: 原文 http://www.cnblogs.com/good-temper/archive/2013/04/02/2996544.html 首先声明一下,在此介绍的内容多数来自“Extjs中文学习手册”,这好像是一位前辈的博文整理,想快速全面学习Extjs4的可以看一下。

原文 http://www.cnblogs.com/good-temper/archive/2013/04/02/2996544.html

首先声明一下,在此介绍的内容多数来自“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,当时都快抓狂了。
复制代码
  今天就先写发这里吧,明天接着开始写基础二,重点介绍Extjs的MVC结构。
  呵呵,出去跑步,然后看看面试宝典,为找工作做准备,应届生伤不起啊╭(╯^╰)╮。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章
最新文章
相关文章