extjsのテーブルの機能の紹介
テーブルは、ext.panelから継承されたクラスext.grid.gridpanelによって定義され、xtypeはグリッドです
テーブルの列情報は、ext.grid.columnmodelで定義されています
テーブルのデータストレージは、ext.data.storeによって定義されています。異なる分析データによると、データストレージは次のタイプに分けることができます。
JsonStore、SimpleStore、GroupingStore…
テーブルの基本的な書き込みプロセス：
1.テーブル列モデルを作成します
var cm = new ext.grid.columnmodel（{{header： 'role'、dataindex： 'role'}、{header： 'level'、dataindex： 'grade'}、{header： 'create date'、dataindex： 'createdate'、type： 'date'、cearterer： データ}）;2。データ配列を作成します
var data = [['Soldier'、 '7'、 '2011-07-2412：34：56']、['general'、 '10'、 '2011-07-2412：34：56']、];
3。2つの部分を含むデータストレージオブジェクトストアを作成します。プロキシ、データを取得する方法。読者、データを解析する方法
Arrayreaderのマッピングは、列の順序を設定するために使用されます
var store = new ext.data.store（{proxy：new ext.data.memoryproxy（data）、reader：new ext.data.arrayreader（{name： 'role'、mapping：1}、{name： 'grade'、mapping：0} {name： 'created：' redentate '、mapping： dateformat： 'ym-dh：i：s'} //日付列と表示形式を作成します]）}）; store.load（）;4. gridpanelを作成し、列モデルを組み立ててストアします
var grid = new ext.grid.gridpanel（{renderto： 'grid'、store：store、cm：cm}）;さらに、以下に示すように、ScriptTagProxyを使用してリモートデータを取得できます。
var store = new ext.data.store（{proxy：new ext.data.scripttagproxy（{url： 'http：// ...'}）、reader：new ext.data.arrayreader（{}、[{name： 'role'、mapping：1}、{name： 'grade：' grade： 'grade：' grade： 'grade：'、mapping： '、mapping：'、mapping：0： 「役割」、方向：「ASC」} //デフォルトのソートシーケンス、ASC/DESC}）;テーブルの一般的なプロパティ
var grid = new ext.grid.gridpanel（{enablecolumnmove：false、//ドラッグアンドドロップ列は、columnresize：falseを有効にすることを禁止されています。 var cm = new ext.grid.columnmodel（{{header： 'role'、dataindex： 'role'、width：90、sortable：true}、// widthは列幅を設定します。デフォルトは100pxです。 ext.grid.gridpanel（{renderto： 'grid'、store：store、cm：cm viewconfig：{//各列がフォームフォームフィットを自動的に入力します：true} autoexpandcolumn： 'grade' //列を自動的に拡張します。テーブルをレンダリングし、テーブルの特別なスタイルを設定します
レンダラー属性をCMに追加し、カスタム関数を追加して、渡されたパラメーターのスタイルをレンダリング（extによって自動的に渡されます）、つまり、値を返す前に対応するHTML、CSS、またはJS応答イベントを組み立てます。
関数rendersex（value）{if（value == 'male'）{return "<span style = 'color：blue;'> male </span> <img src = 'images/icon_male.png'/>"; } else {return "<span style = 'color：red;'>女性</span> <img src = 'images/icon_female.png'/>"; }} var cm = new ext.grid.columnmodel（[{header： 'id'、dataindex： 'id'}、{header： 'name'、dataindex： 'name'}、{sex '、dataindex：' sex '、renderer：rendersex}、]; ['2'、 'kate'、 'female']]]]]; var store = new ext.data.store（{proxy：new ext.data.memoryproxy（data）、reader：new ext.data.arrayreader（{}、[{name： 'id'}、{name '}、' {name '; grid = new ext.grid.gridpanel（{autoheight：true、renderto： 'grid'、store：store、cm：cm}）;ライン番号を自動的に表示し、CMを作成するときにRownummererを作成するだけです
var cm = new ext.grid.columnmodel（[new ext.grid.rownumberer（）、// show line numbers {header： 'id'、dataindex： 'header：' name '、dataindex：' name '}、{header：' sex '、dataindex：' rendersex}）;列を削除します
store.remove（store.getat（i））;
テーブルを更新します
grid.view.refresh（）;
テーブルのチェックボックスを追加します
チェックボックスセレクトモデルを使用する必要があります
selectionModel SMは、使用する場合はCMとテーブルに配置する必要があります
var Sm = new ext.grid.checkboxselectionModel（）; var cm = new ext.grid.columnmodel（[new ext.grid.rownumberer（）、{header： 'number'、dataindex： 'id'}、{header： 'name'、dataindex： 'name'}）; var data = '1' ['2'、 'name2']]]]; var store = new ext.data.store（{proxy：new ext.data.memoryproxy（data）、reader：new ext.data.arrayreader（{}、[{name： 'id'}、{name '}） ext.grid.gridpanel（{autoheight：true、renderto： 'grid'、store：store、cm、sm：sm}）;rowselectionModel設定で選択された行は1つの行のみです。
var grid = new ext.grid.gridpanel（{autoheight：true、renderto： 'grid'、store：store、cm、sm：new ext.grid.rowselectionModel（{singleSelect：true}）}）;選択モデルを使用してデータを取得します
grid.on（ 'click'、function（）{var selections = grid.getSelectionModel（）。getSelections（）;テーブルビュー
MVCのアイデアから、テーブルコントロール：
* ext.data.storeはモデルと見なすことができます
* ext.grid.gridpanelは、コントローラーと見なすことができます
* ext.grid.gridViewはビューとして見ることができます
*一般的に、GridViewはGridPanelによって自動的に生成されます。 GridViewのプロパティを設定する場合は、ext.grid.gridpanelのgetView（）を介してビューインスタンスを取得できます。
ext.get（ 'button1'）。
gridpanelのviewconfigを使用して、テーブルを作成するときにgridviewの初期化パラメーターを設定します
var grid = new ext.grid.gridpanel（{height：100、width：400、renderto： 'grid'、store：new ext.data.store（{autoload：true、proxy：new ext.data.memoryproxy（data）、reader：new ext.data.Arrayreader（{met}、met、colum）、coldi viewconfig：{columnStext： 'show column'、//ドロップダウンメニュープロンプトのテキストスクロールオフセット：30、//右のsortasctextにスクロールバーの予約幅を設定します： 'asctext'、//ドロップダウンメニューのテキスト並べ替えの並べ替えを設定します。テーブルにページングツールバーを追加します
* GridpanelのBBARプロパティを使用して、ext.PagingToolbarページングツールバーオブジェクトを作成できます
*ページングツールバーが構成されている場合、テーブルの構築後にstore.load（）を実行する必要があることに注意してください。
var grid = new ext.grid.gridpanel（{renderto： 'grid'、autoheight：true、store、cm：cm、bbar：new ext.pagingtoolbar（{pagesize：10、// 10データ項目はページストアごとに表示されます。 {2}', emptyMsg: "No record" //Information displayed when there is no data})});store.load();バックグラウンドスクリプトからページネーションデータを取得します
httppproxyを使用してリクエストに合格し、サーバーのJSONデータを取得し、分析のためにjsonreaderに引き渡す
var cm = new ext.grid.columnmodel（[{header： 'number'、dataindex： 'id'}、{header： 'name'、dataindex： 'name'}]）; var store = new ext.data.store（{proxy：proxy：new ext.data.htppproxy（{url： 'page.jsp'}」 Ext.data.JsonReader({ totalProperty: 'totalProperty', root: 'root' }, [ {name: 'id'}, {name: 'name'} ])});var grid = new Ext.grid.GridPanel({ renderTo: 'grid', autoHeight: true, //The height is unknown before the data is sent back, so you need to use adaptive heightストア：store、cm：cm、bbar：new ext.pagingtoolbar（{pagesize：10、store：store、displayinfo：true、displaymsg： '{0}から{1} records/total {2}'を表示します。 store.load（{params：{start：0、limit：10}}）;ページネーションツールバーをテーブルの上部に表示する場合は、Gridpanel TBarプロパティ設定を使用してツールバーを追加できます。
extjsが返されたデータをpagingしさせます
* PagingMemoryProxy.jsファイルを、例/localeディレクトリの下にページに導入する必要があります
* PagingMemoryProxyを使用して、プロキシをセットアップします
var store = new ext.data.store（{proxy：new ext.data.pagingmemoryproxy（data）、reader：new ext.data.arrayreader（{name： 'id'}、{name： 'name'}、{name： 'descn'}）; store.load（{params：{start：0、limit：3}}）;編集可能なテーブルコントロールを備えたEditorGridの使用
シンプルなEditorGridを作成する手順：
1.列列モデルを定義し、エディター属性を追加します
var cm = new ext.grid.columnmodel（[{header： 'number'、dataindex： 'id'、editor：new ext.grid.grideditor（new ext.form.textfield（{appled blank：false // textfieldの非内証値は許可されていない}））}、 ext.form.textfield（{loadblank：false}）}]）;2。配列を準備します
var data = [['1'、 'jason']、['2'、 'jay']];
3. ext.data.storeを作成し、メモリプロキシを設定し、配列を解析するためにarrayreaderを設定します
var store = new ext.data.store（{proxy：new ext.data.memoryproxy（data）、reader：new ext.data.arrayreader（{}、[{name： 'id'}、{name： 'name'}））}）;4.データをロードし、EditorGridPanelを作成します
store.load（）; var grid = new ext.grid.editorgridpanel（{autoheight：true、renderto： 'grid'、store：store、cm：cm}）;編集可能なテーブルのデータを追加および削除します
1.レコードを使用してレコードセットを作成するメソッドMyRecordを作成します。私のレコードはクラスに相当します
var myrecord = ext.data.record.create（[{name： 'id'、type： 'string'}、{name： 'name'、type： 'string'}]）; store.load（）;2. editorgridpanelパネルを作成し、プロパティでext.toolbarを作成しますtbar
var grid = new ext.grid.editorgridpanel（{autoheight：true、renderto： 'grid'、store、cm：cm、cm、tbar：new ext.toolbar（[' - '、{//-{// - メニューセパレーターテキスト： 'row'、handler：function（）{bar mymymyrecord（）{'id：' '' '' '' '' grid.stopeding（）;削除？ '、btn ==' yes '）{var sm = gred.getselectedcell（） ' - ']）}）;編集可能なテーブルの変更結果を保存します
上記の例に基づいて、保存ボタンを追加します
テキスト： 'Save'、Handler：function（）{var m = store.Modified.slice（0）; //ストアで変更されたデータを取得します（var i = 0; i <m.length; i ++）{//テーブル情報が正しいかどうか、およびスペースvar record = m [i]が含まれているかどうかを確認します。 var fields = record.fields.keys; for（var j = 0; j <fields.length; j ++）{var name = fields [j]; var値= record.data [name]; var colindex = cm.findcolumnindex（name）; var rowindex = store.indexofid（record.id）; var editor = cm.getcelleditor（colindex）.field; if（！editor.validateValue（value））{ext.msg.alert（ 'tip'、 '入力されたデータが正しいかどうかを確認してください！'、function（）{grid.startediting（rowindex、colindex）;}）;戻る; }}} var jsonarray = []; Ext.each(m, function(item) { jsonArray.push(item.data); //Put the modified data into jsonArray}); ext.lib.ajax.request（// ajaxリクエストを使用してバックグラウンド「post」、 'save_data.jsp'、{success：function（response）{// return ext.msg.alert（ 'information'、response.responsetext、function（）{store.reload（）;}）;} ext.msg.alert（ "error"、 "サーバーがデータエラー！"）;さらに、ストアはプロパティPrunemodifiedRecords：trueを設定できます。このようにして、ストアは、操作を削除またはロードするたびに変更されたタグを自動的にクリアします。これにより、次に送信されたときにすべての変更された情報を提供する現象を回避できます。
テーブル入力のデータ型を制限します
ナンバーフィールド
{header： 'id'、dataindex： 'id'、editor：new ext.grid.grideditor（new ext.form.numberfield（{//数字のみが入力できるという番号がblank：false、false：false、//マイナス記号maxvalue：10}）}}}コンボボックス
var combodata = ['0'、 'java']、['1'、 'android' ']]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]] emptyText： 'select'、mode： 'local'、triggeraction： 'all'、valuefield： 'value'、displayfield： 'text'、readonly：true}））、renderer：function（value）{return combodata [value] [1]; }}デートフィールド
{header： 'date'、dataindex： 'date'、editor：new ext.grid.grideditor（{format： 'ym-d'、minvalue： '2011-07-24'、disableddays：[0、6]、disableddaystext： 'lender：fallender：unction：fallender：fallenderdday（ }}PropertyGridの使用
EditorGridに基づいて開発されたよりスマートな高度なフォームコンポーネントです
var grid = new ext.grid.propertygrid（{title： 'propertygrid'、autoheight：true、width：400、renderto： 'grid'、viewconfig：{forcefit：true}、source：{"string"： "string"、 "date"：new date（date.24/2011 '）、 " }}）;PropertyGrid編集機能を無効にする方法
grid.on（ 'byfortedit'、function（e）{e.cancel = true; return false;}）;テーブルの名前に応じて値を取得します
grid.store.getByid（ 'jason'）。get（value）;
extjsにネストされたテーブルを実装します
最初に効果を見てみましょう：
コードは次のとおりです。
<！doctype html public " - // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <hhtml> <head> <meta htp-aiv =" "" "" content = "text/html; charset = utf-8"/> <title> test </title> <script = "text/javascript"> </script> <link rel = "styleSheet" type = "text/css" href = " src = "lib/extjs/2_2/adapter/ext/ext-base.js"> </script> <script type = "text/javascript" src = "lib/extjs/2_2/ext-all-debug.js"> </script> <script = "text/javascript" "" src = "lib/extjs/2_2/source/locale/ext-lang-zh_cn.js"> </script> <スクリプトタイプ= "text/javascript" src = "lib/extjs/plus/rowexpander.js"> </script> <スクリプトタイプ= "text/javascript" ["Lugreen"、 "Male"、26、[["Math"、100]、["中国語"、150]]、["lisi"、 "Male"、25、[["Math"、100]、["中国語"、150]]、 ext.data.simplestore（{fields：["name"、 "sex"、 "age"、 "grade"]、data：testdata}）; var expander = new ext.grid.rowexpander（{tpl：new ext.xtemplate（ '<div>'、 '' '、' </div> '）; //グリッドウィンドウを見つけます。 var cm = new ext.grid.columnmodel（[{header： "article"、dataindex： 'class'、width：130、hideable：false、sortable：false、resizable}、{header： "score"、dataindex： 'degrade'、width：130、falseable：false：resizable：false、resizable：falseable：falseable：falseable：falseable：falseabl ext.domquery.select（ "div.detaildata"）[0]; ext.grid.CheckboxSelectionModel（{SingleSelect：true}）; new ext.grid.columnmodel（[expander、{name "、 'name'、width：50、hidaible：false、sortable：false}、 130、hidable：false、sortable：false、resizable：true}]; new ext.gridpanel（{id： 'testgrid'、store：storetest、cm：cm、renderto： "grid1"、width：780、 ）;}）; </script> <style type = "text/css"> ＃div2 h2 {font-weight：200; font-size：12px;}。C1H2{font-weight：200;} </style> </head> <body> <div id = "grid1"> </div> <div id = "grid2"> </div> </body> </html>使用される「rowexpander.js」は、公式のextjsの例に組み込まれています。
このネストされたテーブルを実装する際に注意すべき2つのヒントがあります。
1.外側のテーブルのデータストアに提供されるデータソースは、以下の太字に示すように、ネストされた配列の形で詳細領域のデータを表します。
var testData = [["lugreen"、 "MALE"、26、[["MATH"、100]、["中国語"、150]]、["lisi"、 "Male"、25、["Math"、100]、["bishen"、150]]]]、
配列内のレコードオブジェクトのJSON属性を使用して、データを詳細に取得します
var data = r.json [3];
2. RowExpanderの拡張イベントにネストされたテーブルを追加します。