Extjs学习心得一

学习必备

导入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>
演示效果：

用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>








posted @ 2014-12-05 15:57  shangzhai  阅读(372)  评论(0)    收藏  举报