第一章:Ext.js基础

好书推荐

  • Javascript设计模式
  • 征服ajax web 2.0开发技术详解

简介

  • 基础要求

    • 了解HTML、CSS、熟练JS、JS的OOP、AJAX
    • JSP/PHP/ASP熟悉其中之一
  • 学习方法
    • 书籍: 官网推荐的书籍
    • 网络: 官方网站,文档API,开源论坛
    • 勤奋: 多思考,多实践,多练习,多总结
    • 总结: 猜、查、试
  • 源码下载、目录介绍、开发环境搭建、开发工具安装配置
    • 官网
    • spket1.6.18下载和安装
    • 引入bootstrap.js、ext-all.css文件、自定义js文件
      • bootstrap.js会自动加载js文件

        • 开发环境:加载ext-all-debug.js
        • 生产环境:加载ext-all.js文件(小1M左右)
  • 常用术语
    • 面板Panel、布局Layout、组件Component、渲染Render
  • ext.js对原生JS的扩展
    • Array
    • Object
    • 弹出框
      • JS弹出框会阻碍代码继续执行
      • ext.js弹出框是模拟实现的

新特性

  • 原生js类的声明和对象的创建

    • 类其实就是一个function
    • 对象:用类名.属性 || 类名[属性]来访问
  • 老版本Ext创建windows对象
    • 直接new Ext.类名({属性});

      new Ext.window.Window({
      属性名:值
      });
  • 新版本用create创建windows对象 (推荐)
    Ext.create('类名',{
    属性名:值
    });
  • define自定义类并集成(extend)window
    • 自定义Ext.define(‘自定义类名’,{});然后用Ext.create(‘自定义类名’,{}).show();初始化

      Ext.define('自定义类名',{
      属性包括extend:'类名'
      });
      Ext.create('自定义类名',{
      属性名:值
      }).show();
  • js的异步加载requires
    • 为了使自定义组件干净强健,一般会以单独的js文件方式引入,但加载时浪费带宽
    • 先在该页面js文件中指定命名空间(预加载)
      Ext.Loader.setConfig({
      enable:true,
      paths:{myApp:'code/ux'}
      });
    • 创建组件时指定对应的js文件名
      Ext.create('对应的js文件名',{
      属性名:值
      }).show();
  • 自动的get和set:config
    • 在自定义组件时,属性中添加config项

      Ext.define('自定义类名',{
      属性包括extend:'类名',
      config:{
      属性名:值
      }
      });
    • 初始化对象时通过:初始化对象名.get属性名();直接使用
  • 类的混合mixins
    • 为了解决类的多继承问题

      • extend只能继承一个类
      • mixins可以继承多个类
        Ext.define('A类',{
        A方法:function(){}
        }); Ext.define('B类',{
        extend:'类名',//extend只能继承一个类
        B方法:function(){},
        mixins:{
        A类:'A类'//可以继承多个类
        }
        }); 初始化B类对象,B类对象名.A方法();实现继承

数据模型 model

extjs4.0中的mode相当于DB中的table或java中的Class

  • 主要分3部分

    • model、proxy、store
  • Molde创建
    • 创建model模型

      • 利用Ext.define创建模型类

        Ext.define("user",{
        extend:"Ext.data.Model",
        fields:[{name:'name',type:'auto'},{name:'age',type:'int'}]
        });
      • 利用Ext.regModel创建模型(不用写extend继承)
        Ext.regModel("user",{
        fields:[{name:'name',type:'auto'},{name:'age',type:'int'}]
        });
    • 实例化model(3种实例化方法)
      • new关键字

        var p = new user({name:'uspcat.com',age:26});
        alert(p.get('name'));
      • create方式
        var p = Ext.create("user",{name:'uspcat.com',age:26});
        alert(p.get('name'));
      • ModelMgr.create方式
        var p = Ext.ModelMgr.create({name:'uspcat.com',age:26},'user');
        alert(p.get('name'));
        alert(user.getName());
    • Validations(自定义验证器)
      ////扩展验证
      Ext.apply(Ext.data.validations,{
      age:function(config, value){
      var min = config.min; //获取最小值
      var max = config.max; //获取最大值
      if(min <= value && value<=max){
      return true;
      }else{
      this.ageMessage = this.ageMessage+"年龄范围应为["+min+"~"+max+"]";
      return false;
      }
      },
      ageMessage:'age数据错误' //错误提示消息
      });
      ////定义含验证的类
      Ext.define("person",{
      extend:"Ext.data.Model",
      fields:[
      {name:'name',type:'auto'},
      {name:'age',type:'int'}
      ],
      validations:[
      {type:"length",field:"name",min:2,max:6},
      {type:'age',field:"age",min:0,max:150}
      ]
      });
      ////实例化类
      var p1 = Ext.create("person",{name:'uspcat.com',age:-26});
      var errors = p1.validate(); //对验证项进行验证
      var errorInfo = []; //定义数组存储错误信息
      errors.each(function(v){
      errorInfo.push(v.field+" "+v.message);
      });
      alert(errorInfo.join("\n"));
  • 数据代理proxy
    • proxy用于完成数据的CRUD(增、删、改、查)

      Ext.define("person",{
      extend:"Ext.data.Model",
      fields:[
      {name:'name',type:'auto'},
      {name:'age',type:'int'}
      ],
      proxy:{
      type:'ajax',
      url:'person.jsp'
      }
      });
      var p = Ext.ModelManager.getModel("person"); //得到person模型
      p.load(1, {
      scope: this,
      failure: function(record, operation) { },
      success: function(record, operation) {alert(record.data.name)},
      callback: function(record, operation) { }
      });
  • Molde的一对多和多对一
    • teacher 1=>n student

      ////老师类
      Ext.regModel("teacher",{
      fideld:[
      {name:'teacherId',type:"int"},
      {name:'name',type:"auto"}
      ],
      hasMany:{ //一对多
      model: 'student',
      name : 'getStudent',
      filterProperty: 'teacher_Id' //过滤属性,相当于student表的外键
      }
      });
      ////学生类
      Ext.regModel("student",{
      fideld:[
      {name:'studentId',type:"int"},
      {name:'name',type:"auto"},
      {name:"teacher_Id",type:'int'}
      ]
      });
      ////teacher类.students 得到子类的一个store数据集合(student要加s)

