jQuery与ExtJS之选择实例分析

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

　　?>