Analysis of jQuery and ExtJS selection instances

Source: Internet
Author: User
Tags php foreach zend framework

Examples
The following table pages are generated in PHP:
Copy codeThe Code is as follows:
<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 \ r", "\ n \ r ", "\ n \ 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 uses the tablesorter plug-in. It is a function with the following code:
Copy codeThe Code is as follows:
<? Php // adding scripts
$ 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:
Copy codeThe Code is as follows:
<? 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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.