Jquery and ext JS selection example

The following table pages are generated in 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", "\\\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>

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

<?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: headscript () is a Zend framework, so you can control which Javascript is displayed on each page.

EXT js the method in extension JS is relatively complicated. You create a data storage, define creating a grid (Table memory), then add data, and re-render things. The following code is used:

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