• Ext.js基础

    第一章：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("
"));
    • 数据代理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("
")); //每次刷新都会加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(),
    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",{
    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",{
    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 123”))
    • 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);
})
  • 相关阅读:
    redis配置文件redis.conf总结
    react井字棋小游戏实现及优化
    springboot 如何在请求进入controller之前改变body中的值
    记录一个Springboot启动的问题->sprinboot正常启动但是tomcat却没有启动
    websocket-基于springboot的简单实现
    JVM-垃圾回收
    gRPC-Java实践
    Protocol Buffers—-java
    串口通信学习-基础
    Modbus通信协议学习
  • 原文地址：https://www.cnblogs.com/happyzwt/p/8299445.html
Copyright © 2020-2023  润新知