extjs学習ノート4ページング付きgrid_extjs

したがって、ほぼすべてのグリッド コントロールがページング機能をサポートするようになりました。 extjs も例外ではなく、ページングに対する強力で便利なサポートを提供し、ページングの処理を容易にします。
extjs では、Ext.PagingToolbar クラスがページング操作をカプセル化します。このクラスは、名前だけから、ページングを処理できるツールバーであると推測できます。さて、このようなツールバーを構築する方法を見てみましょう。 PagingToolbar クラスのコンストラクターには、構成用の json オブジェクトが必要です。js では、必要なパラメーターを提供するために json オブジェクトを使用すると非常に便利です。これにより、必要なパラメーターのみを入力でき、パラメータを気にする必要がなくなります。パラメータの順序。ページング ツールバーで一般的に使用される構成パラメータには次のものがあります:
pageSize: 各ページに表示されるレコードの数、デフォルトは 20 です。
store: これはグリッドの store パラメーターと同じです。ページングでもデータを処理する必要があるため、このパラメーターが必要です。
displayMsg: 「{0}-{1}、合計 {2} 項目」などのページング ステータス情報が表示されます。中括弧で囲まれた 0、1、2 がそれぞれ現在のページを表す必要があることに注意してください。レコードの開始、終了、および合計数は、スムーズに読み取れる限り、任意に入力できます。情報はページング ツールバーの右側に表示されます。
displayInfo: displayMsg を表示するかどうか。デフォルトでは表示されません。
emptyMsg: レコードがない場合に表示されるテキスト。
アイテム: ツールバーに表示されるアイテム。建設後に使用できるアイテムを見てみましょう。
これで、ページング ツールバーを構築できますが、パラメータに Store クラス オブジェクトが必要なので、最初に構築します:

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

var store = new Ext.data.JsonStore({
root: 'topics',
totalProperty: ' totalCount',
idProperty: 'threadid',
remoteSort: true,
fields: [
'title', 'forumtitle', 'forumid', 'author',
{ name: 'replycount' 、タイプ: 'int' }、
{ 名前: 'lastpost'、マッピング: 'lastpost'、タイプ: 'date'、dateFormat: 'timestamp' }、
'lastposter'、'excerpt'
],
// クロスドメインなので、ScriptTagProxy と HttpProxy を同じドメイン内で使用します。
proxy: new Ext.data.ScriptTagProxy({
url: 'http://extjs.com/ forum/topics-browse-remote.php'
})
});

今回は、名前が示すように、JsonStore クラスを使用して必要な Store オブジェクトを構築します。データをjson形式に変換するために使用されます。さらに、外部サーバーからデータを取得しているため、コードは配列からデータを取得するよりも複雑です。使用されるパラメーターの意味を見てみましょう:
root: データ行の属性名が含まれます。コレクション。
totalProperty: データセット内のレコードの合計数を表すプロパティ名。ページングの場合にのみ必要です。
idProperty: データ行の識別子として使用される属性の名前。
remoteSort: ソート時にプロキシ経由で新しいデータを取得するかどうか。デフォルトは false です。
フィールド: 前のシリーズで説明しました。ここには追加のマッピングがあり、データ内の名前をカプセル化された Record フィールドの名前にマップします。名前が同じ場合は無視できます。
プロキシ: データのソース。ここで知っておく必要があるのは、データが URL で指定されたアドレスから取得されることと、このアドレスがクロスドメインであるため、ScriptTagProxy が使用されることだけです。
サーバーから返されるデータは次の形式である必要があることに注意してください:

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

{
"totalCount":10000, //totalProperty 属性に対応する値
"topics":[ //ルート ハウス タイプに対応する値
//ここには json オブジェクトのコレクションがあり、各オブジェクトの属性
// フィールドの name 属性の値に対応する必要があります
// に返されたデータを観察すると、これをより明確に確認できますURL
]
}

次のステップは、ページング ツールバーを作成することです:

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

