经常使用事件:

其它重要方法:

详细实例:(实例结果能够将相应的代码取消凝视进行測试)

Ext.onReady(function(){

	Ext.create('Ext.panel.Panel',{
title:'我的面板' ,
width:'100%' ,
height:400 ,
renderTo:Ext.getBody(),
html:'<div id=d1><span id=sp>我是sp的内容</span><div id=d2>我是d2的内容</div></div><input id=inp value=123 /><form id=f1><input name=uname value=bhx /><input name=pwd value=123 /></form>'
});
//查询系最经常使用的方法:
//Ext.dom.Element get fly getDom
var d1 = Ext.get('d1');
var sp = Ext.get('sp'); //一:为元素加入事件
//1 : addKepMap:为元素创建一个KeyMap对象
// var inp = Ext.get('inp');
// inp.addKeyMap({ //Ext.util.KeyMap ====>Class 怎样加入一个键盘事件
// key:Ext.EventObject.A , //Ext.EventObject 相关的键盘按键能够在该类中查找
// ctrl:true , //按下Ctrl键
// fn:function(){
// alert('按ctrl+A ,运行!!');
// } ,
// scope:this //范围 该实例结果仅仅有当焦点在输入框中才起作用。在其它地方不起作用。由于是给inp加入的
// }); //2 : addKeyListener:为KeyMap绑定事件
//參数说明: String/Number/Number[]/Object key, Function fn, [Object scope]
// var inp = Ext.get('inp');
// inp.addKeyListener({
// key:Ext.EventObject.X ,
// ctrl:false
// },
// function(){
// alert('x运行了..');
// },
// this); //作用方位 //二:元素绑定经常使用事件
// var inp = Ext.get('inp');
// inp.on('click',function(){ //绑定事件 //详细事件在Ext.dom.Element中查看
// alert('运行了...');
// });
// inp.un('click'); //取消绑定
// inp.focus(); //控件获取焦点 blur失去焦点 //三:其它重要且经常使用的方法:
var inp = Ext.get('inp');
var sp = Ext.get('sp');
//1: center:使元素居中
//inp.center(); //默觉得浏览器中间
//inp.center('d1'); //d1中间 //2: clean:清理空白的文本节点
//3: createShim:为元素创建一个iframe垫片保证选择或其它对象跨域时可见 //4: getLoader:返回ElementLoader对象//11: load:直接调用ElementLoader的load方法为元素载入内容
// var loader = inp.getLoader(); //ElementLoader
// loader.load({ //载入远程server中的内容
// url:'base/dom_loader.jsp' ,
// renderer:function(loader ,response){
// //把对象转换成字符串表示形式:Ext.encode
// //把一个字符串转换成javascript对象: Ext.decode
// var obj = Ext.decode(response.responseText);//传唤成对象
// Ext.getDom('inp').value = obj.name ;//将输入框中的内容改为获取的Json对象中的name
// }
// });
/** 当中dom_loader.jsp中的内容为:
* <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
* {
* name:'张三',
* age:10
* }
*/ //5: highlight 高亮显示特效
//sp.highlight(); //渐变高亮特效 //6: show 、hide显示隐藏元素
//6:fadeIn、fadeOout淡入淡出 与show和hide相似
// var d2 = Ext.get('d2'); //获取对象设置样式
// d2.setStyle('width','100px');
// d2.setStyle('height','100px');
// d2.setStyle('backgroundColor','red');
//d2.show(); //马上显示
// d2.hide(); //马上隐藏
//d2.show({duration: 2000});//2秒钟内逐渐显示
// d2.hide({duration: 2000});//2秒钟内逐渐消失 //7: ghost 元素移动特效 在一定时间内向某个方向移动逐渐消失
// d2.ghost('b', { duration: 2000 }); // r/b/l/t 右 下左 上 //8: slideIn、slideOut向上向下滑动
//d2.slideIn('b',{duration: 2000});
//d2.slideOut('r',{duration: 2000}); //9: getValue:假设元素有value属性,返回其值
//alert(inp.getValue()); //获取输入框的value值 //10: normalize:将CSS属性中的连接符号去掉,比如将“font-size”转为fontSize这样。 //11 :mask:遮罩当前元素。屏蔽用户操作。 unmask:移除遮罩
// Ext.getBody().mask('请稍等..');
// // window.setTimeout(function(){
// // Ext.getBody().unmask();
// // },2000);
// Ext.defer(function(){ //这个经常使用
// Ext.getBody().unmask();
// },2000);//设定时间
/** defer函数介绍
* defer( Function fn, Number millis, [Object scope], [Array args], [Boolean/Number appendArgs] ) : Number
* Calls this function after the number of millseconds specified,
* optionally in a specific scope
*/ //12: repaint:强迫浏览器又一次绘画元素 //13: serializeForm:序列化为URL编码的字符串
//alert(Ext.dom.Element.serializeForm('f1'));
//返回结果: 返回字符串:uname=bhx&pwd=123
//<form id=f1><input name=uname value=bhx /><input name=pwd value=123 /></form> //14: update:更新元素的innerHTML属性 //15: unselectable:禁用文本选择
//inp.unselectable(); //结果:文本输入框中的内容不能被选中 });

ExtJS学习--------Ext.Element中的经常使用事件和其它重要的方法学习(实例)的更多相关文章

  1. ExtJS学习--------Ext.Element中其它操作方法学习

    (1)对齐操作 (2)尺寸操作 (3)定位操作 (4)滚动操作 (5)经常使用事件方法

  2. ExtJS得知--------Ext.Element学习的查询方法(示例)

    详细实例:(实验结果可复制代码后进行演示) Ext.onReady(function(){ Ext.create('Ext.panel.Panel',{//创建一个面板 title:'我的面板' , ...

  3. 【ExtJs】ext前台中的日期控件传输时间到后台的转换保存过程

    //前台日期选择框 {fieldLabel:, padding: ',afterLabelTextTpl: required,allowBlank: false,format: 'Y-m-d H:i: ...

  4. ext: gridpanel中的点击事件的参数是什么意思?

    listeners: {      // 当用户单击列表项时激发该函数      itemclick: function(view, record, item, index, evt)  //①    ...

  5. C#Winform ListView中没有Item双击事件的两种实现方法!

    第一种: //if (this.listView1.FocusedItem != null) //{ // if (this.listView1.SelectedItems != null) // { ...

  6. Java学习之InputStream中read()与read(byte[] b)

    Java学习之InputStream中read()与read(byte[] b) 这两个方法在抽象类InputStream中都是作为抽象方法存在的, JDK API中是这样描述两者的: read() ...

  7. 《Cocos2d-x游戏开发实战精解》学习笔记3--在Cocos2d-x中播放声音

    <Cocos2d-x游戏开发实战精解>学习笔记1--在Cocos2d中显示图像 <Cocos2d-x游戏开发实战精解>学习笔记2--在Cocos2d-x中显示一行文字 之前的内 ...

  8. [转载]Extjs中的dom,Ext.Element和Ext.Component对象的关系

    原文地址:http://www.cnblogs.com/lwzz/archive/2011/01/30/1948106.html   Ext.Element对象是对dom对象的封装,目的是为了跨平台以 ...

  9. ExtJS学习-----------Ext.Array,ExtJS对javascript中的Array的扩展

    关于ExtJS对javascript中的Array的扩展.能够參考其帮助文档,文档下载地址:http://download.csdn.net/detail/z1137730824/7748893 因为 ...

随机推荐

  1. Troubleshooting:oVirt-engine

    问题:执行./create_db_devel.sh -u postgres创建数据库时出错 描述: [root@localhost dbscripts]# ./create_db_devel.sh - ...

  2. 在WPF的DATAGRID中快速点击出现在ADDNEW或EDITITEM事务过程不允许DEFERREFRESH

    原文 在WPF的DATAGRID中快速点击出现在ADDNEW或EDITITEM事务过程不允许DEFERREFRESH 在项目中关于DataGrid的遇到过一些问题,其中是关于迁入CheckBox的双向 ...

  3. ajax表单提交全路径

    //ajax提交form表单的方式 $(document).ready(function() { $('#shopping-submit').click(function() { alert(&quo ...

  4. ajax提交整个form表单

    在项目开发中,有时提交form表单时不能单单用action或者jquery的 表单提交方法有三种,主要说下第三种 第一种:用form自带属性action提交 第二种:用jquery提交:$(" ...

  5. 当向计算机中存入一个float类型的数值2.2 后,在从计算机中读出输出,这时2.2 的值已经发生了变化(转)

    problom : 'f1' value hava been changed when output. reason : the binary repersentation of 2.2f is : ...

  6. “add measurements”(添加度量)菜单问题

  7. 开源解析器--ANTLR

      序言 有的时候,我还真是怀疑过上本科时候学的那些原理课究竟是不是在浪费时间.比方学完操作系统原理之后我们并不能自己动手实现一个操作系统:学完数据库原理我们也不能弄出个像样的DBMS出来:相同,学完 ...

  8. hdu 5014 思维题/推理

    http://acm.hdu.edu.cn/showproblem.php?pid=5014 从小数開始模拟找方法规律,然后推广,尤其敢猜敢尝试,错了一种思路继续猜-----这是一种非常重要的方法啊 ...

  9. 全面解读WM_NOTIFY

    VC中的消息的分类有3种:窗口消息.命令消息和控件通知消息,我们这里要谈的是最后一种:控件通知消息. 控件通知消息,是指这样一种消息,一个窗口内的子控件发生了一些事情,需要通知父窗口.通知消息只适用于 ...

  10. javascript 自己主动绑定JS callback 的方法函数

    自己写的一个javascript 智能绑定callback 而且调用运行的函数.主要用于异步请求的 ajax中: <!DOCTYPE html> <html> <head ...