extjs学習メモ(3) 最も基本的なgrid_extjs

この点、jquery はまったく逆です。その UI は必要なものをすべて参照できるため、非常に小規模で柔軟性があります。ただし、プラグインはさまざまな人々やチームによって提供されることが多いためです。 、インターフェイスとインターフェイスがそれほど一貫していないことがよくあります。とにかく、それぞれにそれぞれの良さがあります。
今日は extjs でグリッドを学習しています。これは強力で比類のないものだと言えます。笑、それは少し大げさのようです。 。さて、これ以上の苦労はせずに、最も単純なグリッドから始めて、extjs が提供するグリッドがどのような機能を提供するかを段階的に見てみましょう。
グリッドにはいくつかの行と列が含まれています。extjs では、列は Ext.grid.ColumnModel によって管理されます。

コードをコピーします コードは次のとおりです:

var cm = new Ext.grid.ColumnModel([
{id:'company',header : "会社"、幅: 160、並べ替え可能: true、dataIndex: '会社'}、
{ヘッダー: "価格"、幅: 75、並べ替え可能: true、dataIndex: '価格'}、
{ヘッダー: "変更"、幅: 75、並べ替え可能: true、dataIndex: 'change'}、
{ヘッダー: "% 変更"、幅: 75、並べ替え可能: true、dataIndex: 'pctChange'}、
{ header: "Last Updated "、width: 85、sortable: true、dataIndex: 'lastChange'}
]);

ここでは 5 つの列が定義されており、列はパラメータを通じて設定できます。 : id は列を識別するために使用されます。CSS でこの ID を使用して、列全体のすべてのセルのスタイルを設定します。この ID に応じて、幅は列の幅になります。 sortable は、列をソートできるかどうかを示すために使用されます。 dataIndex は、今のところ無視してください。より一般的に使用されるパラメータには、列が編集可能かどうかを示す editable、列の表示方法を示す renderer などがあります。これについては後で詳しく説明します。
列を使用するには、行を埋めるためのデータがまだ必要です。配列を構築しましょう:

コードをコピーしますコードは次のとおりです:

