ExtJS 2.0 GridPanel 基本テーブルの簡潔なチュートリアル_extjs

ExtJS のテーブル関数は非常に強力で、並べ替え、キャッシュ、ドラッグ、特定の列の非表示、行番号の自動表示、列の要約、セルの編集、その他の実用的な機能が含まれます。
テーブルは、Panel から継承されたクラス Ext.grid.GridPanel によって定義されており、その xtype は Grid です。 ExtJS では、テーブル Grid に列定義情報が含まれ、テーブルのデータ ストレージ Store を指定する必要があります。テーブルの列情報はExt.grid.ColumnModelクラスで定義され、テーブルのデータストレージはExt.data.Storeで定義されており、データストレージはJsonStore、SimpleStroe、GroupingStoreなどに分けられます。解析されたデータ。
まず、テーブルを使用した最も単純なコードを見てみましょう:

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

Ext.onReady(function(){
var data=[[1, 'EasyJWeb', 'EasyJF','www.baidu.com'],
[2, 'jfox', 'huihoo ','www.jb51.net'],
[3, 'jdon', 'jdon','s.jb51.net'],
[4, 'スプリングサイド', 'スプリングサイド', 'ツール .jb51.net'] ];
var store=new Ext.data.SimpleStore({data:data,fields:["id","name","organization","homepage"]});
var Grid = new Ext.grid.GridPanel({
renderTo:"hello",
title:"中国 Java オープンソース製品とチーム",
height:150,
width: 600、
列:[{ヘッダー:"プロジェクト名",dataIndex:"名前"}、
{ヘッダー:"開発チーム",dataIndex:"組織"}、
{ヘッダー:"ウェブサイト" ,dataIndex: "homepage"}],
store:store,
autoExpandColumn:2
})
});

上記のコードを実行して、シンプルなテーブルは次のとおりです。

上記のコードでは、最初の行「var data=...」はテーブルに表示するデータを定義するために使用されます。これは [ ][] 2 次元配列 ; 2 行目の「var store=...」は、GridPanel が使用する必要がある構成属性です。 ExtJS のデータレコードセット Record に変換します。データストレージ Store については次の章で具体的に紹介します。 3 行目「var Grid = new Ext.grid.GridPanel(...)」は、テーブルに含まれる列を列構成属性で記述します。列はデータ要素の各行です。テーブル内の情報の列を説明します。列情報には、列ヘッダーの表示テキスト (header)、列に対応するレコード セット フィールド (dataIndex)、列が並べ替え可能かどうか (sorable)、列のレンダリング関数 (renderer) が含まれます。幅（width）、フォーマット情報（format）など。上記の例では、header と dataIndex のみが使用されます。
テーブルの並べ替え機能と非表示列機能を簡単に見てみましょう。内容は次のとおりです。

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

Ext.onReady(function(){
var data=[ [1, 'EasyJWeb', 'EasyJF ','www.baidu.com '],
[2, 'jfox', 'huihoo','www.jb51.net'],
[3, 'jdon', 'jdon','s .jb51.net'],
[4, 'springside', 'springside','tools.jb51.net'] ];
var store=new Ext.data.SimpleStore({data:data,fields) :["id","name ","organization","homepage"]});
varcolM=new Ext.grid.ColumnModel([{header:"プロジェクト名",dataIndex:"name",sortable) :true},
{ header:"開発チーム",dataIndex:"組織",sortable:true},
{header:"Website",dataIndex:"homepage"}]); = new Ext.grid.GridPanel( {
renderTo:"hello",
title:"中国 Java オープンソース製品とチーム",
高さ:200,
幅:600,
cm:colM,
store: store,
autoExpandColumn:2
})
});

新しい Ext.grid.ColumnModel を使用して列を作成しますテーブルの定義情報の「プロジェクト名」「開発チーム」の列に、その列がソート可能であることを示す属性「sortable」を「true」に追加しました。図 xxx に示すように、「プロジェクト名」または「開発チーム」の入力をサポートするテーブルを取得します。

(プロジェクト名でソート)

(ソート可能なリストヘッダーの後ろにある小さなボタンで操作メニューをポップアップ表示できます)

(どの列を非表示にするかを指定できます)
さらに、各列のデータのレンダリング方法を自分で定義することもできます。たとえば、上の表では、ユーザーが表内の URL をクリックして直接開くことができます。これらのオープンソース チームの Web サイト、つまり URL 列にスーパー リンクを追加する必要があります。次のコードはこの関数を実装しています:

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

