jQuery与ExtJS之选择实例分析

<p><a href="<?= $this->url(array('controller'=>'contact', 
'action'=>'add'));?>">Add new Contact</a></p> 
<table class="contactTable" id="contactTable"> 
<thead> 
<tr> 
<th class="sortable">Contact</th> 
<th class="sortable">Address</th> 
<th class="sortable">Phone Number</th> 
<th class="sortable">Email</th> 
<th> </th> 
</tr> 
</thead> 
<tbody> 
<?php foreach($this->contacts as $contact) { ?> 
<tr> 
<td><?= $this->escape($contact->name);?></td> 
<td><?= str_replace(array("\n", "\\n", "\\\n", "\n\r", "\\n\\r", "\\\n\\\r", "\r", "\\r", "\\\r"), ' ', $this->escape($contact->address));?></td> 
<td><?= $this->escape($contact->phone_number);?></td> 
<td><?= $this->escape($contact->email);?></td> 
<td> 
<a href="<?= $this->url(array('controller'=>'contact', 
'action'=>'edit', 'id'=>$contact->id));?>">Edit</a> 
<a href="<?= $this->url(array('controller'=>'contact', 
'action'=>'delete', 'id'=>$contact->id));?>">Delete</a> 
</td> 
</tr> 
<?php } ?> 
</tbody> 
</table> 
 
jQuery 
jQuery的方法是使用tablesorter插件。 它是一个函数与几个配置参数以下的代码： 
 代码如下:

<?php // adding scripts 
$headScript = ' 
$(function(){ 
$("table").tablesorter({ 
sortList: [ [0,0] ], 
widgets: [\'zebra\'], 
// pass the headers argument and assign an object 
headers: { 
// assign the fifth column (we start counting zero) 
4: { 
// disable it by setting the property sorter to false 
sorter: false 
} 
} 
}); 
}); 
' 

$this->headScript()->appendFile('/js/jquery.tablesorter.js') 
->appendScript($headScript); ; 
?> 
 
注：headScript（）业务是一个Zend框架的事情，所以你可以控制哪些JavaScript以显示在每一页上。 
Ext JS 
该分机 js中 的方法是一个比较复杂。 您创建一个数据存储，定义创建网格（表内存），然后添加数据，并重新渲染的东西。 下面是代码： 
 代码如下:

<?php // adding scripts 
$headScript = " 
$(document).ready(function(){ 
$('#wheelink').bind('click',function() { 
Ext.Msg.alert('Woot!', 'Thanks for clicking me!'); 
}); 
}); 
Ext.onReady(function() { 
// create the grid 
var grid = new Ext.grid.TableGrid(\"contactTable\", { 
stripeRows: true // stripe alternate rows 
}); 
grid.render(); 
}); 
/** 
* @class Ext.grid.TableGrid 
* @extends Ext.grid.Grid 
* A Grid which creates itself from an existing HTML table element. 
* @constructor 
* @param {String/HTMLElement/Ext.Element} table The table element from which this grid will be created - 
* The table MUST have some type of size defined for the grid to fill. The container will be 
* automatically set to position relative if it isn't already. 
* @param {Object} config A config object that sets properties on this grid and has two additional (optional) 
* properties: fields and columns which allow for customizing data fields and columns for this grid. 
* @history 
* 2007-03-01 Original version by Nige Animal White 
* 2007-03-10 jvs Slightly refactored to reuse existing classes 
*/ 
Ext.grid.TableGrid = function(table, config) { 
config = config || {}; 
Ext.apply(this, config); 
var cf = config.fields || [], ch = config.columns || []; 
table = Ext.get(table); 
var ct = table.insertSibling(); 
var fields = [], cols = []; 
var headers = table.query(\"thead th\"); 
for (var i = 0, h; h = headers[i]; i++) { 
var text = h.innerHTML; 
var name = 'tcol-'+i; 
fields.push(Ext.applyIf(cf[i] || {}, { 
name: name, 
mapping: 'td:nth('+(i+1)+')/@innerHTML' 
})); 
cols.push(Ext.applyIf(ch[i] || {}, { 
'header': text, 
'dataIndex': name, 
'width': h.offsetWidth, 
'tooltip': h.title, 
'sortable': true 
})); 
} 
var ds = new Ext.data.Store({ 
reader: new Ext.data.XmlReader({ 
record:'tbody tr' 
}, fields) 
}); 
ds.loadData(table.dom); 
var cm = new Ext.grid.ColumnModel(cols); 
if (config.width || config.height) { 
ct.setSize(config.width || 'auto', config.height || 'auto'); 
} else { 
ct.setWidth(table.getWidth()); 
} 
if (config.remove !== false) { 
table.remove(); 
} 
Ext.applyIf(this, { 
'ds': ds, 
'cm': cm, 
'sm': new Ext.grid.RowSelectionModel(), 
autoHeight: true, 
autoWidth: false 
}); 
Ext.grid.TableGrid.superclass.constructor.call(this, ct, {}); 
}; 
Ext.extend(Ext.grid.TableGrid, Ext.grid.GridPanel); 
" 

$this->headScript()->appendFile('/js/ext-jquery-adapter.js') 
->appendFile('/js/ext-all-debug.js') 
->appendScript($headScript); ; 
?> 
 
所以，现在的比较： 
对于我们的用途，jQuery是一个更合适。 该js中 的功能更难以配置，这是需要我们的处理的，这是很难定义。 我宁愿在 js中 ，当我需要一个更先进的 用户界面 为 GWT的，或在Adobe应用程序。 一个内线优势 js中 是交换了一些东西可以改变你的网格（表），使其从一个填充有数据 的JSON 或 XML的 请求，而不是从拉它 的HTML 表。 使用jQuery，我们将不得不解析 JSON的 自己，或找一些插件，我们会做它。 在我们的例子中，表中的数据已经涵盖了Zend框架，这样在Javascript中再次将是一个功能重复。 
因此，他们都非常强大的js库，并把他们的位置和使用。 一般来说，我认为jQuery是一个对大多数Web开发更适合。