数据代理 proxy

数据代理(proxy)是进行数据读写的主要途径,通过代理操作数据进行CRUD(增、删、改、查)

  • 每一步操作都会得到唯一的Ext.data.Operation实例,包含了所有的请求参数
  • proxy目录结构
    • Ext.data.proxy.Proxy 代理类的根类,分客户端(Client)和服务器(Server)代理

      • Ext.data.proxy.Client 客户端代理

        • Ext.data.proxy.Memory 普通的内存代理 ----[重点]

          Ext.regModel("user",{
          fields:[
          {name:'name',type:'string'},
          {anem:'age',type:'int'}
          ]
          });
          var userData = [{name:'uspcat.com',age:1}]; //不用create方法 我们直接用proxy来创建对象数据
          //创建model的代理类
          var memoryProxy = Ext.create("Ext.data.proxy.Memory",{
          data:userData,
          model:'user'
          }) //update
          userData.push({name:'new uspcat.com',age:1});
          memoryProxy.update(new Ext.data.Operation({
          action:'update', //响应事件为update
          data:userData
          }),function(result){},this); //CRUD
          memoryProxy.read(new Ext.data.Operation(),function(result){
          var datas = result.resultSet.records;
          Ext.Array.each(datas,function(model){
          alert(model.get('name'));
          })
          });
        • Ext.data.proxy.WebStorage 浏览器客户端存储代理
          • Ext.data.proxy.SessionStorage 浏览器级别代理----[重点]

            • 适合网吧模式,关闭浏览器时清除所有用户信息
          • Ext.data.proxy.LocalStorage 本地化的级别代理(不能跨浏览器
            )----[重点]
            • 适合家庭电脑模式,为用户保存信息和操作习惯

              Ext.regModel("user",{
              fields:[{name:'name',type:'string'}],
              proxy:{
              //相当于Cookies,浏览器级别代理:type:'sessionstorage',
              type:'localstorage',
              id : 'twitter-Searches' //全局
              }
              }); //用store来初始化数据
              var store = new Ext.data.Store({model:user});
              store.add({name:'uspcat.com'});
              store.sync(); //保存
              store.load(); //加载
              var msg = [];
              store.each(function(rec){
              msg.push(rec.get('name'));
              });
              alert(msg.join("\n")); //每次刷新都会加1条,不能跨浏览器
      • Ext.data.proxy.Server 服务器端代理
        • Ext.data.proxy.Ajax 异步加载的方式----[重点]

          • Ext.data.proxy.Rest 一种特殊的Ajax

            Ext.regModel("person",{
            fields:[{name:'name',type:'string'}]
            });
            var ajaxProxy = new Ext.data.proxy.Ajax({
            url:'person.jsp',
            model:'person',
            reader:'json',
            limitParam : 'indexLimit' //默认为limit,修改为indexLimit
            });
            ajaxProxy.doRequest(new Ext.data.Operation({
            action:'read',
            limit:10, //分页
            start :1,
            sorters:[
            new Ext.util.Sorter({
            property:'name', //排序字段
            direction:'ASC'
            })
            ]
            }),function(o){
            var text = o.response.responseText;
            alert(Ext.JSON.decode(text)['name']);
            });
        • Ext.data.proxy.JsonP 跨域交互的代理----[重点]
          • 跨域有严重的安全隐患,extjs的跨域也需要服务器端做相应的配合

            Ext.regModel("person",{
            fields:[{name:'name',type:'string'}],
            proxy:{
            type:'jsonp',
            url:'http://www.uspcat.com/extjs/person.php'
            }
            });
            var person = Ext.ModelManager.getModel('person');
            person.load(1,{
            scope:this, //作用域
            success:function(model){
            alert(model.get('name'));
            }
            });
        • Ext.data.proxy.Direct 命令
  • REST解释
    • REST指Representational State Transfer (或”ReST”) 表述性状态转移

      • 无状态、客户端-服务器、具有缓存机制的通信协议(实际使用HTTP协议)
    • RESTful应用使用HTTP请求来POST数据(创建/更新/读取数据)如进行查询、删除
      数据
      • REST使用HTTP来进行CRUD(Create/Read/Update/Delete)操作

