1最も簡単なグリッドパネル
グリッドパネルはextJSのコアパーツの1つであり、データをグリッドパネルから表示、ソート、グループ化、編集できます。モデルとストアはグリッドパネル処理データのコアであり、各グリッドパネルはモデルとストアをセットアップする必要があります。グリッドパネルを作成するには、最初にモデルを定義する必要があります。モデルには、グリッドパネルが表示する必要があるすべてのフィールドが含まれています。これは、データベース内のテーブルフィールドのコレクションに相当します。ストアは、データの列のコレクションまたはモデルインスタンスのコレクションと見なすことができます。各ストアには1つ以上のモデルインスタンスが含まれており、グリッドパネルによって表示されるデータはストアに保存されます。グリッドパネルはストアを介してデータを取得して表示しますが、ストアはプロキシを介してデータを読み取り、保存します。
以下は、ユーザー名、電子メール、携帯電話番号（名前、電子メール、電話）、最初にユーザーモデル（ユーザーモデル）を作成するなど、ユーザーの基本情報を表示するグリッドパネルです。
ext.define（ 'user'、{extend： 'ext.data.model'、fields：['name'、 'email'、 'phone']}）;次に、複数のユーザーインスタンスを含むユーザーのコレクションであるストアを作成します。
var userstore = ext.create（ 'ext.data.store'、{model： 'user'、//ユーザーモデルデータは作成されました：[{name： 'lisa'、email： '[email protected]'、電話： '555-111-1224'}、{name： 'bart'、電子メール{name： 'homer'、email： '[email protected]'、電話： '555-222-1244'}、{name： 'marge'、email： '[email protected]'、電話： '555-222254'}]}）;モデルとストアの両方が作成されたら、グリッドパネルを作成できます。
ext.create（ 'ext.grid.panel'、{renderto：renderto：ext.getbody（）、store：userstore、// bind the store width：400、heigh：200、title： 'application users'、columns：[{name '、width'、width：100、sortable：false、hideable：fals、fals、fals 'fals' fals 'aid aid aid aid aid aid aid edeed Model}、{Text： 'メールアドレス'、width：150、dataindex： 'email'、hidden：true}、{text： 'phone number'、flex：1、dataindex： 'phone'}]}）;最後のユーザーグリッドパネルを図に示します。
2グリッドパネルデータグループ（グループ化）
Storeにグループフィールドプロパティが設定されている限り、グリッドパネルによって表示されるデータをグループ化できます。会社には多くの従業員がおり、グリッドパネルの部門ごとに会社の従業員をグループ化する必要があるとします。まず、グループフィールドプロパティを店内の部門に設定します。
Ext.Create（ 'Ext.Data.Store'、{Model： 'Employee'、Data：...、Groupfield： 'Department' // Department by Department}）;次に、グリッドパネルにグループ化機能を追加して、グループ化ディスプレイ効果を実現します。
ext.create（ 'ext.grid.panel'、{... feature：[{ftype： 'Grouping'}]}）;グループディスプレイ効果を下の図に示します。ここをクリックして、公式グループ表示コードを表示します。
3グリッドパネルページネーションディスプレイ
より多くのデータとより多くのページを表示する場合、データをページングする必要があります。グリッドパネルは、ページングツールバーとページングスクロラーの2つの方法でページネーションディスプレイを実現できます。ページングツールバーには、前のページ/次のページボタンがあります。グリッドパネルが下部にスクロールすると、ページングスクロラーがデータを動的にロードします。
ページネーションディスプレイを実装するには、まずページネーションをサポートするためにストアを設定する必要があります。店内でページサイズを設定します。デフォルトのページサイズは25です。読者のTotalPropertyのデータの総数を設定し、PagesizeとTotalPropertyに従ってページングプラグインパギンを設定します。次のコードは4に設定されており、TotalPropertyは返されたJSONデータから取得されます。
ext.create（ 'ext.data.store'、{model： 'user'、autoload：true、pagesize：4、//ページプロキシごとに表示されるデータの数を設定：{type： 'ajax'、url： 'data/users.json'、reader：{type： 'json'、root： 'get get datified of propertified of specified of specife of qutife of specife of specife JSONの関連属性： '合計' //合計データ数量}}}）;JSONデータ形式が次のとおりであると仮定します
{"success"：true、 "total"：12、 "users"：[{"name"： "lisa"、 "email"： "[email protected]"、 "電話"： "555-111-1224"}、{"name"： "bart"、 "email"： "[email protected] "Home"、 "email"： "[email protected]"、 "Phone"： "555-222-1244"}、{"name"： "marge"、 "email"： "[email protected]"、 "電話"： "555-22-1254"}]}店のページングがセットアップされています。ページングツールバーのページング関数は、グリッドパネルに実装されています。
ext.create（ 'ext.grid.panel'、{store：userstore、columns：...、dockeditems：[{xtype： 'pagingtoolbar'、//ページングツールバーストア：//ページングツールバーストアをグリッドパネルのドックと同じように設定します。ページングツールバーのページング効果を下の図に示します。ここをクリックして、公式のページングツールバーページング機能コードを表示します。
ページングスクロラーのページングの実装は比較的簡単です。グリッドパネルに次のコードを設定するだけです。ここをクリックして、公式のページングスクロラーページング機能コードを表示します。
ext.create（ 'ext.grid.panel'、{//ページングスクロラーのページングプラグインVerticalScrollerを使用：「PagingGridScroller '、//ビューが更新されるときにスクロールバーをリセットしないでください：false、// infinite scorting recolding reacediselection：true / / / / / / ///）;4グリッドパネルチェックボックスを追加します
グリッドパネルのselmodelプロパティをext.selection.checkboxmodelに設定するだけで、公式コードの例を表示するにはここをクリックしてください。
ext.create（ 'ext.grid.panel'、{selmodel：ext.create（ 'ext.selection.checkboxmodel'）、//グリッドパネルの選択モードをチェックボックスストアに設定します：usersTore、列：...}）;5つの包括的な例
var grid = new ext.grid.gridpanel（{store // data source cm //ext.grid.columnmodel列// ext.grid.columnmodelと同じです。効果（デフォルトはTRUE、クラスext.FXが利用可能な場合）：true、// trueは閉じた列のラインを意味します。 // document source displayinfo：true、// documentationmsg： '{0}から{1}から{2}'、emptymsg： 'no record'}）、tbar： 'query'、icon： '/crade/images/delete.gif'、cls： 'x-btn-text-icon-icon' icon '、query'、 'query'、icon： '/crade/images/delete.gif'ハンドラー：function（）{win.show（）;}}}） // ********************************************* // Pagingtoolbar Paging //サーバーデータへのパスext.grid.rownumberer（）、{header： "customer id"、width：50、sortable：true、dataindex： 'memid'}、{header： "customer name"、width：75、sortable：true、dataindex： 'memname'}、{header： 'secret No.'、sultth： 'frut：' fruedex： 'sex：' sex： 'ail'、 renderer：function（v）{return（v == '1'）？ '<img src = "images/user_suit.png">'： '<img src = "images/user_female.png">';}} {header： 'tracking number'、vidth：150、dataindex： 'code wid'} dataindex： 'kd_time'}]）; /*********************************************************************************/EditorGridPanel ChickToedit：1 // Clicks Clicks ColumnModel Editor：new ext.form.textfield（{}）// // var modified = storeedit.modified.slice（0）; // ext.each（modified、function（m）{alert（m.data.id）; //データはm.dataで、idはフィールド名}） //グリッドデータを取得するvar selmodel = grid.getSelectionModel（）;選択モードVARレコードを取得します。 if（！selmodel.hasselection（））{ext.msg.alert（ 'warning'、 '変更する行を選択してください！'）;戻る; } selmodel.getSelections（）。length; //選択した行の数録音= selmodel.getSelected（）; //選択した行のデータを取得します（1）データを取得する：
シングルライン
id = record.get（ 'id'）;
または
id = record.data.id;
複数の行
録音[i] .get（ 'ddd'）
（2）データの削除：
var obj = grid.getSelectionModel（）。getSelected（）; store.remove（obj）; grid.getView（）。refress（）;
（3）クエリ
store.baseparams ['memid'] = fb.form.findfield（ 'memid'）。getValue（）; store.baseparams ['start'] = 0; store.load（）;
（4）行を追加します：
Extはプラグインをもたらします
ファイルrowexpander.jsが必要です
var Expand = new ext.ux.grid.rowexpander（{tpl：new ext.template（ '<p> {address} </p>'）}）;グリッド列に拡張を追加し、
プラグインを追加：グリッド属性に展開します