JQuery and ExtJS selection Example Analysis _ jquery

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. Examples
The following table pages are generated in PHP:

The Code is as follows:

Url (array ('controller' => 'Contact ',
'Action' => 'add');?> "> Add new Contact

Contacts as $ contact) {?>

Contact	Address	Phone Number	Email
Escape ($ contact-> name);?>	Escape ($ contact-> address);?>	Escape ($ contact-> phone_number);?>	Escape ($ contact-> email);?>	Url (array ('controller' => 'Contact ', 'Action' => 'edit', 'id' => $ contact-> id);?> "> Edit Url (array ('controller' => 'Contact ', 'Action' => 'delete', 'id' => $ contact-> id);?> "> Delete

JQuery
JQuery uses the tablesorter plug-in. It is a function with the following code:

The Code is as follows:

$ 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:

The Code is as follows:

$ 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.