var pagingToolbar = new Ext.PagingToolbar({
pageSize: 25,
store: store,
displayInfo: true,
displayMsg: 'トピック {0} - {1} / {2} を表示しています',
emptyMsg: "記事がありません",
items: [
'-', {
pressed: true,
enableToggle: true,
text: 'プレビューを表示',
cls: 'x-btn-text-icon 詳細',
toggleHandler: function(btn,押されました) {
var view =grid.getView();
view.refresh();
}
}); >

items はツールバー上の項目のコレクションで、デフォルトのタイプはボタンです。ここでは 2 つの項目のみを使用します。「-」は区切り文字を表し、2 番目の項目はボタンです。各属性が何を表すかを見てみましょう:
pressed: ボタンが最初に押されたかどうかを示します。 EnableToggle は true です。
enableToggle: ボタンを押すことができるかどうかを示します。
テキスト: ボタンに表示されるテキスト。
cls: ボタンの CSS クラス。
toggleHander:enableToggle が true に設定されている場合にボタンがクリックされたときのイベント ハンドラー関数。
ページング ツールバーとグリッドを組み合わせます。今回は、グリッドは ColumnModel を使用しませんが、同時に viewConfig を使用してユーザー インターフェイスを構成します。

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

///
/**//*
*著者: Daben
*日付: 2009-10-13
*バージョン: 1.0
*ブログ アドレス: http://yage.cnblogs.com
*/
Ext.BLANK_IMAGE_URL = '/extjs/resources/images/default/s.gif';
Ext.onReady( function() {
//ストア
var store = new Ext.data.JsonStore({
root: 'topics',
totalProperty: 'totalCount',
idProperty: 'threadid ',
remoteSort: true,
fields: [
'title', 'forumtitle', 'forumid', 'author',
{ name: 'replycount', type: 'int' } ,
{ 名前: 'lastpost', マッピング: 'lastpost', type: 'date', dateFormat: 'timestamp' },
'lastposter', 'excerpt'
],
//クロスドメインのため、同じドメイン内で ScriptTagProxy と HttpProxy を使用してください。
proxy: new Ext.data.ScriptTagProxy({
url: 'http://extjs.com/forum/topics-browse-remote. php'
})
});
store.setDefaultSort("lastpost", "DESC") //デフォルトのソート列と方向を設定します
//ページング関数を使用してツールバーを構築します
var pagingToolbar = new Ext.PagingToolbar({
pageSize: 25,
store: store,
displayInfo: true,
displayMsg: 'アイテム {0}-{1}、合計 {2 }items',
emptyMsg: "表示するトピックがありません",
items: [
'-', {
pressed: true,
enableToggle: true,
text: 'プレビュー',
cls: 'x-btn-text-icon の詳細',
toggleHandler: function(btn, pressed) {
var view = Grid.getView();
view.showPreview = pressed;
view.refresh();
}
}]
});
var Grid = new Ext.grid. ({
renderTo:"grid",
width: 700,
height: 500,
title: 'ページング機能付きグリッド',
store: ストア,
trackMouseOver : false ,
disableSelection: true,
loadMask: true,
// グリッド列
columns: [{
id: 'topic',
header: "topic",
dataIndex: 'title',
width: 420,
renderer: renderTopic,
sortable: true
}, {
header: "著者",
dataIndex: ' author',
width: 100、
hidden: true、
sortable: true
}、{
header: "replycount"、
dataIndex: 'replycount'、
width: 70 、
align: 'right'、
sortable: true
}、{
id: 'last'、
header: "最終返信"、
dataIndex: 'lastpost'、
width: 150,
renderer: renderLast,
sortable: true
}],
// カスタマイズされたユーザー インターフェイス
viewConfig: {
forceFit: true ,
EnableRowBody: true,
showPreview: true,
getRowClass: function(record, rowIndex, p, store) {
if (this.showPreview) {
p.body = '< ;p>' Record.data.excerpt '

';
return 'x-grid3-row-expanded';
return 'x-grid3-row-collapsed'; 🎜>},
//上部のページング ツールバー
//tbar: pagingToolbar,
//下部のページング ツールバー
bbar: pagingToolbar
})
//データの読み込み
store.load({ params: { start: 0, limit: 25} });
// トピック列のレンダラー関数
function renderTopic(value, p, record) {
return String.format(
'{0}{1} フォーラム'、
value,record.data.forumtitle,record.id,record.data.forumid);
}
//最後の返信列のレンダラー関数
function renderLast(value, p , r) {
return String.format('{0}
by {1}', value.dateFormat('M j, Y, g:i a'), r.data[' lastposter']) ;
}
})


これを実行して効果を確認します。図に示すように、データを取得するときにページがアニメーションで覆われていることがわかります。

データがロードされると、データはグリッド内でページ分割され、最後に公開された列によって降順に並べ替えられ、作成者列は非表示になります:

並べ替える列名をクリックすると、新しいデータがサーバーから再ロードされます。右矢印をクリックしてページをめくり、「プレビュー」ボタンをクリックして効果を確認します。今回のコードは最も単純なグリッドをはるかに超えていますが、効果もさらにクールです。コードを最初から整理してみましょう:
行 8 は画像プレースホルダーを使用しており、それが指す画像は空の画像です。 extjs ライブラリ ファイルでは、この画像のプレースホルダーは必要に応じて別の画像に置き換えられます。この例では、この行が削除されても、タイトル バーの「最後の返信」が「The」になることを除いて、影響はそれほど大きくありません。下の小さな矢印が消えます。この一行を書く習慣をつけましょう。
行 11 ～ 28 は Store クラスのオブジェクトを構築します。これについては特に言うことはありません。
行 30 は、lastpost 列をデフォルトの並べ替え列として設定し、「DESC」は大文字にする必要があり、昇順は「ASC」であることに注意してください。
行 33 ～ 51 は、前述したページングを備えたツールバーを構築します。
54行目から112行目は、ページング機能を備えたグリッドを構築します。
マウスを行の上に置いたときにその行が強調表示されないように指示します。
行 61 は、ユーザーがグリッドを選択できないことを示しています。
62 行目は、データをロードするときにページを覆うように指示しています。スクリーンショットで効果を確認できますが、ここで表示されているのはアニメーションです。データをロードするとマスキング効果は消えます。
行 94 ～ 105 では、各パラメータの意味を見てみましょう:
ForceFit: 水平スクロール バーが表示されないように列の幅を強制的に調整するかどうか。デフォルトは次のとおりです。間違い。
enableRowBody: true の場合、各行に tr 要素を追加してデータ行を展開できます。
showPreview: コードでプレビューを表示するかどうかを制御するために使用されるカスタム bool 型属性。
getRowClass: これは行の CSS スタイルを書き換えるために使用されるメソッドで、1 つ目は行データを表す Record オブジェクト、2 つ目は行のインデックス、3 つ目はenableRowBody です。 true の場合に渡される
パラメーターは、パラメーターの body 属性を通じて行データを展開するために使用できます。このメソッドは CSS クラス名を返す必要があります。この例では、記事の概要情報が showPreview の値に基づいて動的に表示されます。
111 行目では、ページング ツールバーをグリッドの下部に表示します。上部に表示したい場合は、bbar の代わりに tbar を使用できます。
115 行目は、データを取得するためにサーバーにリクエストを送信します。extjs は、params 内のパラメーターをポスト モードでサーバーに送信します。ここで、start は開始するデータの数を示し、limit は表示されるデータの量を示します。各ページ。
118 ～ 126 は 2 つのレンダラー関数で、使い方は前のシリーズで説明しました。
最後に指摘すべきことは、ページング機能は実際にはサーバー側で完了するということです。クライアント側でページをめくると、115行目のようにパラメータが送信されます。渡されたスターと制限値を元にサーバー側で返すべきデータを計算し、正しい形式でクライアントに送信する必要があります。 。サーバーがクライアントから渡されたパラメータを取得する方法と、クライアントにデータを送信する方法については、このシリーズの最初のセクションを参照してください。