jQuery与ExtJS之选择实例分析

Examples
下面是PHP中生成的表页：
复制代码代码如下:
<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\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开发更适合。