您的位置：首页 > Web前端 > JavaScript

Extjs学习心得一

2014-12-05 15:57 351 查看

学习必备

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

javascript 的面向对象编程：

在javascript中函数的定义有两种方式：第一种：直接定义：如：
function Person1(){

this.test = function(){

return 1;

}

}

[/code]这种方式定义的方法，每创建一个对象就会分配一部分内存给这个方法。比较占用内存。另一种方法是：在prototype属性中定义：
function Person2(){

}

Person2.prototype.test = function(){

return 1;

}

[/code]这种方法定义的方法，对于多个对象，都会共享同一个方法。只分配一次内存。ext实现了javascript的面向对象的思想。可以使用ext.extend来实现继承。

Extjs 基本对象：

DOM：

在Ext中使用DOM获得Element的方法为Ext.Element.get();例子为：
<!doctype html>

<html >

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"/>

<script type="text/javascript" src="js/ext-all.js"></script>

<script type="text/javascript">

Ext.onReady(function(){

var myDiv = Ext.Element.get('myID');

alert(myDiv);

});

</script>

<body>

<div id='myID'/>

</body>

</html>

[/code]Ext.get（Ext.Element.get()简写）方法通常是获得Element实例，这样可以将这个实例传递给其他对象操作。但是有时只需要进行一次性的取值或设置，这样就可以使用Ext.fly()方法,这样使用完了以后就可以将对象丢弃了。具体例子为：
<!doctype html>

<html >

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"/>

<script type="text/javascript" src="js/ext-all.js"></script>

<script type="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>

<div id="myID1">It's a good day</div>

<div id="myID2">It's a nice day</div>

</body>

</html>

[/code]演示效果：


用Ext.get方法获得的实例是要传递给对象，因此，在本例中myDiv两次的值都是一样的，同一个对象。但是Ext.fly()方法共享一个临时对象，因此，两次获得的值不一样。一般在元素查找上jquery比Extjs效率要更高一点，因此，一般是用jquery进行元素定位，让利用Extjs进行渲染。如：
<!doctype html>

<html >

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<link rel="stylesheet" href="resources/css/ext-all.css" type="text/css"/>

<script type="text/javascript" src="js/ext-all.js"></script>

<script type="text/javascript" src="js/jquery-1.11.1.js"></script>

<script type="text/javascript">

Ext.onReady(function(){

$.each($('div.demoDiv'),function(index,node){

Ext.get(node).update("Demo:"+index);

});

});

</script>

<body>

<div class="demoDiv"></div>

<div class="demoDiv"></div>

<div class="demoDiv"></div>

<div class="demoDiv"></div>

</body>

</html>

[/code]通过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>

<meta charset="UTF-8">

<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"/>

<script type="text/javascript" src="js/ext-all.js"></script>

<script type="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>

<div id="myBookList">

<ol id="numberedList">

<li>One Hundred Years of Solitude</li>

<li>Odyssey</li>

<li>Iliad</li>

</ol>

<div id="bookSiteList">

<ul>

<li id="no1">Amazon</li>

<li id="no2">Books</li>

<li id="no3">Page One</li>

</ul>

</div>

</div>

</body>

</html>

[/code]如果直接写Ext.get('myBookList').child('li')就会报错。因为没有li的直接子节点。down(selector,returnDom)则是返回一个下属节点，不一定是直接子节点。如：
var childNode = Ext.get('myBookList').down('li');

[/code]first(selector,returnDom)返回符合选择器的第一个子节点。需要是直接节点。last(selector,returnDom)返回符合选择器的最后一个字节点，需要时直接节点。如:
var childNode = Ext.get('myBookList').child('ol').last('li');

[/code]next(selector,returnDom)返回符合选择器的子节点的下一个兄弟节点。parent(selector,returnDom)返回符合选择器的字节点的父节点，只返回一个。findparent(selector,returnDom)返回符合选择器的子节点的父节点，只返回一个，但是parent（）方法会将找到的父节点放到缓存表，而findparent()方法不会。DomQuery查询多个元素，以数组形式返回。is(el,selector)如果el符合selector规则，就返回true;否则返回false如：
<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />

<script type="text/javascript" src="js/ext-all.js"></script>

<script type="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>

<div id="myFavoriteBangs">

<h2>My favorite bangs:</h2>

<ol>

<li id="1" class="item">Guns N' Roses</li>

<li id="2" class="item">U2</li>

<li id="3" class="item">Aerosmith</li>

<li id="4" class="item">Led Zeppelin</li>

</ol>

</div>

<div id="myFavoriteSong">

<h2>My favorite songs:</h2>

<ol>

<li id="song1" class="item">With or without you</li>

<li id="song2" class="item">Mr.Brownstone</li>

<li id="song3" class="item">Season of wither</li>

</ol>

</div>

</body>

</html>

[/code]修改文件结构：可以将某个节点插入到某个节点之前或之后。常用的方法有：appendTo(el);将当前节点编程父节点的子节点。appendChild(el);将源节点变成当前节点的子节点。insertBefore(el);将当前节点放在目的节点之前。replace(e1);以当前元素取代e1
模板：有时需要将页面设计和实际的数据相分离，因此可以采用模板的方法，将页面的设计固定好在模板上，数据部分留下占位符，等到数据传入时再将数据引入模板种。如：
<!doctype html>

<html >

<head>

<meta charset="UTF-8">

<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"/>

<script type="text/javascript" src="js/ext-all.js"></script>

<script type="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 = new Ext.Template(

'<div class="personInfo">',

'<h3>{name}</h3>',

'<p class="age">Age:{age}</p>',

'<p class="gender">Gender:{gender}</p>',

'</div>');

Ext.each(customers, function(customer,index){

personTemplate.append(Ext.getBody(),customer);

},this);

});

</script>

<title>Document</title>

</head>

<body style="padding:10px;">


</body>

</html>

[/code]有时需要更复杂的模板来处理循环和判断，因此可以使用DTemplate模板，如下面是循环的例子：
<!doctype html>

<html >

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />

<script type="text/javascript" src="js/ext-all.js"></script>

<script type="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 = new Ext.XTemplate(

 '<div class="sale-style">',

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

<body style="padding;10px;">


</body>

</html>

[/code]下面是判断的例子：
<!doctype html>

<html >

<head>

<meta charset="UTF-8">

<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />

<script type="text/javascript" src="js/ext-all.js"></script>

<script type="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 = new Ext.XTemplate(

	'<ol>Fine Wines:',

	 '<tpl for=".">',

	'<li>',

		'Name:{brand},{prd}',

		'<tpl if="type==\'whiskey\'&& age >=12">',

		'<span style="color:#F00;"> Great Choice</span>',

'</tpl>',

		'<tpl if="type==\'cognac\' && age >=8">',

		 '<span style="color:#F00;"> Great Choice</span>',

'</tpl>',

		'</li>',

'</tpl>',

'</ol>'

);

drinkTemplate.compile();

drinkTemplate.append(Ext.getBody(),drinks);

});

</script>

<title>Document</title>

</head>

<body>


</body>

</html>

[/code]

来自为知笔记(Wiz)
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航