jQuery与ExtJS之选择实例分析

Examples 下面是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", "nr", "\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> jQuery jQuery的方法是使用tablesorter插件。它是一个函数与几个配置参数以下的代码：复制代码代码如下: <?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); ; ?> 注：headScript（）业务是一个Zend框架的事情，所以你可以控制哪些JavaScript以显示在每一页上。 Ext JS 该分机 js中的方法是一个比较复杂。您创建一个数据存储，定义创建网格（表内存），然后添加数据，并重新渲染的东西。下面是代码：复制代码代码如下: <?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); ; ?> 所以，现在的比较：对于我们的用途，jQuery是一个更合适。该js中的功能更难以配置，这是需要我们的处理的，这是很难定义。我宁愿在 js中，当我需要一个更先进的用户界面为 GWT的，或在Adobe应用程序。一个内线优势 js中是交换了一些东西可以改变你的网格（表），使其从一个填充有数据的JSON 或 XML的请求，而不是从拉它的HTML 表。使用jQuery，我们将不得不解析 JSON的自己，或找一些插件，我们会做它。在我们的例子中，表中的数据已经涵盖了Zend框架，这样在Javascript中再次将是一个功能重复。因此，他们都非常强大的js库，并把他们的位置和使用。一般来说，我认为jQuery是一个对大多数Web开发更适合。

　　推荐阅读

　　ExtJs中简单的登录界面制作方法

一首先请看图片二登陆界面Ext代码复制代码代码如下: /// <reference path="http://http://www.jb51.net/Resources/ExtJs/vswd-ext_2.0.2.js" /> //加载提示框 Ext.QuickTips.init(); //创建命名空间 Ext.name>>>详细阅读

本文标题：jQuery与ExtJS之选择实例分析

地址：http://www.17bianji.com/kaifa2/JS/25819.html

1/2 1