码迷，mamicode.com
首页 > Web开发 > 详细

Extjs学习心得一

时间：2014-12-05 16:55:30      阅读：188      评论：0      收藏：0      [点我收藏+]

标签：style   blog   http   io   ar   color   os   使用   sp   

学习必备

导入css：ext-all.css
导入脚本：ext-all.js

javascript 的面向对象编程：

在javascript中函数的定义有两种方式：
第一种：直接定义：
如：
  1. function Person1(){
  2.    this.test = function(){
  3.    return 1;
  4.    }
  5. }
这种方式定义的方法，每创建一个对象就会分配一部分内存给这个方法。比较占用内存。
另一种方法是：在prototype属性中定义：
  1. function Person2(){
  2. }
  3. Person2.prototype.test = function(){
  4.   return 1;
  5. }
这种方法定义的方法，对于多个对象，都会共享同一个方法。只分配一次内存。
ext实现了javascript的面向对象的思想。可以使用ext.extend来实现继承。

Extjs 基本对象：

DOM：

  在Ext中使用DOM获得Element的方法为Ext.Element.get();
例子为：
  1. <!doctype html>
  2. <html >
  3.  <head>
  4.   <meta charset="UTF-8">
  5.   <title>Document</title>
  6.  </head>
  7.  <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"/>
  8.  <script type="text/javascript" src="js/ext-all.js"></script>
  9.  <script type="text/javascript">
  10.    Ext.onReady(function(){
  11.      var myDiv = Ext.Element.get(‘myID‘);
  12. 	 alert(myDiv);
  13.    });
  14.  </script>
  15.  <body>
  16.  <div id=‘myID‘/>  
  17.  </body>
  18. </html>
Ext.get（Ext.Element.get()简写）方法通常是获得Element实例，这样可以将这个实例传递给其他对象操作。但是有时只需要进行一次性的取值或设置，这样就可以使用Ext.fly()方法,这样使用完了以后就可以将对象丢弃了。
具体例子为：
  1. <!doctype html>
  2. <html >
  3.  <head>
  4.   <meta charset="UTF-8">
  5.   <title>Document</title>
  6.  </head>
  7.  <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"/>
  8.  <script type="text/javascript" src="js/ext-all.js"></script>
  9.  <script type="text/javascript">
  10.    Ext.onReady(function(){
  11.    var myDiv = Ext.get(‘myID1‘);
  12.    console.debug(‘myDiv=%s‘,myDiv.dom.innerHTML);
  13.    Ext.get(‘myID2‘);
  14.    console.debug(‘myDiv=%s‘,myDiv.dom.innerHTML);
  15.    var myFlyDiv = Ext.fly(‘myID1‘);
  16.    console.debug(‘myFlyDiv=%s‘,myFlyDiv.dom.innerHTML);
  17.    Ext.fly(‘myID2‘);
  18.    console.debug(‘myFlyDiv=%s‘,myFlyDiv.dom.innerHTML);
  19.    });
  20.  </script>
  21.  <body>
  22.   <div id="myID1">It‘s a good day</div>
  23.   <div id="myID2">It‘s a nice day</div>
  24.  </body>
  25. </html>
演示效果：
bubuko.com,布布扣
用Ext.get方法获得的实例是要传递给对象，因此，在本例中myDiv两次的值都是一样的，同一个对象。
但是Ext.fly()方法共享一个临时对象，因此，两次获得的值不一样。
一般在元素查找上jquery比Extjs效率要更高一点，因此，一般是用jquery进行元素定位，让利用Extjs进行渲染。
如：
  1. <!doctype html>
  2. <html >
  3.  <head>
  4.   <meta charset="UTF-8">
  5.   <title>Document</title>
  6.  </head>
  7.  <link rel="stylesheet" href="resources/css/ext-all.css" type="text/css"/>
  8.  <script type="text/javascript" src="js/ext-all.js"></script>
  9.  <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
  10.  <script type="text/javascript">
  11.    Ext.onReady(function(){
  12.     $.each($(‘div.demoDiv‘),function(index,node){
  13. 	Ext.get(node).update("Demo:"+index);
  14. 	});
  15.    });
  16.  </script>
  17.  <body>
  18.   <div class="demoDiv"></div>
  19.   <div class="demoDiv"></div>
  20.   <div class="demoDiv"></div>
  21.   <div class="demoDiv"></div>
  22.  </body>
  23. </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)这个方法只返回符合选择器条件的一个直接子节点。
