jQuery and Ext JS 之选择 Example

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

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

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