- 浏览: 77146 次
文章分类
最新评论
-
angryfrank:
收获良多,赞
ExtJS4学习笔记十--Grid使用 -
万俟辉夜:
楼主知不知道怎么通过已知的行数和列数取得grid中该单元格的信 ...
ExtJS4学习笔记十--Grid使用 -
endual:
请问博主,我是用mvc的,请问form.panel怎么绑 ...
ExtJS4学习笔记九--数据模型的使用 -
365353650:
<%@ page language="java ...
ExtJS4学习笔记九--数据模型的使用 -
binjoo:
有password类型的文本框??
ExtJS4学习笔记二--表单控件相关
1、获取页面上的HTML元素,并进行处理,使用Ext.get('elid')方法,参数为HTML元素的id值,由此可对获取到的元素进行各种处理。例如:
2、获取页面上的HTML元素,还可用select方法,可以获取一系列元素,也可为之设定相同的事件,或者进行相同的设置,例如:
3、获取页面上的HTML元素,还可以用query方法,与前面的区别在于参数不同,例如:
4、获取Ext的组件,用getCmp方法,然后根据其特定类型可以进行相应的处理,例如:
5、获取元素的DOM,使用getDom方法
6、判断对象是否为空,用isEmpty方法,例如:
7、Ext.each方法的使用示例:
8、Ext.apply方法的使用示例:
9、Ext.encode方法,将对象转换为字符串
10、Ext.htmlDecode方法示例:
11、Ext.typeOf方法示例:
12、Ext.core.DomHelper示例:
13、DomQuery用法示例:
14、Ext.util.CSS示例:
15、格式化字符串示例:
16、MixedCollection示例(还有first,get等方法):
17、线程运行实例:
18、获得文本块的高和宽示例:
19、键盘绑定对象示例:
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));//打印将对象转变成字符串
10、Ext.htmlDecode方法示例:
Ext.Msg.alert("提示",Ext.htmlDecode("<table width='240' border='1' id='tab1' cellspacing='2' cellpadding='4'><tr><td>简单的html表格<input type='button' value='按钮'></td></tr></table>"));
11、Ext.typeOf方法示例:
var panel = new Ext.Panel({//实例化了一个对象 className:"test", title:"示例", renderTo:'sub1', width:'300px', html:"<div id='div1' style='height:200px'></div>" }); var el = Ext.select(["div1"],true); var array1 = new Array();//实例化了一个数组 el.on("click",function tes(){ Ext.Msg.alert("提示",'panel的类型是:'+Ext.typeOf(panel)+',array1的类型是:'+Ext.typeOf(array1)); });
12、Ext.core.DomHelper示例:
Ext.core.DomHelper.append(Ext.get("div1"),"<br>新追加了文本",true); //给id为div1的元素指定一个样式表 //其样式表的形式可以是直接用文本,如:font-size:18px //也可以用文本表示的对象,如:{font-size:18px;} Ext.core.DomHelper.applyStyles(Ext.get("div1"),"font-size:18px;color:green;font-weight:bold;"); var str = Ext.get("div1").dom.outerHTML; //由于Ext.Msg.alert会展示alert里的html //所以我们特意用文本框来展示应用了样式表后的div效果字符串 Ext.Msg.alert('DomHelper示例','<textarea rows="6" cols="35">'+str+'</textarea>'); //首先通过DomHelper.createTemplate创建一套模板 var test = Ext.core.DomHelper.createTemplate('<div name="{id}">'+ '<span class="{cls}">{name:trim} {value:ellipsis(10)}<br>第二行文本</span>'+ '</div>'); //通过定义的模板替换模板中的变量,然后追加在div的id为div1的div里面进行展现 test.append(Ext.get("div1"),{id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'},true); //给指定的div1在其后插入一个新的div,类似的有insertBefore方法,insertFirst方法 Ext.core.DomHelper.insertAfter(Ext.get("div1"),{id: 'item2', html: "<div id='div2' style='height:60px;padding:5px;background-color:#FEFCE7'>我是新追加的Div对象</div>"}); //给指定的div1在之前插入一个新的html Ext.core.DomHelper.insertHtml("beforeBegin",document.getElementById("div1"),"我是新插入的Html文本"); //给指定的div1替换新的html Ext.core.DomHelper.overwrite(document.getElementById("div1"),"我是新替换的Html文本");
13、DomQuery用法示例:
//获到所有的以id为div0为父节点的div //(在第二节中讲述过Ext.query的使用规则,忘记了的读者可以温习一下) var tarArry = Ext.query('#div0 div'); //选择那些不包含id为div1的节点 var except = Ext.core.DomQuery.filter(tarArry,"#div1",true); //选择那些包含id为div1的节点 var include = Ext.core.DomQuery.filter(tarArry,"#div1",false); //对对数组中是否包含指定id的节点进行判断 var isInclude = Ext.core.DomQuery.is(except,'#div0'); //选择以id为divo的所有div子点中的第一个节点 var selectNode = Ext.core.DomQuery.selectNode("#div0 div"); function retStr(array){ var str =""; for(var i=0;i<array.length;i++){ if(i<array.length-1) str+=(array[i].id+";"); else str+=array[i].id; } return str; } Ext.Msg.alert('返回结果',"不包含id为'div1'的所有div的id为:"+retStr(except)+ "<br>包含id为div1的所有div的id为:"+retStr(include)+ "<br>通过Ext.core.DomHelper.is(except,'#div0')的返回结果"+isInclude+ ",<br>表示"+retStr(except)+"是否包含id为div0的节点:"+ "<br>在id为div0的第一个子节点的id是:"+selectNode.id);
14、Ext.util.CSS示例:
//通过传递一个样式表描述文本创建一个指定的样式表和id为the绑定在一起 Ext.util.CSS.createStyleSheet(".myclass{color:blue}","the"); var cssObj = Ext.util.CSS.getRule(".myclass",true); Ext.Msg.alert('获取的信息','创建样式表<br>获取myclass样式表中规则的字体颜色:'+cssObj.style.color); Ext.util.CSS.createStyleSheet(".a1{font-size:12px;color:blue;}","thecss"); var pan = new Ext.panel.Panel({ title:'添加css并移除', html:'首先我们添加一个样式,然后移除他' , height:200, width:300, cls: 'a1' }); pan.render("hr_panel"); setBtn = new Ext.button.Button( text : '移除样式', width : 50, handler : function(){ Ext.util.CSS.removeStyleSheet("thecss"); } }); setBtn.render("setBut"); //定义使用改变个性化定制的控件 //该控制实际上为一个可供选择样式表值的下拉框 //当改变下拉框的选择时则调用Ext.util.CSS.swapStyleSheet来替换其样式表路径 Ext.onReady(function(){ var themes = [ {theme:'默认', css:'ext-all.css'}, {theme:'黑色',css: 'ext-all-access.css'}, {theme:'红色',css: 'ext-all-red.css'}]; //创建主题数据模型 Ext.regModel('Theme', { fields: ['theme','css'] }); //创建主题数据源 var themeStore = Ext.create('Ext.data.Store',{ model : 'Theme', data : themes }); //创建主题切换选择框 var themeChange = Ext.create('Ext.form.ComboBox',{ id : 'themeChange', width : 150, labelWidth : 60, labelSeparator :':',//分隔符 fieldLabel:'样式选择', store : themeStore, editable : false, triggerAction: 'all',//单击触发按钮显示全部数据 store : themeStore,//设置数据源 displayField : 'theme', valueField : 'css', queryMode: 'local',//本地模式 value:'ext-all.css',//默认风格 listeners : { 'collapse' : function() { Ext.util.CSS.swapStyleSheet('theme', 'extjs4/resources/css/'+ this.getValue()); contentIframe.window.themeChange(this.getValue()); } } }); //定义panel Ext.create('Ext.form.FormPanel',{ title:'Ext.form.ComboBox本地数据源示例', renderTo: Ext.getBody(), bodyPadding: 5, frame : true, height:100, width:270, defaults:{//统一设置表单字段默认属性 labelSeparator :':',//分隔符 labelWidth : 70,//标签宽度 width : 200,//字段宽度 labelAlign : 'left'//标签对齐方式 }, items:themeChange }); });
15、格式化字符串示例:
var str = "<table width='300' cellspacing=1 border=1 cellpadding=1><tr><td>table string</td></tr></table>"; var str1 = " aV"; var dat = new Date(); var str2 = 12345; var str3 = 1.2345; Ext.Msg.alert( "提示", "原str为:"+str+"<br>ellipsis(str,5)后为:<br>"+Ext.util.Format.ellipsis(str,5)+"<br><br>"+ "原strl为:"+str1+"<br>进行capitalize(str1)后为:<br>"+Ext.util.Format.capitalize(str1)+"<br>"+ "<br>原dat为:<br>"+dat+"<br>"+ "进行date(dat,'yyyy/mm/dd')后为:<br>"+Ext.util.Format.date(dat)+"<br><br>"+ "注意调用htmlDecode(str)后展现出来的是一个带边框的表格:<br>"+Ext.util.Format.htmlDecode(str)+"<br>"+ "原strl:"+str1+"<br>经过lowercase后为:<br>"+Ext.util.Format.lowercase (str1)+ "<br>原str2:"+str2+",经过number后为:"+Ext.util.Format.number(str2,"-1234.0")+ "<br>原str3:"+str2+",经过number后为:"+Ext.util.Format.round(str3,2) ); //通过用字符串描述一个对象 var jsonStr = "{name:'the json name', value: 'the json sample'}"; //将该字符串进行编码,这时将形成一个含有逻辑关系的对象 var obj = Ext.JSON.decode(jsonStr,true); //定义一些对象,最后用数组包装起来 var g='g',h='h',e =[g,h],f='f',b=[e,f],a = [b,'c']; //将该数组中存放的对象进行解码,打印该字符串 var endA = Ext.JSON.encode(a); Ext.Msg.alert('提示',endA);
16、MixedCollection示例(还有first,get等方法):
var item = new Ext.util.MixedCollection(); var item2 = new Ext.util.MixedCollection(); var a = {name:'a'}; var b = {name:'b'}; item.add('01',a); item.add('01',b); item2.add('01',a); item2.add('02',a); Ext.Msg.alert('提示','当已存在关联的索引时往01关联以象,item的个数为:'+item.length+'<br>'+'当不存在关联的索引往索引关联对象,item的个数为:'+item2.length);
var item = new Ext.util.MixedCollection(); var arr = []; arr.push({name:'a'}); arr.push({name:'b'}); item.addAll(arr); Ext.Msg.alert('提示','原item中的对象个数为:'+item.length+'<br>当加入arr数组中的两个对象后item中的对象个数为:'+item.length);
var item = new Ext.util.MixedCollection(); var arr = [{name:'a'},{name:'b'}]; item.clear(); Ext.Msg.alert('提示','当调用clear()后item的对象个数为:'+item.length);
var item = new Ext.util.MixedCollection(); item.addAll([{name:'a'},{name:'b'}]); var col = new Ext.util.MixedCollection(); col = item.clone(); item.clear(); Ext.Msg.alert('提示','当调用item的clone()后返回的col的对象个数为:'+col.length);
var item = new Ext.util.MixedCollection(); var obja = {name:'a'}; item.add('obj1',obja); Ext.Msg.alert('提示','集合中是否含有以obj1为关联索引的对象:'+item.containsKey('obj1')+'<br>集合中是否含有对象obja:'+item.contains(obja));
var item = new Ext.util.MixedCollection(); var obja = {name:'a'}; item.add('obj1',obja); item.add('obj2',{name:'b'}); item.each(function(tempObj){ tempObj.name='newA'; Ext.Msg.alert('提示','通过调用each后的名称为:'+tempObj.name); });
var item = new Ext.util.MixedCollection(); item.on('add',function(index,o,key){ Ext.Msg.alert('提示',' 当前有对象加入,加入后的index是:'+index+'<br> 该对象的name是:'+o.name+'<br> 加入对应的key是:'+key); }); item.add('obj2key',{name:'nobj2name'});
var item = new Ext.util.MixedCollection(); item.on('remove',function(o,key){ Ext.Msg.alert('提示','当前移除的对象的name是:'+o.name+'<br>其key是:'+key); }); item.add('obj2key',{name:'nobj2name'}); item.removeAtKey('obj2key');
var item = new Ext.util.MixedCollection(); var obj1 = {name:'obj1Name'}; var obj2 = {name:'obj2Name'}; item.add('obj1Key',obj1); item.replace('obj2Key',obj1); item.on('replace',function(key, oldO, newO){ Ext.Msg.alert('提示','当前被替换的对象的name是:'+oldO.name+'<br>其key是:'+key+'<br>新对象的name是:'+newO.name); }); item.replace('obj2Key',obj2);
17、线程运行实例:
var task ={ run:function(){ Ext.Msg.alert('提示','线程已经运行!我将每次运行将重复5次!但10秒后我将停止!'); }, interval:1000, repeat:5, duration:10000 }; var task1 = new Ext.util.TaskRunner(); task1.start(task);
18、获得文本块的高和宽示例:
var t = new Ext.util.TextMetrics('id01',5); Ext.Msg.alert("测试","通过getSize('the text')取得的文本块的宽度是:"+t.getSize('the text').width+ "<br>通过getHeight('new text test')取得的文本块的高度是:"+t.getHeight('new text test')+ "<br>measure('id01','重新测试方法',3)方法测试"+Ext.util.TextMetrics.measure('id01','重新测试方法',3).width);
19、键盘绑定对象示例:
var el = Ext.get("id01"); var nav = new Ext.KeyNav(el,{ "left" : function(e){ alert('向左的按键被按下了'); //this.moveLeft(e.ctrlKey); }, "right" : function(e){ alert('向右的按键被按下了'); //this.moveRight(e.ctrlKey); }, "enter" : function(e){ alert('回车键被按下了'); //this.save(); }, scope : el }); nav.enable();
发表评论
-
ExtJS4学习笔记十一 树控件的使用
2011-09-01 16:17 3227一、树面板简单示例 var ... -
ExtJS4学习笔记十--Grid使用
2011-09-01 15:24 16248一、grid的例: //配置表 ... -
ExtJS4学习笔记九--数据模型的使用
2011-09-01 14:43 61541、创建Ext.data.Model数据 ... -
ExtJS4学习笔记八--Template的使用
2011-09-01 14:21 54431、append方法 var tpl = new Ext.Te ... -
ExtJS4学习笔记七--事件绑定相关
2011-09-01 11:27 5969一、addListener方法 var button = Ex ... -
ExtJS4学习笔记五--面板使用
2011-08-31 17:06 5546标准面板: Ext.create('Ext.panel.Pan ... -
ExtJS4学习笔记四--图片上传
2011-08-31 15:51 3979前端程序: <HTML> <HEAD&g ... -
ExtJS4学习笔记三--远程访问数据源示例
2011-08-31 15:10 3301前端页面: <HTML> <HEAD&g ... -
ExtJS4学习笔记二--表单控件相关
2011-08-31 14:29 11395二、表单部分相关 <HTML> <HEA ... -
ExtJs4学习笔记一--基础知识
2011-08-31 11:42 5602开始学习ExtJs4,陆续记录学习过程,希望有所用处: 特别注 ...
相关推荐
本篇学习笔记将深入探讨EXTJS中ComboBox的联动效果,即一个ComboBox的选择会触发另一个ComboBox的数据更新,以此来提供更丰富的交互体验。通过源码解析和工具应用,我们将了解如何构建和实现这种联动效果。 ...
EXTJS in Action 是一本专为学习EXTJS编写的书籍,但这里我们主要关注学习笔记中的关键知识点。 首先,EXTJS的目录结构非常重要,因为它包含了所有必要的资源和源码: 1. `adapter`:这部分包含了适配器,用于将...
在本篇《ExtJS4学习笔记十一:树控件的使用》中,我们将深入探讨ExtJS框架中的树形控件(TreePanel),这是一种强大的UI组件,用于展示层次结构的数据。ExtJS4对树控件的功能进行了增强,使其更加灵活且易于使用。...
在探讨《ExtJS学习心得笔记》这一主题时,我们不仅会深入理解ExtJS框架的核心概念与实践技巧,还会从新手的角度出发,提炼出一系列有助于快速上手的学习策略,避免常见的学习陷阱,确保学习过程高效而有成效。...
【ExtJs 2.1学习笔记】主要涵盖了ExtJs框架的核心概念、组件使用以及数据通信等方面的知识点。以下是对这些内容的详细解析: 1. **ExtJs 结构树**:这部分内容介绍了ExtJs的组件层次结构,包括如何组织和嵌套组件,...
以下是对ExtJS 入门学习的一些关键知识点的详细解释: 1. **核心改进**: - **框架架构重构**:ExtJS 4 对框架进行了重构,提高了性能和健壮性。 - **测试框架**:全面的跨浏览器测试确保了框架的兼容性和稳定性...
总结起来,EXTJS 4的开发笔记涵盖了环境配置、MVC架构的理解、文件组织、动态加载机制以及界面美化等关键知识点。对于初学者来说,这是一个逐步学习EXTJS 4开发的良好起点,能够帮助他们理解EXTJS 4的核心特性和最佳...
### ExtJs 学习笔记知识点总结 #### 一、初识 ExtJs ##### 1.1 入门 - **背景介绍**: - **ExtJs**:一款强大的JavaScript库,用于构建现代化的Web应用程序。它提供了一系列丰富的UI组件、布局管理器以及数据...
以下是一些EXTJS 4.0 中的关键知识点: 1. **简化JS文件引用**:在EXTJS应用中,可以通过数组存储所有需要的脚本文件路径,然后遍历数组将它们动态写入HTML中。这有助于管理多个脚本文件,并确保按顺序加载。 2. *...
以下是一些关键知识点的详细说明: 1. **ExtJs 结构树**:这部分内容可能涉及ExtJs如何构建可自定义的用户界面组件树,包括容器、面板、表格等,并介绍如何组织和布局这些组件。 2. **对ExtJs的态度**:可能探讨了...
以下是对标题和描述中提及的一些知识点的详细解释: 1. **Ext.get**: `Ext.get` 是 ExtJS 中获取页面元素的重要方法,它是 `Ext.Element.get` 的别名。此方法接受一个参数,可以是元素的ID、DOM节点或者已经存在...
### EXTJS学习笔记 #### 一、EXTJS基础概念与命名空间管理 **EXTJS** 是一款基于JavaScript的开源框架,主要用于开发复杂的企业级Web应用。它的设计目标是提高前端开发效率并简化复杂的用户界面(UI)开发过程。在...
Extjs4.0学习与开发笔记 描述了菜单的实现、带搜索的Grid,带checkbox的可编辑的Grid等知识点,并附实现代码
以上知识点涵盖了ExtJS学习笔记中的核心内容,通过这些知识点的学习和实践,开发者能够入门并逐渐深入理解ExtJS框架,并将这些知识应用到实际的开发工作中去。对于希望深入学习ExtJS的开发者来说,理解这些基础知识...
### extjs学习笔记知识点梳理 #### 一、Ext.MessageBox 方法详解 Ext.MessageBox 是 ExtJS 库中的一个重要组件,用于向用户展示消息对话框。它包含了多种类型的消息对话框,每种对话框都有其特定用途。 - **Ext....
资源摘要信息之详细知识点: 一、基础知识: * div+css * html * js * ps/fw/dw 二、基础阶段: * 学习基础知识和基本技能 * 掌握div+css、fireworks和dreamweaver等 三、进阶阶段: * 学习框架、预处理、ajax...
通过上述知识点的组合应用,EXTJS可以构建出功能完备、用户体验良好的批量上传功能。"批量上传"这个压缩包可能包含了实现这一功能所需的全部代码、样式、支持文件及开发者的经验总结,对于学习和理解EXTJS批量上传...