jQueryとExtJSの選択例分析
6333 ワード
Examples
PHPで生成された表のページを次に示します.
jQuery
jQueryの方法はtablesorterプラグインを使用することです.関数といくつかの構成パラメータの下にあるコードです.
注意:headScript()ビジネスはZendフレームワークのことなので、各ページに表示するJavaScriptを制御できます.
Ext JS
この分機jsにおける方法は比較的複雑である.データストアを作成し、メッシュ(テーブルメモリ)を作成し、データを追加して再レンダリングするものを定義します.コードは次のとおりです.
だから、今の比較は:
私たちの用途にはjQueryがもっと適しています.このjsの機能はより構成しにくく、これは私たちの処理が必要であり、これは定義しにくい.私はむしろjsで、より先進的なユーザーインタフェースがGWTであるか、Adobeアプリケーションである必要があります.内線の優位性jsの中でいくつかのものを交換してあなたのグリッドを変えることができます(表)は、HTML表を引くのではなく、データが埋め込まれたJSONまたはXMLからのリクエストから作成します.jQueryを使用すると、JSONの自分を解析したり、プラグインを探したりしなければなりません.私たちの例では、テーブルのデータはZendフレームをカバーしており、Javascriptで再び機能が繰り返されます.
そのため、彼らは非常に強力なjsライブラリを持っていて、彼らの位置と使用をしています.一般的に、jQueryは多くのWeb開発に適していると思います.
PHPで生成された表のページを次に示します.
contacts as $contact) { ?>
Contact
Address
Phone Number
Email
= $this->escape($contact->name);?>
= str_replace(array("
", "\
", "\\
", "
\r", "\
\\r", "\\
\\\r", "\r", "\\r", "\\\r"), ' ', $this->escape($contact->address));?>
= $this->escape($contact->phone_number);?>
= $this->escape($contact->email);?>
Edit
Delete
jQuery
jQueryの方法はtablesorterプラグインを使用することです.関数といくつかの構成パラメータの下にあるコードです.
$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における方法は比較的複雑である.データストアを作成し、メッシュ(テーブルメモリ)を作成し、データを追加して再レンダリングするものを定義します.コードは次のとおりです.
$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の中でいくつかのものを交換してあなたのグリッドを変えることができます(表)は、HTML表を引くのではなく、データが埋め込まれたJSONまたはXMLからのリクエストから作成します.jQueryを使用すると、JSONの自分を解析したり、プラグインを探したりしなければなりません.私たちの例では、テーブルのデータはZendフレームをカバーしており、Javascriptで再び機能が繰り返されます.
そのため、彼らは非常に強力なjsライブラリを持っていて、彼らの位置と使用をしています.一般的に、jQueryは多くのWeb開発に適していると思います.