数据读写器

Reader

主要用于将proxy数据代理读取的数据按照不同的规则进行解析,将解析好的数据
保存到Modle中

  • 结构图

    • Ext.data.reader.Reader 读取器的根类

      • Ext.data.reader.Json JSON格式的读取器

        var userData = {
        //total : 200,
        count:250,
        user:[{auditor:'yunfengcheng',info:{ //auditor审核员
        userID:'1',
        name:'uspcat.com',
        orders:[
        {id:'001',name:'pen'},
        {id:'002',name:'book'}
        ]
        }}]
        };
        ////model
        Ext.regModel("user",{
        fields:[
        {name:'userID',type:'string'},
        {name:'name',type:'string'}
        ],
        hasMany: {model: 'order'}
        });
        Ext.regModel("order",{
        fields:[
        {name:'id',type:'string'},
        {name:'name',type:'string'}
        ],
        belongsTo: {type: 'belongsTo', model: 'user'} //order关联user
        });
        var mproxy = Ext.create("Ext.data.proxy.Memory",{
        model:'user',
        data:userData,
        reader:{
        type:'json',
        root:'user',
        implicitIncludes:true, //是否级联读取
        totalProperty:'count', //指定total属性名为count
        //服务器返回的数据可能很负载,用record可以筛选出有用的数据信息,装在Model中
        record : 'info' //有效信息
        }
        });
        mproxy.read(new Ext.data.Operation(),function(result){
        var datas = result.resultSet.records; //这里返回数组
        //alert(result.resultSet.total);
        Ext.Array.each(datas,function(model){
        alert(model.get('name'));
        });
        var user = result.resultSet.records[0];
        var orders = user.orders(); //这里返回对象
        orders.each(function(order){
        alert(order.get('name'))
        }); })
        • Ext.data.reader.Array 扩展JSON的Array读取器

          Ext.regModel("person",{
          fields:[
          'name','age' //简写形式,缺点:无法加其余配置
          // {name:'name'},
          // {name:'age'}
          ],
          proxy :{
          type:'ajax',
          url:'person.jsp',
          reader:{
          type:'array'
          }
          }
          });
          var person = Ext.ModelManager.getModel('person');
          person.load(1,{
          success:function(model){
          alert(model.get('name'));
          }
          })
          ////对应的person.jsp文件代码
          <%@page language="java" contentType="text/html" pageEncoding="UTF-8"%>
          <%
          response.getWriter().write("[['yunfengcheng',26]]");
          %>
      • Ext.data.reader.Xml XML格式的读取器
        Ext.regModel("user",{
        fields:[
        {name:'name'},
        {name:'id'}
        ],
        proxy:{
        type:'ajax',
        url:'users.xml',
        reader:{
        type:'xml',
        record:'user' //有效信息
        }
        }
        });
        var user = Ext.ModelManager.getModel('user');
        user.load(1,{ //调用Model的load方法
        success:function(model){
        alert(model.get('id'))
        }
        })
        ////对应的users.xml文件代码
        <users>
        <user>
        <name>uspcat.com</name>
        <id>00101</id>
        </user>
        </users>

Writer

  • 结构图

    • Ext.data.writer.Writer

      • Ext.data.writer.Json 对象被解释成JSON的形式传到后台
      • Ext.data.writer.Xml 对象被解释成XML的形式传到后台
        Ext.regModel("person",{
        fields:[
        'name','age'
        ],
        proxy :{
        type:'ajax',
        url:'person.jsp',
        writer:{
        //type:'json'
        type:'xml'
        }
        }
        });
        Ext.ModelMgr.create({ //初始化传值
        name:'uspcat.con',
        age:1
        },'person').save(); //调用save方法将数据传递到后台

数据集 store

store是一个存储数据对象Model的集合缓存,可以为extjs的可视化组建提供数据(GridPanel,ComboBox)等

