ExtJS-学习

day 16----Ext.的方法

ExtJS扩展的javascript--路径
Ext-6.2.0\packages\core\test\specs\lang

----Ext.Object----chain(把当前传入的对象当成新创建对象的原型)
//chain
var obj ={
name:'bjsxt',
age:10
};
var result=Ext.Object.chain(obj);
//alert(result.name);
//alert(result.age);
//判断是否属于result下的属性
alert(result.hasOwnProperty('name'));//false,,它属于原生的obj属性

-----each
迭代--遍历
var obj={
name:'张三',
age:20,
sex:'男',
};
Ext.Object.each(obj,function(key,value,self){
alert(key+':'+value);
if(age==20){
return false;//停止迭代
}
});

-------fromQueryString
var str ="name=bjsxt&age=10";
var obj=Ext.Object.fromQueryString(str);
alert(Ext.encode(obj));//返回字符串的形式

-------getKey
根据指定的值，返回一个匹配的key

------toQueryObjects(查询字符串)

------toQueryString(把对象查询返回一个字符串)

-----Ext.Number
Ext.Number.constrain()
alert(Ext.Number.constrain(5,1,20));//如果第一个数在1到20之间，返回，如果比20大，返回20，小于1.返回1
alert(Ext.Number.randomInt(1,100));//随机产生一个数
alert(Ext.Number.toFixed(3.1415926,3));//保留三位小数

-----Ext.String

day17
1.---Ext.Array数组
Ext.Array.clean();//把一个数组中的空值或空串去掉

---difference(arr1,arr2);//以第一个数组位准，去掉与第二个数组重复的元素，输出

----each();//迭代

----erase
var arr=[1,2,3,4,5];
alert(Ext.Array.erase(arr,2,2));//输出1,2，5，移除了从左边数0开始，第二位是3，移除两位--三和四

----filter
var arr=[1,2,3,4,10,18,23];
var newarr=Ext.Array.filter(arr,function(item){
if(item>10){
return false;
}else{
return true;
}
});
alert(newarr);//输出将大于10的数移除掉

---include
var arr=[1,2,3,4];
Ext.Array.include(arr,20);
alert(arr);//输出数组中不包含的元素20添加，如果包含不添加

---unqiue//去掉重复元素
var arr=[1,2,2,3,5,6,8,8];
var obj={};
for(var i=0,len=arr.length;i obj[arr[i]]=true;//去掉重复项

}
alert(Ext.encode(obj));
var uniquearr=[];
for(var i in obj){
if(obj.hasOwnProperty(i)){//判断是否属于自己的类型
uniquearr.push(i);//添加
}
}
alert(uniquearr);

 

2.-----Function
--var objsay=Ext.Function.alias(obj,'say');//起别名，将方法obj里的say方法起别名赋值给objsay

----bind 绑定作用域的相当于call.apply
----defer(task,3000);三秒后执行task方法

3.----Date
alert(Ext.Date.format(new Date(),'Y-m-d H:i:s'));

day18-----动态加载JS文件--Ext.Loader
方便把扩展的组件动态加载进来
---自己扩展的组件,创建一个ux文件夹---当然extjs自己的ux也封装了一些
在ux下创建MyWindow.js
//define的类名，一定要严格按照层次路径去编写
Ext.define('js.extjs.ux.MyWindow',{
extend:'Ext.window.Window',
title:'我是动态加载进来的组件',
});

//动态加载一个JS文件
//第一步，在js/extjs/添加文件夹（ux）
//在这个ux文件夹下建立自己的组件所对应的js文件
//第二步，在js/extjs/ux下编写自己的扩展的组件
//第三步，启用ext 动态加载的机制，并设置要加载的路径
Ext.Loader.setConfig({
enabled:true,
path:{
myux:'js/extjs/ux'
}
});
//第四步，创建类的实例并使用
Ext.create('js.extjs.ux.MyWindow').show();

 

day19---Ext之DOM
--Ext.Element(几乎对Dom的一切进行了彻底的封装)核心类
--Ext.DomHelper(强大的操控UI界面的工具类)
--Ext.DomQuery(用来进行DOM节点查询)

//Ext.get 使用了缓存机制来提升获取DOM节点的效率Ext.Element
//get 方法的描述
/*
1.首先去Ext.cache缓存里去查找，如果缓存里有，直接返回即可
2.如果缓存里没有，那再去页面上查找，如果页面里没有，返回null
3.如果页面里没有，把当前内容加入到缓存里，
*/
var d1=Ext.get('d1');//Ext.Element
alert(d1.dom.innerHTML);

//Ext.fly
/*
fly:使用了javascript经典的'享元模式'来提升效率，从而节约内存，更加低碳化
返回的对象：fly对象，当然你可以理解成为返回的就是Ext封装好的Ext.Element对象

*/
var d2=Ext.fly('d2');
d2.dom.innerHTML='AAA';

-----总结
--Ext.get 比较消耗内存，尽量避免使用
--Ext.fly 虽然比较省内存，但是只能被使用一次
--Ext.getDom非常适合直接获取页面的元素，并返回的就是DOM元素，如果你想操作DOM元素
的属性，那这个方法是最好不过的了

day20

//查询系方法：
--contains:判断元素是否包含另一个元素
--child:从元素的直接子元素中选择与选择符匹配的元素
--down:选择与选择符匹配的元素的子元素
--first:选择元素第一个子元素
--Ext.qurty:根据选择符获取元素
--Ext.select:根据选择符获取元素的集合

day21
//操作dom系的方法
1.--appendTo：将当前元素追加到指定元素中
sp.appendTo(Ext.get('d2'));

2.---为元素添加事件
//addKepMap:为元素创建一个KepMap 对象
var inp=Ext.get('inp');
inp.addKeyMap({
key:Ext.EventObject.A,
ctrl:true,
fn:function(){
alert('按住ctrl+A,执行');
}
scope:this
});

3.--- addKeyListener:为KeyMap 绑定事件
var inp=Ext.get('inp');
inp.addKeyListener({
key:Ext.EventObject.X,
ctrl:false
},
function(){
alert('执行了....');
}this);

---on:绑定事件
---un:移除事件
---click:单机事件
---blur:失去焦点事件
---focus:获得焦点事件

---其他方法
center:使元素居中
clean:清理空白的文本节点
createShim:为元素创建一个iframe 垫片保证选择或其他对象跨域时可见
getLoader:返回ElementLoader对象
highlight:高亮显示特效
show ,hide 显示隐藏元素
ghost :元素移动特效
fadeln,fadeOout:淡入淡出
slideln,slideOut:向上向下滑动

----
getValue:如果元素有value 属性，返回其值
mask:遮罩当前元素，屏蔽用户操作
unselectable：禁用文本选择

day22---DomHepler辅助工具类操作DOM元素
//DomHeloer
//createHtml或markup方法
配置项说明
tag 元素的名称
children/cn表示子元素
cls表示样式
html:文本内容
----------------
var html=Ext.DomHepler.createHtml({
tag:'ol',
cn:{
{tag:'li',html:'item1'},
{tag:'li',html:'item2'}
}
});
console.info(html);//控制台输出

转载于:https://www.cnblogs.com/fdxjava/p/10718366.html