如：
  1. <!doctype html>
  2. <html >
  3.  <head>
  4.   <meta charset="UTF-8">
  5.   <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"/>
  6.   <script type="text/javascript" src="js/ext-all.js"></script>
  7.   <script type="text/javascript">
  8.     Ext.onReady(function(){
  9. 	 var childNode = Ext.get(‘myBookList‘).child(‘ol‘).child(‘li‘);
  10. 	 console.debug(childNode.dom.innerHTML);
  11. 	});
  12.   </script>
  13.   <title>Document</title>
  14.  </head>
  15.  <body>
  16.   <div id="myBookList">
  17.    <ol id="numberedList">
  18.     <li>One Hundred Years of Solitude</li>
  19. 	<li>Odyssey</li>
  20. 	<li>Iliad</li>
  21.    </ol>
  22.    <div id="bookSiteList">
  23.     <ul>
  24. 	 <li id="no1">Amazon</li>
  25. 	 <li id="no2">Books</li>
  26. 	 <li id="no3">Page One</li>
  27. 	</ul>
  28.    </div>
  29.   </div>
  30.  </body>
  31. </html>
如果直接写Ext.get(‘myBookList‘).child(‘li‘)就会报错。因为没有li的直接子节点。
down(selector,returnDom)则是返回一个下属节点，不一定是直接子节点。
如：
  1. var childNode = Ext.get(‘myBookList‘).down(‘li‘);
first(selector,returnDom)返回符合选择器的第一个子节点。需要是直接节点。
last(selector,returnDom)返回符合选择器的最后一个字节点，需要时直接节点。
如:
  1. 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
如：
  1. <!doctype html>
  2. <html>
  3.  <head>
  4.   <meta charset="UTF-8">
  5.   <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
  6.   <script type="text/javascript" src="js/ext-all.js"></script>
  7.   <script type="text/javascript">
  8.    var result = Ext.DomQuery.is(‘song1‘,‘li:contains(With or without you)‘);
  9.    console.debug(result);
  10.   </script>
  11.   <title>Document</title>
  12.  </head>
  13.  <body>
  14.   <h1>Enterainment</h1>
  15.   <div id="myFavoriteBangs">
  16.   <h2>My favorite bangs:</h2>
  17.    <ol>
  18.     <li id="1" class="item">Guns N‘ Roses</li>
  19. 	<li id="2" class="item">U2</li>
  20. 	<li id="3" class="item">Aerosmith</li>
  21. 	<li id="4" class="item">Led Zeppelin</li>
  22.    </ol>
  23.   </div>
  24.   <div id="myFavoriteSong">
  25.    <h2>My favorite songs:</h2>
  26.    <ol>
  27.     <li id="song1" class="item">With or without you</li>
  28. 	<li id="song2" class="item">Mr.Brownstone</li>
  29. 	<li id="song3" class="item">Season of wither</li>
  30.    </ol>
  31.    </div>
  32.  </body>
  33. </html>
修改文件结构：
可以将某个节点插入到某个节点之前或之后。常用的方法有：
appendTo(el);将当前节点编程父节点的子节点。
appendChild(el);将源节点变成当前节点的子节点。
insertBefore(el);将当前节点放在目的节点之前。
replace(e1);以当前元素取代e1

模板：
有时需要将页面设计和实际的数据相分离，因此可以采用模板的方法，将页面的设计固定好在模板上，数据部分留下占位符，等到数据传入时再将数据引入模板种。
如：
  1. <!doctype html>
  2. <html >
  3.  <head>
  4.   <meta charset="UTF-8">
  5.   <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"/>
  6.   <script type="text/javascript" src="js/ext-all.js"></script>
  7.   <script type="text/javascript">
  8.    Ext.onReady(function(){
  9.     var customers =[
  10. 	   {name:‘Aitch Chung‘,age:27, gender:‘Male‘},
  11. 	   {name:‘Mary Wang‘,age:25, gender:‘Female‘},
  12. 	   {name:‘Johncy Fun‘,age:29, gender:‘Female‘}
  13. 	];
  14. 	var personTemplate = new Ext.Template(
  15. 	‘<div class="personInfo">‘,
  16. 	‘<h3>{name}</h3>‘,
  17. 	‘<p class="age">Age:{age}</p>‘,
  18. 	‘<p class="gender">Gender:{gender}</p>‘,
  19. 	‘</div>‘);
  20. 	Ext.each(customers, function(customer,index){
  21. 	 personTemplate.append(Ext.getBody(),customer);
  22. 	},this);
  23.    });
  24.   </script>
  25.   <title>Document</title>
  26.  </head>
  27.  <body style="padding:10px;">
  28.   
  29.  </body>
  30. </html>
