ExtJS-学习

2019/04/16 17:09
阅读数 18

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<len;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);//控制台输出

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部