类结构

  • Ext.data.AbstractStore

    • Ext.data.Store 没有特殊情况这个类就可以满足日常开发了

      • Ext.data.ArrayStore
      • Ext.data.ArrayStore 内置辅助的类
      • Ext.data.JsonStroe 内置辅助的类
        var s = new Ext.data.Store({
        fields:[
        {name:'name'},
        {name:'age'}
        ],
        proxy:{
        type:'ajax',
        url:'person.jsp'
        }
        //autoLoad:true //直接遍历数据时由于阻塞机制,可能加载的数据为空
        });
        s.load(function(records, operation, success){
        Ext.Array.each(records,function(model){
        //alert(model.get('name'));
        });
        s.filter('name',"yfc"); //过滤掉其他数据,保留这条
        s.each(function(model){
        alert(model.get('name'));
        });
        var index = s.find('name','yfc',0,false,true,false);
        alert(index);
        });
        //// 对应的person.jsp文件代码
        <%@page language="java" contentType="text/html" pageEncoding="UTF-8"%>
        <%
        response.getWriter().write("[{name:'uspcat.com',age:1},{name:'yfc',age:26}]");
        %>
    • Ext.data.TreeStore
  • Ext.data.Store 使用
    • 参数
    • autoLoad(Boolean/Object) : 自动加载数据,自动调用load
      • 使用ajax代理方式时用load方法执行数据加载(防止阻塞时加载数据为空),用data时用autoLoad配置
    • data(Array) : 内置数据对象的数组,初始化时就会被装载
    • model(Model): 数据集合相关的模型
    • fields(Field):字段的集合,程序会自动生成对应的Model
    • 方法
    • each( Function f, [Object scope] ) : void 遍历数据中的Model

事件机制

  • 事件的3种绑定方式

    • HTML/DHTML

      function hello(){
      alert("事件绑定");
      }
      <input type="button" id="btn" value="事件绑定" onClick="hello()">
    • DOM
      if(Ext.isIE){
      document.getElementById("btn").attachEvent("onclick",function(){
      alert("事件绑定");
      });
      }else{
      document.getElementById("btn").addEventListener("click",function(){
      alert("事件绑定");
      });
      }
    • Extjs
      Ext.get('btn').on("click",function(){
      alert("事件绑定");
      })
  • Ext.util.Observable 事件的基类
    • 为所有支持事件机制的extjs组件提供事件支持

      • 创建的新组件需要事件支持就继承他
    • 事件分类
      • 标准事件

        • 键盘按键,鼠标的单击、双击、滑过、拖动
      • 业务事件
        • 面板收起、组件被销毁时、每个对象的属数值不为空时
    • 自定义事件案例
      • 没有用到事件处理的场景

        • 母亲问孩子饿不饿–>孩子饿了(给一瓶牛奶)|不饿(不给)
      • 用了事件的场景
        • 母亲给孩子一瓶牛奶–>孩子拿到牛奶感觉饿了就喝不饿就不喝
      • 角色功能分析:
        • 孩子:应该有自己能拿到牛奶判断饿不饿的方法,当母亲给他牛奶时调用这个方法,孩子要有一个业务事件时刻监听母亲什么时候给牛奶
        • 母亲:调用孩子拿牛奶的方法传入一瓶牛奶
          Ext.define("children",{
          extend:'Ext.util.Observable',
          constructor:function(){
          this.state = "hungry", //目前状态
          this.getMilk = function(milk){
          this.fireEvent('hungry',milk); //触发事件
          },
          this.addEvents({'hungry':true}), //添加事件
          this.addListener("hungry",function(milk){ //注册事件
          if(this.state == 'hungry'){
          this.drink(milk);
          }else{
          alert("不饿");
          }
          }),
          this.drink = function(milk){
          alert("喝掉牛奶: "+milk);
          }
          }
          });
          var children = Ext.create("children",{}); //本对象牛奶过敏
          Ext.util.Observable.capture(children,function(eventName){ //阻止事件
          if(eventName == "hungry"){
          alert('这个孩子牛奶过敏');
          return false;
          }else{
          return true;
          }
          })
          //母亲调用孩子的接受牛奶的方法
          children.getMilk("三鹿");
  • relayEvents 事件的分发和传播(控制实现事件在不同组件或对象内的传播)
    • 如孩子去医院,老爸要带着去

      //父亲类没有声明过任何监听事件
      Ext.define("father",{
      extend:'Ext.util.Observable',
      constructor:function(config){
      this.listeners = config.listeners;
      this.superclass.constructor.call(this,config);
      }
      });
      var father = Ext.create("father",{});
      father.relayEvents(children,['hungry']);
      father.on("hungry",function(){
      alert("送孩子去医院");
      });
  • addManagedListener 受管制的监听
    • 由调用的组件管理,当组件执行销毁命令时所有被组件管制的事件全部销毁

      var tbar = Ext.create('Ext.toolbar.Toolbar',{
      renderTo:Ext.getBody(),
      width:500,
      items:[
      {xtype:'button',id:'create',text:'create'},
      {xtype:'button',id:'delete',text:'delete'},
      {xtype:'button',text:'销毁删除按钮',handler:function(){
      var c = Ext.getCmp("delete"); //getCmp('id');根据组件ID得到组件
      if(c){
      c.destroy();
      }
      }}
      ]
      });
      var deleteB = Ext.getCmp("delete");
      deleteB.addManagedListener(Ext.getCmp("create"),'click',function(){
      alert('添加操作');
      });
      //Ext.getCmp("create").on("click",function(){});类似
  • 事件对象Ext.EventObject
    • 可以通过e判断键盘按键、功能键、按下位置等等

      Ext.get("btn")on("click",function(e){
      alert(e.getPageX())
      });
  • 事件管理器Ext.EventManager
    • 可以更方便的为页面元素绑定事件处理函数
    • 方法:addListener 为元素增减事件
      Ext.EventManager.addListener("btn",'click',function(){
      alert("通过事件管理器进行事件的监听注册");
      })

