1、获取页面上的HTML元素,并进行处理,使用Ext.get('elid')方法,参数为HTML元素的id值,由此可对获取到的元素进行各种处理。例如:
var el = Ext.get("the-id");
var appendEl = Ext.get("the-id-append");
function fn1(){
Ext.Msg.alert("提示","您在id为'the_id'的Element上按下了ctrl+c键");
}
el.addCls("special-css");//为元素添加样式表
appendEl.addCls("special-css");
appendEl.setWidth(240);
appendEl.setWidth(240, true);
el.focus();//将焦点移到el元素上
el.addClsOnFocus("focus-css");//为得到和失去焦点添加和移除css类
el.addClsOnOver("mouseover-css");//为鼠标移入移出事件添加和移除css类
el.addClsOnClick("click-css");//为点击事件添加和移除css类
el.setWidth(240);//将元素的宽度设为100相素
el.setWidth(240, true);//将元素的宽度设为100并带有动画效果
el.addKeyMap({key : "c",ctrl : true,fn:fn1,scope:el});//绑定el元素当键盘按下ctrl+c键时将呼叫fn函数
el.addKeyListener({key:"g",ctrl:true},fn1,el);//和上面的addKeyMap的功能相同,只是参数的传递方式不同
2、获取页面上的HTML元素,还可用select方法,可以获取一系列元素,也可为之设定相同的事件,或者进行相同的设置,例如:
var el = Ext.select(["div1","div2"],true);
el.on("click",function tes(e){
Ext.Msg.alert("提示","您点击了id为" + Ext.get(e.target).dom.id + "的节点");
});
3、获取页面上的HTML元素,还可以用query方法,与前面的区别在于参数不同,例如:
//选择元素为div其id为div1的节点的数组
var el = Ext.query("#div1");
//选择元素为div的且这些div具备属性为property1其值为pro1的节点的数组
var targetD = Ext.query('div[property1=pro1]');
if(el.length>0 || targetD.length>0){
var msg = '';
msg = "取得了"+el.length+"个div的id为'div1'的节点<br>"+"取得了"+targetD.length+"个类型为div<br>具备属性property1且其值为'pro1'的节点";
msg += "<br>内容为:";
for(var i = 0; i<el.length; i++)
{
msg += el[i].id + ":" + el[i].innerHTML;
}
msg += "<br>内容为:";
for(var i = 0; i<targetD.length; i++)
{
msg += targetD[i].id + ":" + targetD[i].innerHTML;
}
Ext.Msg.alert('提示',msg);
}
4、获取Ext的组件,用getCmp方法,然后根据其特定类型可以进行相应的处理,例如:
//获得id为'panel1'的组件
var comp = Ext.getCmp('panel1');
Ext.Msg.alert('提示',"取得的id为'panel1'的组件的类型为"+comp.getXType());
comp.setTitle("aaaaaa");
5、获取元素的DOM,使用getDom方法
//获得id为'panel1'的组件的Dom,其执行结果和panel.el.dom相同
var comp = Ext.getDom('panel1');
Ext.Msg.alert('提示',"通过Ext.getDom取得的dom的id:"+comp.id+
"<br>通过另一种方式取得panel的dom其id:"+panel.el.dom.id);
6、判断对象是否为空,用isEmpty方法,例如:
//判断对象是否为空
//当判断字符串时如果第二个参数不不同时结果也会不同
//第二个参数表示'是否允许字符串为空'
Ext.Msg.alert('提示',"我们已经实例化的panel是否为空?"+Ext.isEmpty(panel)+"<br>Ext.isEmpty('',true)的值:"+Ext.isEmpty("",true)+"<br>Ext.isEmpty('',false)的值"+Ext.isEmpty("",false));
7、Ext.each方法的使用示例:
//定义一个集合
var array = [],i;
//为集合加入元素,这些元素为从0到9的数字
for(i=0;i<10;i++){
array.push(i);
}
function fn(item,index,allItems){
//如果跌代对象的元素值大于5则终止跌代执行
if(item>5){
return false;
}else{
//为集合元素中值小于5的元素进行字符串的追加
allItems[index] = item+"_st"
}
}
function fn1(item,index,allItems){
if(index>0)
return false;
//只执行一次
Ext.Msg.alert('最后的处理结果',
"<div style='width:160px'>最后集合为:"+allItems+"</div>");
}
//对集合进行字符串的追加
Ext.each(array,fn);
//打印集合的所有元素值
Ext.each(array,fn1);
8、Ext.apply方法的使用示例:
//定义两个对象,一个目标对象一个源对象
var tarObj = {},srcObj
srcObj = {};
srcObj.name = "源对象";
srcObj.text = "我的文本内容已经从srcObj中拷贝过来了";
srcObj.width = "130px";
//调用Ext.apply进行处理,从srcObj中拷贝属性到tarObj中
Ext.apply(tarObj,srcObj);
Ext.Msg.alert('Ext.apply示例',"tarObj的属性如下:<br>name:"+
tarObj.name+"<br>text:"+tarObj.text+
"<br>width:"+tarObj.width);
9、Ext.encode方法,将对象转换为字符串
var person = {name : 'Tom', age: 24};//定义一个json对象
Ext.Msg.alert("提示",Ext.encode(person));//打印将对象转变成字符串
分享到:
相关推荐
该ppt参照extjs4书籍及extjs官网中示例编写而成。能够帮助大家了解extjs4.
自己才刚刚学习了extjs近1个月有余,边总结边学习,这些应该对初学者比较适用,自己总结的
第十五讲:extjs4.0的高级组件grid补充02插件和其他相关知识 第十六讲:extjs4.0的高级组件tree上 第十七讲:extjs4.0的高级组件tree下 第十八讲:extjs4.0的高级组件tree+grid整合案例上 第十九讲:extjs4.0的高级...
10月28日-11月4日,3W携手青云QingCloud、UCloud、金山云、AWS等云服务提供商,为北京、深圳、武汉、福州四地的中小企业技术人员带来云技术应用的专业知识与技能分享。
第十五讲:extjs4.0的高级组件grid补充02插件和其他相关知识 第十六讲:extjs4.0的高级组件tree上 第十七讲:extjs4.0的高级组件tree下 第十八讲:extjs4.0的高级组件tree+grid整合案例上 第十九讲:extjs4.0的高级...
第十五讲: EXTJS4.0的高级组件Grid补充02插件和其他相关知识 第十六讲: EXTJS4.0的高级组件Tree上 第十七讲: EXTJS4.0的高级组件Tree下 第十八讲: EXTJS4.0的高级组件Tree+Grid整合案例上 第十九讲: EXTJS4.0的高级...
ext学习中很好的资料和总结,包含了ext的主要内容部分。
第十五讲:extjs4.0的高级组件grid补充02插件和其他相关知识 第十六讲:extjs4.0的高级组件tree上 第十七讲:extjs4.0的高级组件tree下 第十八讲:extjs4.0的高级组件tree+grid整合案例上 第十九讲:extjs4.0的...
ExtJs 3.1 框架的小例子合集源代码,EXT主库需远程调用,部分代码还有些错误,可能是EXT调用的问题,研究过EXT的应该很容易就修正,不懂的朋友就当是了解一些前奏知识吧,必竟EXT相对来说是比较复杂的,在界面方面...
这是一份Extjs2.0的技术材料,全部是基础知识,非常适合初学者。
不仅全面地阐述了ExtJS的基础知识,而且深入浅出地讲解了ExtJS开发中的高级技巧,同时还给出了大量专家级的建议。通过学习本书,读者将感受到ExtJS的无穷魅力和Ajax技术带来的完美体验。 本书适合有一定CSS和HTML...
该文档有30页,详细介绍了从零开发一个ExtJS6的应用程序。该教程涵盖了ExtJS6的大多数知识点。如果你的ExtJS感兴趣,并且按照教程一步一步的做了,掌握ExtJS开发是轻而易举的事。学不会你的打我。
ext精髓,Extjs如何与数据库交互,可以很快的叫你EXT一些知识
不仅全面地阐述了ExtJS的基础知识,而且深入浅出地讲解了ExtJS开发中的高级技巧,同时还给出了大量专家级的建议。通过学习本书,读者将感受到ExtJS的无穷魅力和Ajax技术带来的完美体验。 本书适合有一定CSS和HTML...
简述ExtjS的基础知识的运用,用助于新手的学习
1、本人上传过两个关于ExtJS6开发的文档,得到了各位的积极评价,有好几位还发邮件或加qq进一步交流,大家的进步就是我最大的快乐; 2、教程是入门教程,知识点全面,推荐给初学者; 3、如果大家按照文档一步步照做...
非常好的基础学习知识,包括详细例子,以及注意事项等
主要内容有: 程序结构 对象简介 程序编写建议
第4章 ExtJS事件机制 4.1 设计模式——观察者模式 4.2 自定义事件 4.3 浏览器事件 4.4 ExtJS中的事件 4.4.1 Function.call()/apply()方法 4.4.2 函数的作用域 4.4.3 Ext.lib.Event事件 4.4.4 Ext.util....