A case study of the selection of jquery and ExtJS _jquery

Examples
The following is a table page generated in PHP:

Copy Code code as follows:

<p><a href= "<?= $this->url (' 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 (' controller ' => ' contact '),
' Action ' => ' edit ', ' id ' => $contact->id));? > ">Edit</a>
<a href= "<?= $this->url (' controller ' => ' contact '),
' Action ' => ' delete ', ' id ' => $contact->id));? > ">Delete</a>
</td>
</tr>
<?php}?>
</tbody>
</table>

Jquery
jquery's approach is to use the Tablesorter plug-in. It is a function with several configuration parameters following the code:

Copy Code code as follows:

<?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);;
?>

Note: the Headscript () business is a Zend framework thing, so you can control which JavaScript to display on every page.
Ext JS
The extension JS in the method is a more complex. You create a data store that defines the creation of a grid (table memory), and then adds data and then renders something again. Here's the code:

Copy Code code as follows:

<?php//Adding scripts
$headScript = "
$ (document). Ready (function () {
$ (' #wheelink '). Bind (' click ', function () {
Ext.Msg.alert (' woot! ', ' 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 A existing HTML TABLE element.
* @constructor
* @param {string/htmlelement/ext.element} table the table Element from which this grid would be created-
* The table must have some type of size defined for the grid to fill. The container would be
* Automatically set to position relative if it isn ' t already.
* @param {object} Config A config Object that sets properties to this grid and has two additional (optional)
* Properties:fields and columns which allow for customizing data fields and columns to this grid.
* @history
* 2007-03-01 Original version by Nige Animal
* 2007-03-10 jvs slightly refactored to reuse existing
*/
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);;
?>

So, now the comparison:
For our purposes, jquery is a better fit. The functionality in this JS is more difficult to configure, which is required for our handling, which is difficult to define. I'd rather be in JS when I need a more advanced user interface for GWT, or in Adobe Apps. An inside Advantage JS is an exchange of things that can change your grid (table) from a request filled with data to JSON or XML, rather than pulling it from the HTML table. Using jquery, we will have to parse the JSON itself, or find some plug-ins that we will do it. In our example, the data in the table already covers the Zend Framework, which will again be a feature duplication in JavaScript.
So they are very powerful JS libraries and put them in position and use. In general, I think jquery is a better fit for most web development.