ajax

Ext.Ajax是Ext.data.Connection的一个子类,提供了用简单方式进行Ajax的功能实现

  • 主要方法

    • abort : 终止一个没有完成的Ajax请求
    • isLoading : 判断指定的Ajax请求是否正在运行
    • paresStatus : 返回请求响应的代码
    • request : 发送服务器请求(重点)
      Ext.get('btn').on("click",function(){
      Ext.Ajax.request({
      url : 'person.jsp',
      params:{id:'01'},
      method : 'POST',
      timeout :3000,
      form:"myform", // 表单的id
      success :function(response , options){
      alert(eval(response.responseText)[0].name);
      },
      failure :function(response , options){
      alert(response.responseText+" "+options)
      }
      });
      })
      //// 对应的html文件代码
      <form id="myform">
      Name:<input type="text" name="name"><br>
      Pass:<input type="password" name="pass"><br>
      <input type="button" value="login" id="btn">
      </form>
      //// 对应的person.jsp文件代码
      <%@page language="java" contentType="text/html" pageEncoding="UTF-8"%>
      <%
      String id = request.getParameter("id");
      if("01".equals(id)){
      response.getWriter().write("[{id:'01',name:'happy','age':26,email:'2018@126.com'}]");
      }
      %>
  • jsonData方式向后台传输数据(不常用,传参数足够)
    var data = "{id:'01',name:'happy','age':26,email:'happy@126.com'}";
    Ext.Ajax.request({
    url : 'person.jsp',
    method : 'POST',
    timeout :3000,
    jsonData:data,
    success :function(response , options){
    alert(eval(response.responseText)[0].name);
    },
    failure :function(response , options){
    alert(response.responseText+" "+options)
    }
    });
  • Ext.ElementLoader 方便重构页面
    • load方法

      Ext.get('btn').on("click",function(){
      var time = Ext.get("time").getLoader(); // time为ID
      time.load({
      url:'/extjs/extjs!getTime.action',
      renderer:function(loader,response,request){ // 请求成功时执行
      var time = response.responseText;
      Ext.getDom("time").value = time;
      }
      });
      })
    • startAutoRefresh 方法
      Ext.get('btn').on("click",function(){
      var count = Ext.get('count').getLoader();
      count.startAutoRefresh(1000,{ // 每隔一秒执行一次
      url:'/extjs/extjs!getI.action',
      renderer:function(loader,response,request){
      var count = response.responseText;
      Ext.getDom("count").value = count;
      }
      });
      })
  • 多级联动菜单
    //// 定义创建option的方法
    function createChild(value,name){
    var el = document.createElement("option");
    el.setAttribute("value",value);
    el.appendChild(document.createTextNode(name));
    return el;
    }
    //var data = {}; // 常用的数据尽量采用缓存机制
    Ext.onReady(function(){
    //1.得到city这个dom对象
    var cityObj = Ext.get("city");
    //2.我们为这个city对象注册一个change
    cityObj.on("change",function(e,select){
    //3.得到改变后的数值
    var ids = select.options[select.selectedIndex].value;
    //3.1 先去前台缓存变量中查数据,当没有时再去后台拿
    if(data["city"]){
    //直接操作
    }else{
    //做ajax请求
    }
    //4.ajax请求后台数据
    Ext.Ajax.request({
    url:'/extjs/extjs!menu.action',
    params:{ids:ids}, // 根据ids返回对应的地区
    method:'post',
    timeout:4000,
    success:function(response,opts){
    var obj = eval(response.responseText); //eval将字符串转换成对象
    //5.得到地区的那个对象area DOM
    var oldObj = Ext.get("area").dom;
    //6.清除里面项
    while(oldObj.length>0){
    oldObj.options.remove(oldObj.length-1);
    }
    //7.加入新的项
    Ext.Array.each(obj,function(o){
    Ext.get('area').dom.appendChild(createChild(o.valueOf(),o.name));
    })
    //8.把从数据库拿到的数据进行前台页面缓存
    }
    });
    });
    });
    //// 对应的html文件代码
    <select name="city" id="city">
    <option value="beij" selected>北京市</option>
    <option value="tianj">天津市</option>
    </select>
    <select name="area" id="area">
    <option value="def" selected>-----</option>
    </select>