var myData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc ',29.01,0.42 ,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['アメリカExpress Company',52.55 ,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am '],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 午前 12:00'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'] 、
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am']、
['Exxon Mobil Corp',68.1,-0.43 ,-0.64,' 9/1 12:00am'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
['General Motors Corporation' ',30.27,1.09 ,3.74,'9/1 12:00am'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'] 、
['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am']、
['McDonald's Corporation',36.76,0.86,2.40,'9/1 12 :00am'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54, '9/1 12:00am'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26 ,0.58,'9/1 12:00am'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
['The Procter &ギャンブル会社',61.91 ,0.01,0.02,'9/1 午前 12:00'],
['ユナイテッド テクノロジーズ コーポレーション',63.26,0.55,0.88,'9/1 午前 12:00'],
[ 'Verizon Communications', 35.57,0.39,1.11,'9/1 12:00am']、
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
];

これですべての列が定義され、データが利用可能になります。次のステップはそれらをグリッドに組み立てることです。完全なコードを見てください:

コードをコピーします コードは次のとおりです:

///<参照パス="vswd-ext_2.0.2.js" />
/**//*
*作成者: Daben
*日付: 2009-10-13
*バージョン: 1.0
*/
Ext.onReady(function() {
//构造列
var cm = new Ext.grid.ColumnModel([
{ id: ' company'、ヘッダー: "会社"、幅: 160、並べ替え可能: true、dataIndex: '会社' }、
{ ヘッダー: "価格"、幅: 75、並べ替え可能: true、dataIndex: '価格' }、
{ ヘッダー: "Change"、幅: 75、並べ替え可能: true、dataIndex: 'change' }、
{ ヘッダー: "% Change"、幅: 75、並べ替え可能: true、dataIndex: 'pctChange' }、
{ header: "Last Updated", width: 85, sortable: true, dataIndex: 'lastChange' }
]);
//构造数据
var myData = [
[' 3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'],
['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'],
[' Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'],
['American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am'],
['American International Group, Inc.', 64.13, 0.31, 0.49, '9/1 12:00am'],
['AT&T Inc.', 31.61, -0.48, -1.54, '9/1 12:午前0時']、
['ボーイング社'、75.43、0.53、0.71、'9/1午前12時']、
['キャタピラー社'、67.27、0.92、1.39、'9/1 12:00am']、
['Citigroup, Inc.'、49.37、0.02、0.04、'9/1 12:00am']、
['E.I.デュポン ド ヌムール アンド カンパニー', 40.48, 0.51, 1.28, '9/1 午前 12:00'],
['エクソン モービル コーポレーション', 68.1, -0.43, -0.64, '9/1 午前 12:00' ]、
['ゼネラル・エレクトリック・カンパニー'、34.14、-0.08、-0.23、'9/1 午前12時']、
['ゼネラル・モーターズ・コーポレーション'、30.27、1.09、3.74、'9/1 12:00am']、
['Hewlett-Packard Co.'、36.53、-0.03、-0.08、'9/1 12:00am']、
['Honeywell Intl Inc'、38.77、0.05、 0.13, '9/1 12:00am'],
['Intel Corporation', 19.88, 0.31, 1.58, '9/1 12:00am'],
['International Business Machines', 81.41, 0.44 , 0.54, '9/1 午前 12:00'],
['ジョンソン・エンド・ジョンソン', 64.72, 0.06, 0.09, '9/1 午前 12:00'],
['JP モルガン・アンド・チェース・アンド・カンパニー', 45.73, 0.07, 0.15, '9/1 午前 12:00'],
['マクドナルド コーポレーション', 36.76, 0.86, 2.40, '9/1 午前 12:00'],
['メルクと株式会社', 40.96, 0.41, 1.01, '9/1 午前 12:00'],
['Microsoft Corporation', 25.84, 0.14, 0.54, '9/1 午前 12:00'],
['ファイザー社', 27.96, 0.4, 1.45, '9/1 午前 12:00'],
['コカ・コーラ カンパニー', 45.07, 0.26, 0.58, '9/1 午前 12:00'] 、
['The Home Depot, Inc.', 34.64, 0.35, 1.02, '9/1 12:00am']、
['The Procter & Gamble Company', 61.91, 0.01, 0.02, '9 /1 12:00am'],
['United Technologies Corporation', 63.26, 0.55, 0.88, '9/1 12:00am'],
['Verizon Communications', 35.57, 0.39, 1.11, ' 9/1 午前 12:00'],
['ウォルマート ストアーズ, Inc.', 45.45, 0.73, 1.63, '9/1 午前 12:00']
];
//构造grid
var Grid = new Ext.grid.GridPanel({
renderTo: "grid",
store: new Ext.data.ArrayStore({
fields: [
{ 名前: '会社' }、
{ 名前: '価格'、タイプ: 'フロート' }、
{ 名前: '変更'、タイプ: 'フロート' }、
{ 名前: 'pctChange', type: 'float' },
{ name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia' }
],
data:myData
})、
cm: cm、
ストライプ行: true、
autoExpandColumn: '会社'、
高さ: 350、
幅: 600、
タイトル: '配列グリッド'
});
})

extjs では、Ext.grid.GridPanel はグリッドを表し、設定のパラメータとして json オブジェクトが必要です。使用される設定を見てみましょう:
renderTo: グリッドがレンダリングされた後にどこに表示されるかを示します。要素、Dom ノード、または Element オブジェクトの ID にすることができます。そのようなパラメーターがない場合は、Ext.grid.GridPanel の render メソッドを呼び出してグリッドをレンダリングする必要があります。
stroe: ds と略すことができ、統一されたインターフェイスを使用してデータをグリッドに提供します。データには、使用する配列に加えて、json、xml などの形式も含まれる可能性があります。グリッドが担当する場合 各データ形式を識別することは明らかに良い設計アイデアではないため、データ形式の変換を担当する特別なクラス Ext.data.Store が extjs にあります。ここではそのサブクラス ArrayStore を使用します。名前が示すように、配列への変換に特化したものです。 Ext.data 名前空間の一部のクラスについて説明する専用のシリーズを用意し、Store クラスを深く理解します。ここでは、Ext.data.Field クラスのコレクションである使用するフィールドのみを確​​認します。このクラスには、列に対応するために以前に ColumnModel で無視した dataIndex 属性が含まれています。フィールド間の関係。type はタイプを示すために使用され、デフォルトは文字列タイプで、dateFormat は日付の形式を示します。
cm:colModel の略称。先ほど作成した ColumnModel オブジェクトをここに置きます。
StripeRows: ストライプを表示するかどうか。
autoExpandColumn: グリッドの空のスペースを自動的に埋める、自動的に拡張される列。
高さと幅: グリッドの高さと幅。
title: グリッドのタイトル。
それでは、このグリッドが非常に美しいことを確認してみましょう。列名をクリックすると、列の幅を自由にドラッグして位置を変更することもできます。 Ctrl キーを押すと、複数の行を選択できます。列名の上にマウスを移動すると、小さな逆三角形が表示され、クリックするとメニューが表示され、列を並べ替えたり、列を非表示にしたりできることがわかります。ただし、日付表示が満足のいくものではなく、パーセンテージが依然として浮動小数点数であることも確認されており、通常、損失を表すために赤字、またはより一般的な用語であるマイナス成長がグリッド内にある場合は、マイナス成長になる可能性があります。赤字でも表され、効果はさらに高まるはずです。 extjs は、私たちのアイデアを実現するための非常に便利なもの、レンダラーを提供します。 ColumnModel では、必要な列にレンダラーを追加して、必要な効果を実現できます。以下は、変更された ColumnModel です:

コードをコピー コードは次のとおりです:

//列を構築します
var cm = new Ext.grid.ColumnModel([
{ id: 'company', header: "Company", width: 160, sortable: true, dataIndex: 'company' },
{ ヘッダー: "価格"、幅: 75、並べ替え可能: true、dataIndex: '価格' }、
{ ヘッダー: "変更"、幅: 75、並べ替え可能: true、dataIndex: '変更'、レンダラー: 変更 } ,
{ ヘッダー: "% Change", width: 75, sortable: true, dataIndex: 'pctChange', renderer: pctChange },
{ header: "Last Updated", width: 120, sortable: true, dataIndex: ' lastChange',renderer:Ext.util.Format.dateRenderer("Y-m-d h:i") }
])
// 列レンダラー関数を変更します
function change(val) {
if (val > 0) {
return '' val ''; else if (val return '' val '';
return val;
}
// % 列を変更しますレンダラー関数
function pctChange(val) {
if (val > 0) {
return '' val '%' ;
} else if (val return '' val '%';戻り値;
}


レンダラーは、データを表示する前に変換するために使用される「インタープリター」メソッドとして理解できます。レンダラーを実装するには、次の 3 つの方法があります。
HTML マークアップを返すレンダラー関数を使用する
レンダラー関数を提供する Ext.util.Format クラスの属性
レンダラー関数とスコープを含むオブジェクト
この例では、最初の 2 つの方法を使用します。レンダラ関数は 6 つのパラメータを渡し、セルのすべての情報を保存します。ここでは最初のパラメータのみが使用され、セルの値が保存されます。他のパラメータの意味についてはヘルプ ドキュメントを参照してください。
ここでプログラムを実行すると、希望する効果が表示されます。比較として、マイナスの成長は赤字で表され、プラスの成長は緑色で表され、時間も希望の形式で表示されます。
各行に番号を付けたい場合もあります。これは、ColumnModel のコンストラクターに新しい Ext.grid.RowNumberer() を追加するだけで簡単に実行できます。
コードをコピーします

コードは次のとおりです。 var cm = new Ext.grid.ColumnModel([ new Ext.grid .RowNumberer( ), //自動番号付けを実装します

{ id: 'company', header: "Company", width: 160, sortable: true, dataIndex: 'company' },

{ header: "Price" , width: 75、並べ替え可能: true、dataIndex: '価格' }、
{ ヘッダー: "変更"、幅: 75、並べ替え可能: true、dataIndex: '変更'、レンダラー: 変更 }、
{ ヘッダー : "% Change"、幅: 75、ソート可能: true、dataIndex: 'pctChange'、レンダラー: pctChange }、
{ ヘッダー: "最終更新"、幅: 120、ソート可能: true、dataIndex: 'lastChange'、レンダラ:Ext .util.Format.dateRenderer("Y-m-d h:i") }
]);


Ext.grid.GridPanel の構成では、一般的に使用される 2 つのパラメーターがあります。 : このパラメータを使用して、グリッド インターフェイスの設定を行うことができます。詳細については、ヘルプ ドキュメントを参照してください。
selModel: sm と省略できます。セルの選択や行全体の選択など、モデルを選択します。デフォルトでは行が選択されます。