function showUrl(value)
{
return "" value "";
}
Ext.onReady(function(){
var data=[ [1, 'EasyJWeb', 'EasyJF','www.baidu.com'],
[2, 'jfox', 'huihoo','www.jb51.net'],
[3, 'jdon', 'jdon','s.jb51.net'],
[4, 'springside', 'springside','tools.jb51.net'] ];
var store=new Ext.data.SimpleStore( {data:data,fields:["id","name","organization","homepage"]});
varcolM=new Ext.grid.ColumnModel([{header:"プロジェクト名",dataIndex) :"名前",sortable:true},
{header:"開発チーム",dataIndex:"組織",sortable:true},
{header:"website",dataIndex:"homepage",renderer: showUrl}]);
var Grid = new Ext.grid.GridPanel({
renderTo:"hello",
title:"中国 Java オープンソース製品とチーム",
height:200,
width:600,
cm:colM,
store:store,
autoExpandColumn:2
});
[html]

上記のコードは、「URL」列を定義するときに追加のレンダラー属性、つまり {header: "URL", dataIndex: "homepage", renderer: showUrl} があることを除いて、前の例とあまり変わりません。 showUrl は、渡された value パラメータに基づいて タグを含む HTML フラグメントを返すカスタム関数です。上記のコードを実行すると、次のような結果が表示されます。


カスタム列レンダリング関数はセルに必要なあらゆる種類の情報を表示できますが、ブラウザーはそれを処理できます。html を使用できます。 。
セカンダリ配列に加えて、テーブルには他の形式でデータを表示できますか?答えは「はい」です。テーブル データ data が次の形式で定義されていると仮定しましょう:

[code]
var data=[{id:1,
name:'EasyJWeb',
組織:'EasyJF',
ホームページ:'www.baidu.com'},
{id:2,
名前:'jfox',
組織:'huihoo',
ホームページ:'www.jb51.net'}、
{id:3、
名前:'jdon'、
組織:'jdon'、
ホームページ:'s.jb51.net' },
{id:4,
名前:'springside',
組織: 'springside',
ホームページ:'tools.jb51.net'}
]; 🎜>
つまり、データは 1 次元配列になり、これらのオブジェクトには名前、組織、ホームページ、ID などの属性が含まれます。テーブルに上記のデータを表示させるには、Ext.data.JsonStore を使用するようにストアを変更するだけです:

コードをコピーします

コードは次のとおりです: var store=new Ext.data.JsonStore({data:data,fields:["id ","名前","組織" ,"ホームページ"]}); varcolM=new Ext.grid.ColumnModel([{header:"プロジェクト名",dataIndex:"name",sortable:true},

{header:"開発チーム",dataIndex:"組織",sortable:true},

{header:"Website",dataIndex:"homepage",renderer:showUrl}]); = new Ext.grid.GridPanel({
renderTo:"hello",
title:"中国 Java オープンソース製品とチーム",
高さ:200,
幅:600,
cm:colM,
store:store ,
autoExpandColumn:2
});


上記のコードは、前のコードと同じ結果を返します。もちろん、テーブルには XML 形式でデータを表示することもできます。上記のデータが hello.xml ファイルに保存されている場合、内容は次のようになります。

Copy code

コードは次のとおりです。 1 EasyJWebwww.baidu.com ;id>2 tools.jb51.net>

ExtJS テーブル グリッドを使用してこの XML データを表示するには、ストア パーツのコンテンツを次のコンテンツに調整するだけです:

コードをコピー

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

var store=new Ext.data.Store({
url:"hello.xml",
reader:new Ext.data.XmlReader({
レコード:" row"},
["id","name","organization","homepage"])
});

他の部分は変更する必要はありません。完了 コードは次のとおりです:

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

function showUrl(value)
{
return ""
}
Ext.onReady (function(){
var store=new Ext.data.Store({
url:"hello.xml",
reader:new Ext.data.XmlReader({
レコード:"行 "},
["id","名前","組織","ホームページ"])
});
varcolM=new Ext.grid.ColumnModel([ {header:"プロジェクト名 ",dataIndex:"名前",sortable:true},
{header:"開発チーム",dataIndex:"組織",sortable:true},
{header:"ウェブサイト" ,dataIndex:"homepage" ,renderer:showUrl}]);
var Grid = new Ext.grid.GridPanel({
renderTo:"hello",
title:"中国 Java オープンソース製品とチーム",
高さ: 200,
幅:600,
cm:colM,
store:store,
autoExpandColumn:2
});
store.load() ;
});

store.laod() は、上記のコードを実行して生成されたテーブルとまったく同じです。