Ext类和core包

  • Ext.core.Element

    • API解释

      • 组建和控件的基础
      • 对DOM对象的封装(Document Object Model)
    • 获取Element
      • Ext.core.Element.fly(String/HTMLElement el, [String named] ) : Element
      • Ext.get(Mixed el) : Element
    • Element 相关方法
      • addClsOnClick( String className ) : Ext.core.Element
      • addClsOnOver( String className ) : Ext.core.Element
        var elDiv = Ext.core.Element.fly("divId");
        elDiv.addClsOnOver("className"); //鼠标滑过时增加样式滑出时移除样式
      • addKeyMap( Object config ) : Ext.util.KeyMap
        var input = Ext.get("inputId");
        var fn = function(){
        alert("单击B按钮调用这个函数")
        }
        input.addKeyMap({key:Ext.EventObject.B,ctrl:false,fn:fn,scope:inputId});
      • addKeyListener( Number/Array/Object/String key, Function fn, [Objectscope] ) : Ext.util.KeyMap
        inputId.addKeyListener({key:Ext.EventObject.X,ctrl:true},function(){
        alert("单击ctrl+x")
        },inputId);
      • appendChild( String/HTMLElement/Array/Element/CompositeElement el ) : Ext.core.Element
        function createChild(){
        var el = document.createElement("h5");
        el.appendChild(document.createTextNode("被追加的h5"));
        return el;
        }
        Ext.get("divId").appendChild(createChild());
      • createChild( Object config, [HTMLElement insertBefore], [Boolean returnDom] ) : Ext.core.Element
        Ext.getBody().createChild({
        tag:'li',
        id:'item1',
        html:'子节点'
        });
  • Ext.core.DomHelper
    • 容易操作页面的HTML和DOM元素
    • append( Mixed el, Object/String o, [Boolean returnElement] ) : HTMLElement/Ext.core.Element 追加孩子
      var p = Ext.create("Ext.panel.Panel",{
      width:400,
      height:300,
      html:"<p id='pId'>hello word</p>",
      id:'myPanel',
      title:'my panel',
      renderTo:"divId"
      });
      Ext.core.DomHelper.append(Ext.get("pId"),"<br><div id='d'>被追加元素</div>");
    • 追加兄弟结点
      • insertAfter( Mixed el, Object o, [Boolean returnElement] ) :
      • insertBefore( Mixed el, Object/String o, [Boolean returnElement] ) :
    • applyStyles 添加样式
      Ext.core.DomHelper.applyStyles(Ext.get("pId"),"color:red");
    • createDom( Object/String o ) : HTMLElement
      var html = Ext.core.DomHelper.createDom("<h1>hello</h1>");
      alert(html)
  • Ext方法
    • onReady( Function fn, Object scope, Boolean withDomReady, Object options ) : void

      • 在文件和onload加载之后,image加载之前执行
    • get()和getCmp( String id ) : void
      • get(‘id’);在html中通过id获取元素
      • getCmp(‘id’);在组件管理器中通过id获取组件
        Ext.create("Ext.panel.Panel",{
        width:400,
        height:300,
        html:'<p>hello word</p>',
        id:'mypCmp',
        title:'my panel',
        renderTo:"divId"
        });
        var divId = Ext.getCmp("mypCmp");
        divId.setTitle("new title");
    • select( String/Array selector, [Boolean unique], [HTMLElement/String root] )
      • 通过类名获取元素

        var el = Ext.select("className");
        alert(el);
    • query( String path, [Node root] ) : Array
      • xpath
      • 类似XML查询节点的方法(语法 Ext.DomQuery)
        var arr = Ext.query("TR TD"); //返回tr下的所有td元素
        alert(arr)
    • isEmpty( Mixed value, [Boolean allowEmptyString] ) : Boolean
      alert(Ext.isEmpty('',true));  //flase默认值
      alert(Ext.isEmpty('',false)); //true
    • namespace( String namespace1, String namespace2, String etc ) : Object
      • 用于分包管理应用

        Ext.namespace("App.Model","App.Core");
        App.Model.A = {
        name:'happy'
        };
        App.Core.A = function(){
        alert("App.Core.A");
        };
    • each( Array/NodeList/Mixed iterable, Function fn, Object scope, Boolean reverse ) : Boolean
      • 遍历数组

        var array = [-1,23,4,6,7,8];
        Ext.each(array,function(i){
        alert(i);
        })
    • apply( Object object, Object config, Object defaults ) : Object
      • 扩展一个对象

        var a = {
        name:'happy'
        }
        Ext.apply(a,{getName:function(){
        alert(this.name);
        }});
        a.getName();
    • encode( Mixed o ) : String
      • 将一个对象进行编码

        var a = {
        name:'happy'
        }
        alert(Ext.encode(a));
    • htmlDecode
      • 将特殊的html转义符转义成html

        Ext.Msg.alert("hello",Ext.htmlDecode("<h1>hel&gtlo</h1>"));
    • typeOf( Mixed value ) : String
      • 过去变量的类型

        alert(Ext.typeOf("")); //string
        alert(Ext.typeOf(function(){})); //function

