Analysis of jQuery and ExtJS selection instances

Examples
The following table pages are generated in PHP:
Copy codeThe Code is as follows:
<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", "\ n \ r ", "\ 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 uses the tablesorter plug-in. It is a function with the following code:
Copy codeThe Code is 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 th 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: headScript () is a Zend framework, so you can control which JavaScript is displayed on each page.
Ext JS
The method in the extension js is complicated. You create a data storage, define creating a grid (Table memory), then add data, and re-render things. The following code is used:
Copy codeThe Code is as follows:
<? 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 );;
?>

Therefore, the comparison:
JQuery is more suitable for our purposes. The functions in this js are more difficult to configure. This is what we need to handle, and this is difficult to define. I would rather in js when I need a more advanced user interface for GWT, or in Adobe applications. An internal advantage in js is that it exchanges something that can change your grid (table) and make it a request from a JSON or XML filled with data, instead of pulling the HTML table from it. With jQuery, we will have to parse the JSON ourselves, or find some plug-ins, we will do it. In our example, the data in the table already covers the Zend framework, so that it will again be a feature repeat in Javascript.
Therefore, they are all very powerful js libraries and place their location and use. In general, I think jQuery is more suitable for most Web development.