有时需要更复杂的模板来处理循环和判断，因此可以使用DTemplate模板，
如下面是循环的例子：
  1. <!doctype html>
  2. <html >
  3.  <head>
  4.   <meta charset="UTF-8">
  5.   <title>Document</title>
  6.  </head>
  7.  <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
  8.  <script type="text/javascript" src="js/ext-all.js"></script>
  9.  <script type="text/javascript">
  10.   Ext.onReady(function(){
  11. 	  var saleRecord = {
  12. 	  name: ‘Aitch Chung‘,
  13. 	  age:27,
  14. 	  dob:‘1983-01-01‘,
  15. 	  buyingRecords:[
  16. 		  {id:1, item:‘ipod-classic‘,date:‘2010-01-30‘},
  17. 		  {id:2, item:‘Pilot pen‘, date:‘2010-02-30‘},
  18. 		  {id:3, item:‘Sinn U1‘, date:‘2010-03-30‘ }
  19. 	  ]
  20. 	  };
  21.    var saleInfoTemplate = new Ext.XTemplate(
  22.    ‘<div class="sale-style">‘,
  23.    ‘<p>Name:{name}</p>‘,
  24.    ‘<p>Age:{age}</p>‘,
  25.    ‘<p>DOB:{dob}</p>‘,
  26.    ‘<ol>‘,
  27.      ‘<tpl for="buyingRecords">‘,
  28.      ‘<li>‘,
  29. 	      ‘ID:{id},‘,‘product:{item},‘,‘Date:{date}‘,
  30. 	 ‘</li>‘,
  31.      ‘</tpl>‘,
  32. 	 ‘</ol>‘,
  33. 	 ‘</div>‘
  34.    );
  35.    saleInfoTemplate.compile();
  36.    saleInfoTemplate.append(Ext.getBody(),saleRecord);
  37.   });
  38.  </script>
  39.  <body style="padding;10px;">
  40.   
  41.  </body>
  42. </html>
下面是判断的例子：
  1. <!doctype html>
  2. <html >
  3.  <head>
  4.   <meta charset="UTF-8">
  5.   <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
  6.   <script type="text/javascript" src="js/ext-all.js"></script>
  7.   <script type="text/javascript" >
  8.     Ext.onReady(function(){
  9. 	 var drinks = [
  10. 		{type:‘whiskey‘,brand:‘J. Walker‘, prd:‘Red Label‘,age:8},
  11. 		{type:‘whiskey‘,brand:‘J. Walker‘, prd:‘Black Label‘,age:10},
  12. 		{type:‘whiskey‘,brand:‘J. Walker‘, prd:‘Green Label‘,age:12},
  13. 		{type:‘whiskey‘,brand:‘J. Walker‘, prd:‘Blue Label‘,age:16},
  14. 		{type:‘cognac‘ ,brand:‘Hennessy‘ , prd:‘V.S.O.P‘   ,age:4 },
  15. 		{type:‘cognac‘ ,brand:‘Hennessy‘ , prd:‘X.O‘   ,age:8}
  16. 	 ];
  17. 	 var drinkTemplate = new Ext.XTemplate(
  18. 	  ‘<ol>Fine Wines:‘,
  19. 	   ‘<tpl for=".">‘,
  20. 	    ‘<li>‘,
  21. 		  ‘Name:{brand},{prd}‘,
  22. 		  ‘<tpl if="type==\‘whiskey\‘&& age >=12">‘,
  23. 		    ‘<span style="color:#F00;"> Great Choice</span>‘,
  24. 		  ‘</tpl>‘,
  25. 		  ‘<tpl if="type==\‘cognac\‘ && age >=8">‘,
  26. 		   ‘<span style="color:#F00;"> Great Choice</span>‘,
  27. 		  ‘</tpl>‘,
  28. 		  ‘</li>‘,
  29. 		‘</tpl>‘,
  30. 	 ‘</ol>‘
  31. 	 );
  32. 	 drinkTemplate.compile();
  33. 	 drinkTemplate.append(Ext.getBody(),drinks);
  34. 	});
  35.   </script>
  36.   <title>Document</title>
  37.  </head>
  38.  <body>
  39.   
  40.  </body>
  41. </html>








Extjs学习心得一

标签：style   blog   http   io   ar   color   os   使用   sp   

原文地址：http://www.cnblogs.com/shengzhai/p/4146882.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！