Ext.util包

  • Ext.util.CSS

    • createStyleSheet( String cssText, String id ) : StyleSheet

      • 创建一个id为styleId的style标签,并添加样式.className{color:red}

        Ext.util.CSS.createStyleSheet(".className{color:red}","styleId");
        Ext.get("divId").addClsOnOver("className");
    • removeStyleSheet( String id ) : void
      • 移除样式表

        Ext.get("btn").on("click",function(){
        Ext.util.CSS.removeStyleSheet("styleId");
        });
    • getRule( String/Array selector, Boolean refreshCache ) : CSSRule
      • 获取样式

        var cssObj = Ext.util.CSS.getRule(".className",true);
        alert(cssObj.style.color);
    • updateRule( String/Array selector, String property, String value ) : Boolean
      • 更新样式

        Ext.get("btn").on("click",function(){
        Ext.util.CSS.updateRule(".className","color","#990055");
        });
    • swapStyleSheet( String id, String url ) : void
      • 切换样式表

        var i = 1;
        Ext.get("btn").on("click",function(){
        if(i%2==0){
        Ext.util.CSS.swapStyleSheet("linkIdOne","hrefOne.css");
        Ext.get("divId").addClsOnOver("className")
        i++;
        }else{
        Ext.util.CSS.swapStyleSheet("linkIdTwo","hrefTwo.css");
        Ext.get("divId").addClsOnOver("className")
        i++;
        }
        })
  • Ext.util.ClickRepeater
    • 控制元素指定时间内的单击事件(元素没有失去焦点)

      new Ext.util.ClickRepeater(Ext.get("btn"),{
      delay:3000, //单击时执行第1次,3秒后执行第2次
      interval:4000, //重复调用后每隔4秒执行1次
      stopDefault:true, //停止这个el上的默认单击事件
      handler:function(){
      alert("单击我");
      }
      });
  • Ext.util.DelayedTask 代替setTimeout
    var task = new Ext.util.DelayedTask(function(){
    alert("waiting...");
    });
    Ext.get("btn").on("click",function(){
    task.delay(4000);
    task.cancel();
    });
  • Ext.util.Format 格式化的公共类
    • ellipsis() : void

      • 从0取指定长度字符进行显示,其余的用…代替

    • capitalize( ) : void
      • 将str的首字母大写

        • alert(Ext.util.Format.capitalize(str));
    • date( String/Date value, String format ) : String
      • alert(Ext.util.Format.date(new Date(),”Y年-m月-d日”));
    • substr( String value, Number start, Number length ) : String
      • 从指定位置截取指定长度的子串

        • alert(Ext.util.Format.substr(str,0,5));
    • lowercase( String value ) : String
      • 字符串转小写

        • alert(Ext.util.Format.lowercase(“USPCAT.COM”))
    • number( Number v, String format ) : String
      • 格式化显示数字

        • alert(Ext.util.Format.number(“12344556.7892”,”0,000.00”))
    • nl2br( String str ) : String
      • 将字符串中的转义符转成html元素

        • alert(Ext.util.Format.nl2br(“asd\n123”))
  • Ext.util.MixedCollection 集合类
    • add( String key, Object o ) : Object

      • 添加单个项

        var items = new Ext.util.MixedCollection();
        var a = {name:'a'};
        var b = {name:'b'};
        items.add("01",a);
        items.add("02",b);
        alert(items)
    • addAll( Object/Array objs ) : void
      • 添加多个项

        var items = new Ext.util.MixedCollection();
        var array = [];
        array.push(a);
        array.push(b);
        items.addAll(array);
    • clear( ) : void
      • 清除所有项

        • items.clear();
    • clone( ) : MixedCollection
      • 清除所有项

        • items = items.clone();
    • 判断集合中是否有相应的对象
      • contains( Object o ) : Boolean

        • alert(items.contains(a));
      • containsKey( String key ) : Boolean
        • alert(items.containsKey(“01”));
    • each( Function fn, [Object scope] ) : void
      items.each(function(item){
      alert(item.name)
      });
    • 从集合中得到单个对象
      • get( String/Number key ) : Object

        • alert(items.get(“01”).name);
      • first( ) : Object
        • alert(items.first().name);
    • 集合相关事件
      • add,clear,remove,replace

        items.on("add",function(index,o,key ){
        alert("集合items有了一个新的成员 : "+key)
        });
        items.add("03",{name:'c'});
  • Ext.util.TaskRunner 模拟线程控制
    var runner = new Ext.util.TaskRunner();
    var task = {
    run:function(){
    Ext.getDom("Id").value = Ext.util.Format.date(new Date(),"Y-m-d-s");
    },
    interval:1000
    }
    runner.start(task);
    Ext.get("btn").on("click",function(){
    runner.stop(task);
    })

