首页 / EXTJS / Extjs学习心得一
Extjs学习心得一
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Extjs学习心得一，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含8796字，纯文字阅读大概需要13分钟。
内容图文
学习必备
导入css：ext-all.css导入脚本：ext-all.js
javascript 的面向对象编程：
在javascript中函数的定义有两种方式：
第一种：直接定义：
如：
functionPerson1(){this.test =function(){return1;}}
这种方式定义的方法，每创建一个对象就会分配一部分内存给这个方法。比较占用内存。
另一种方法是：在prototype属性中定义：
functionPerson2(){}Person2.prototype.test =function(){return1;}
这种方法定义的方法，对于多个对象，都会共享同一个方法。只分配一次内存。
ext实现了javascript的面向对象的思想。可以使用ext.extend来实现继承。
Extjs 基本对象：
DOM：
在Ext中使用DOM获得Element的方法为Ext.Element.get();
例子为：
<!doctype html><html><head><metacharset="UTF-8"><title>Document</title></head><linkrel="stylesheet"type="text/css"href="resources/css/ext-all.css"/><scripttype="text/javascript"src="js/ext-all.js"></script><scripttype="text/javascript">Ext.onReady(function(){var myDiv =Ext.Element.get(‘myID‘);alert(myDiv);});</script><body><divid=‘myID‘/></body></html>
Ext.get（Ext.Element.get()简写）方法通常是获得Element实例，这样可以将这个实例传递给其他对象操作。但是有时只需要进行一次性的取值或设置，这样就可以使用Ext.fly()方法,这样使用完了以后就可以将对象丢弃了。
具体例子为：
<!doctype html><html><head><metacharset="UTF-8"><title>Document</title></head><linkrel="stylesheet"type="text/css"href="resources/css/ext-all.css"/><scripttype="text/javascript"src="js/ext-all.js"></script><scripttype="text/javascript">Ext.onReady(function(){var myDiv =Ext.get(‘myID1‘);console.debug(‘myDiv=%s‘,myDiv.dom.innerHTML);Ext.get(‘myID2‘);console.debug(‘myDiv=%s‘,myDiv.dom.innerHTML);var myFlyDiv =Ext.fly(‘myID1‘);console.debug(‘myFlyDiv=%s‘,myFlyDiv.dom.innerHTML);Ext.fly(‘myID2‘);console.debug(‘myFlyDiv=%s‘,myFlyDiv.dom.innerHTML);});</script><body><divid="myID1">It‘s a good day</div><divid="myID2">It‘s a nice day</div></body></html>
演示效果：
用Ext.get方法获得的实例是要传递给对象，因此，在本例中myDiv两次的值都是一样的，同一个对象。
但是Ext.fly()方法共享一个临时对象，因此，两次获得的值不一样。
一般在元素查找上jquery比Extjs效率要更高一点，因此，一般是用jquery进行元素定位，让利用Extjs进行渲染。
如：
<!doctype html><html><head><metacharset="UTF-8"><title>Document</title></head><linkrel="stylesheet"href="resources/css/ext-all.css"type="text/css"/><scripttype="text/javascript"src="js/ext-all.js"></script><scripttype="text/javascript"src="js/jquery-1.11.1.js"></script><scripttype="text/javascript">Ext.onReady(function(){$.each($(‘div.demoDiv‘),function(index,node){Ext.get(node).update("Demo:"+index);});});</script><body><divclass="demoDiv"></div><divclass="demoDiv"></div><divclass="demoDiv"></div><divclass="demoDiv"></div></body></html>
通过Element可以对DOM节点来进行操作。
要修改DOM节点的内容，可以使用Element.update()方法，这个方法有三个参数，第一个为要修改的HTML字符串（必需），第二个为是否执行HTML字符串中的脚本（布尔型，非必需），第三个参数为回调函数（非必需）。
但这种方法里，对于HTML字符串中的脚本需要进行转义处理。因此可以使用另一种方法来更新，load()方法就由Extjs来实现了自动处理脚本标签。
使用createChild()可以创建新的子节点。
读取或修改DOM节点或属性可以使用Ext.get().getAttribute()方法和Ext.get().set(config)。
使用Element来查找HTML元素。
有以下方法：
child(selector,returnDom)这个方法只返回符合选择器条件的一个直接子节点。
如：
<!doctype html><html><head><metacharset="UTF-8"><linkrel="stylesheet"type="text/css"href="resources/css/ext-all.css"/><scripttype="text/javascript"src="js/ext-all.js"></script><scripttype="text/javascript">Ext.onReady(function(){var childNode =Ext.get(‘myBookList‘).child(‘ol‘).child(‘li‘);console.debug(childNode.dom.innerHTML);});</script><title>Document</title></head><body><divid="myBookList"><olid="numberedList"><li>One Hundred Years of Solitude</li><li>Odyssey</li><li>Iliad</li></ol><divid="bookSiteList"><ul><liid="no1">Amazon</li><liid="no2">Books</li><liid="no3">Page One</li></ul></div></div></body></html>
如果直接写Ext.get(‘myBookList‘).child(‘li‘)就会报错。因为没有li的直接子节点。
down(selector,returnDom)则是返回一个下属节点，不一定是直接子节点。
如：
var childNode =Ext.get(‘myBookList‘).down(‘li‘);
first(selector,returnDom)返回符合选择器的第一个子节点。需要是直接节点。
last(selector,returnDom)返回符合选择器的最后一个字节点，需要时直接节点。
如:
var childNode =Ext.get(‘myBookList‘).child(‘ol‘).last(‘li‘);
next(selector,returnDom)返回符合选择器的子节点的下一个兄弟节点。
parent(selector,returnDom)返回符合选择器的字节点的父节点，只返回一个。
findparent(selector,returnDom)返回符合选择器的子节点的父节点，只返回一个，但是parent（）方法会将找到的父节点放到缓存表，而findparent()方法不会。
DomQuery
查询多个元素，以数组形式返回。
is(el,selector)如果el符合selector规则，就返回true;否则返回false
如：
<!doctype html><html><head><metacharset="UTF-8"><linkrel="stylesheet"type="text/css"href="resources/css/ext-all.css"/><scripttype="text/javascript"src="js/ext-all.js"></script><scripttype="text/javascript">var result =Ext.DomQuery.is(‘song1‘,‘li:contains(With or without you)‘);console.debug(result);</script><title>Document</title></head><body><h1>Enterainment</h1><divid="myFavoriteBangs"><h2>My favorite bangs:</h2><ol><liid="1"class="item">Guns N‘ Roses</li><liid="2"class="item">U2</li><liid="3"class="item">Aerosmith</li><liid="4"class="item">Led Zeppelin</li></ol></div><divid="myFavoriteSong"><h2>My favorite songs:</h2><ol><liid="song1"class="item">With or without you</li><liid="song2"class="item">Mr.Brownstone</li><liid="song3"class="item">Season of wither</li></ol></div></body></html>
修改文件结构：
可以将某个节点插入到某个节点之前或之后。常用的方法有：
appendTo(el);将当前节点编程父节点的子节点。
appendChild(el);将源节点变成当前节点的子节点。
insertBefore(el);将当前节点放在目的节点之前。
replace(e1);以当前元素取代e1
模板：
有时需要将页面设计和实际的数据相分离，因此可以采用模板的方法，将页面的设计固定好在模板上，数据部分留下占位符，等到数据传入时再将数据引入模板种。
如：
<!doctype html><html><head><metacharset="UTF-8"><linkrel="stylesheet"type="text/css"href="resources/css/ext-all.css"/><scripttype="text/javascript"src="js/ext-all.js"></script><scripttype="text/javascript">Ext.onReady(function(){var customers =[{name:‘Aitch Chung‘,age:27, gender:‘Male‘},{name:‘Mary Wang‘,age:25, gender:‘Female‘},{name:‘Johncy Fun‘,age:29, gender:‘Female‘}];var personTemplate =newExt.Template(‘<div >‘,‘<h3>{name}</h3>‘,‘<p >Age:{age}</p>‘,‘<p >Gender:{gender}</p>‘,‘</div>‘);Ext.each(customers,function(customer,index){personTemplate.append(Ext.getBody(),customer);},this);});</script><title>Document</title></head><bodystyle="padding:10px;"></body></html>
有时需要更复杂的模板来处理循环和判断，因此可以使用DTemplate模板，
如下面是循环的例子：
<!doctype html><html><head><metacharset="UTF-8"><title>Document</title></head><linkrel="stylesheet"type="text/css"href="resources/css/ext-all.css"/><scripttype="text/javascript"src="js/ext-all.js"></script><scripttype="text/javascript">Ext.onReady(function(){var saleRecord ={name:‘Aitch Chung‘,age:27,dob:‘1983-01-01‘,buyingRecords:[{id:1, item:‘ipod-classic‘,date:‘2010-01-30‘},{id:2, item:‘Pilot pen‘, date:‘2010-02-30‘},{id:3, item:‘Sinn U1‘, date:‘2010-03-30‘}]};var saleInfoTemplate =newExt.XTemplate(‘<div >‘,‘<p>Name:{name}</p>‘,‘<p>Age:{age}</p>‘,‘<p>DOB:{dob}</p>‘,‘<ol>‘,‘<tpl for="buyingRecords">‘,‘<li>‘,‘ID:{id},‘,‘product:{item},‘,‘Date:{date}‘,‘</li>‘,‘</tpl>‘,‘</ol>‘,‘</div>‘);saleInfoTemplate.compile();saleInfoTemplate.append(Ext.getBody(),saleRecord);});</script><bodystyle="padding;10px;"></body></html>
下面是判断的例子：
<!doctype html><html><head><metacharset="UTF-8"><linkrel="stylesheet"type="text/css"href="resources/css/ext-all.css"/><scripttype="text/javascript"src="js/ext-all.js"></script><scripttype="text/javascript">Ext.onReady(function(){var drinks =[{type:‘whiskey‘,brand:‘J. Walker‘, prd:‘Red Label‘,age:8},{type:‘whiskey‘,brand:‘J. Walker‘, prd:‘Black Label‘,age:10},{type:‘whiskey‘,brand:‘J. Walker‘, prd:‘Green Label‘,age:12},{type:‘whiskey‘,brand:‘J. Walker‘, prd:‘Blue Label‘,age:16},{type:‘cognac‘,brand:‘Hennessy‘, prd:‘V.S.O.P‘,age:4},{type:‘cognac‘,brand:‘Hennessy‘, prd:‘X.O‘,age:8}];var drinkTemplate =newExt.XTemplate(‘<ol>Fine Wines:‘,‘<tpl for=".">‘,‘<li>‘,‘Name:{brand},{prd}‘,‘<tpl if="type==\‘whiskey\‘&& age >=12">‘,‘<span > Great Choice</span>‘,‘</tpl>‘,‘<tpl if="type==\‘cognac\‘ && age >=8">‘,‘<span > Great Choice</span>‘,‘</tpl>‘,‘</li>‘,‘</tpl>‘,‘</ol>‘);drinkTemplate.compile();drinkTemplate.append(Ext.getBody(),drinks);});</script><title>Document</title></head><body></body></html>
原文：http://www.cnblogs.com/shengzhai/p/4146882.html
内容总结
以上是互联网集市为您收集整理的Extjs学习心得一全部内容，希望文章能够帮你解决Extjs学习心得一所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】