Ext.js基础的更多相关文章

  1. Ext JS 6学习文档-第3章-基础组件

    Ext JS 6学习文档-第3章-基础组件 基础组件 在本章中,你将学习到一些 Ext JS 基础组件的使用.同时我们会结合所学创建一个小项目.这一章我们将学习以下知识点: 熟悉基本的组件 – 按钮, ...

  2. Ext JS学习第八天 Ext基础之 认识Ext.js 和Ext-more.js

    此文来记录学习笔记: •认识Ext.js 和Ext-more.js •首先,我们要知道这2个js文件的作用,这俩个文件包含了Ext的一些基础定义.基本的属性和方法,我们要重点学习和深入底层代码进行研究 ...

  3. Ext JS学习第九天 Ext基础之 扩展原生的javascript对象

    此文来记录学习笔记: •Ext对于原生的javascript对象进行了一系列的扩展,我们把他们掌握好,更能深刻的体会Ext的架构,从而对我们的web开发更好的服务, 源码位置,我们可以从开发包的这个位 ...

  4. Ext JS - 问答

    Ext JS - 问答 在下面你将可以找到关于Ext JS 的最常见问题的答复.如果没有找到您所需的答复,请访问 Ext JS 论坛或者提交一个支持申请. 如果你确信你的问题可以对本页有补充,请让我们 ...

  5. 《Ext JS模板与组件基本知识框架图----模板》

    最近在整理Ext JS的模板和组件,在参考<Ext JS权威指南>,<Ext JS Web应用程序开发指南>,<Ext JS API>等相关书籍后才写下这篇< ...

  6. 【转载】《Ext JS 4 First Look》翻译之一:新特性

    免责声明:     本文转自网络文章,转载此文章仅为个人收藏,分享知识,如有侵权,请联系博主进行删除.     原文作者:^_^肥仔John      原文地址:http://www.cnblogs. ...

  7. Ext JS学习第五天 我们所熟悉的javascript(四)

    此文用来记录学习笔记: •javascript之对象.面向对象 •可能对于高级语言你可能了解甚至精通OOP面向对象,那么对于javascript你又熟悉多少呢?我们一起来学习javascript面向对 ...

  8. 【翻译】Sencha Ext JS 5公布

    原文:Announcing Sencha Ext JS 5 简单介绍 我代表Sencha和整个Ext JS团队,非常自豪的宣布,在今天,Sencha Ext JS 5公布了.Ext JS 5已经迈出了 ...

  9. 【翻译】Ext JS 6.2 早期访问版本发布

    原文:Announcing Ext JS 6.2 Early Access 非常开心,Sencha Ext JS 6.2早期访问版本今天发布了.早期访问版本的主要目的是为了让大家进行测试并评估Ext ...

随机推荐

  1. mysql数据库权限

    use mysql select * from user \G; UPDATE user set password=PASSWORD('root') where user='root' grant a ...

  2. centos设置代理上网

    centos设置代理上网   假设我们要设置代理为 IP:PORT 1.网页上网 网页上网设置代理很简单,在firefox浏览器下 Edit-->>Preferences-->> ...

  3. IDFA踩坑记录

    IDFA踩坑记录: 1.iOS10.0 以下,即使打开“限制广告跟踪”,依然可以读取idfa: 2.打开“限制广告跟踪”,然后再关闭“限制广告跟踪”,idfa会改变: 3.越狱机器安装开发证书打的包, ...

  4. Tomcat环境变量设置

    tomcat环境变量配置     CATALINA_HOME:D:\server\apache-tomcat-8.5.32 //安装目录      CATALINA_BASE:D:\server\ap ...

  5. springcloud21---Config-bus实现配置自动刷新

    Pivotal(毕威拓)有VMware和EMC成立的. RabbitMQ是由ERlang(爱立信开发的,面向并发的编程语言),安装RabbitMQ先要安装ERlang. package com.itm ...

  6. DB开发之oracle存储过程

    1. 存储过程格式 /* Formatted on 2011/1/17 13:20:44 (QP5 v5.115.810.9015) */ CREATE OR REPLACE procedure pr ...

  7. 微信小程序中公用内容

    微信小程序中各个页面调用公用的js 在util.js文件中 // 跳转哪里 function go(where) { wx.reLaunch({ url: where, }) } // 将方法暴露出去 ...

  8. Asp.net下拉树实现(Easy UI ComboTree)

    场景描述:某个公司有多个部门并且部门存在子部门,通过一个下拉框选取多个部门,但是如果某个部门的子部门被全部选择,则只取该部门,而忽略子部门.(叶子节点全被选中时,只取父节点) 知识点:ComboTre ...

  9. nginx.conf 配置详解

    目录 pid user error_log worker_connections include http server nginx主配置文件中的内容 pid 主线程id的存储位置. # cat /u ...

  10. Java中的注解基础

    一.元注解 元注解的作用就是负责注解其他注解. 1.@Target @Target用来指明注解所修饰的目标,包括packages.types(类.接口.枚举.Annotation类型).类型成员(方法 ...