ext-grid FAQ:Grid

gridのよくある質問:
1,gridデータが空である.2、gridは画像3を正しく表示できず、正しくソートできない4、TabPanelsはgrid 5、gridセルのlink 6、マージフィールド7、カスタムrowまたはcolumnの外観、動作8、grid cellはclickイベント9を追加し、storeがloadを呼び出した後、Storeはまだ空10で、gridサイズはwindowに従って11変化し、gridセル(実際には:store)12を更新し、異なるurlからgrid 13、xml問題14を再ロードし、それが空であるべきである場合、gridはレコード15を保持し、json Readerのデバッグ16、ドラッグ、またはレコード17を再ロードし、水平スクロールバー18、固定または非固定列幅19、ある列20を非表示にし、grid列固定幅パッケージセルの内容21、列22を追加し、toolbarの要素23、選択行24を削除し、ページ別、総記録数25、grid行インデックス(row index)によりrecord 26を取得し、gridは異なるserverまたはstoreから、データ27をロードし、列自動サイズ28、ある行29、contentEl、applyToとrenderToの違い30、エラーデータ、red flagは31、Editor grid-ComboBoxは32、表示枠33、grid右側のスクロールバー34を削除し、gridはfooter 35を使用し、gridコピーセル内容36,grid中のcomboBoxes 37,gridカスタムスタイル
 
具体的な解決策は次のとおりです.
1.gridが空

gridデータを表示しない

Storeデータをロードしない

gridは空

gridは

を実行しない.

gridはstore

を傍受していない
問題が引き起こす可能性のある原因
    (1).gridの高さ、height、autoHeight、またはlayout:'fit'のコンテナの1つを定義するかどうか

grid = new Ext.grid.EditorGridPanel{(
         //  configs
         //      height
         //    ,(1)      height,(2) autoHeight(3) grid       :fit   
         //autoHeight: true   // autoHeight              
         // --   --
         //height: 350
)}

    (2).storeをロードしますか?呼び出し方法load()
    (3). render gridかどうか、Render a gridは次のいずれかを使用します.

grid構成でrenderToまたはel自動render

を使用する.

に表示される呼び出しrender()メソッド、grid.render()

    (4). renderの要素が存在するかどうか.
    (5). 1つのgridを1つのtab panelに入れる場合は、tabPanelの構成にlayoutOnTabChange:trueを追加してみます.
    (6). JSONを使うと、

JSONのフォーマットが正しいかどうか(www.jslint.comでJSON応答を検証できます)

stringではないことを確認します(JSON=object)

フィールド名にピリオド(.)を使用しないでください.(「filed.c」extは翻訳されません)

JSONの構造とrenderの一致を確保する(記録配列がルートノードの下にあるなど)

    (7).The renderが正しいrootを正しく指定しているか、JSONでこのrootを使用しているか

次のJSOnReaderからの応答例を確認します.JSON応答の配列をパッケージするrootを設定すると、次のようになります.

{ 'results': 2, 'rows': [{"CodigoProduto":"3009","TipoProduto":"FERT",
"DescricaoProduto":"7 UP  Reg. 12 GR 1,50 PET",
"UnidadeMedidaProduto":"TAB","Sabor":"V-REGULAR",
"CodigoMarca":"35","ProdutoPesoBruto":"19.448",
"ProdutoPesoLiquido":"18.760","ProdutoPesoUM":"KG",
"ProdutoVolume":"18.000","ProdutoVolumeUM":"L",
"ProdutoUM_PAL":"36","Eliminar":""}]
} 

    (8). レコードされたデータが配列の1つであることを確認します.

var SecurityItemRecord = Ext.data.Record.create([{name: 'type'}, {name: 'itemName'}]);//OK
var SecurityItemRecord = Ext.data.Record.create({name: 'type'}, {name: 'itemName'});//NO GOOD

firebugを使用して次の操作を試みます.
(I)firebugにエラー表示がないか
(II)要求が発行されたか否か(consoleの表示)
(III)この要求に応答があるかどうか、もしそうであれば、結果をwww.jslintにコピーする.comでフォーマットを検証し、その応答があなたの望む結果かどうかを確認し、総記録数、配列のルートディレクトリなどをチェックします.
    store load?リスナーの追加storeがロードされているか異常があるかどうかを監視します(リスナーの追加方法?)
       Store 'datachanged', 'load', 'loadexception',
       Proxy  'load'/'loadexception'
ajaxリスナーを追加することもできます
 
2.gridが正常に画像を表示できない(checkboxes、など)
(1)Cssファイル接続が正しいか
(2)、css参照が正しいかどうか、相対経路をチェックする.
 
3.並べ替えの問題
    (1). store構成(sortInfoおよびsort type)を確認するか、setDefaultSort()を使用します.

sortInfo:{field: 'fieldname', direction: 'ASC'} 
//    :
store.setDefaultSort('fieldname', 'ASC'); 

    (2). sort typeが設定されているかどうかを確認します
    (3). 現在のページのみを並べ替える場合、DBクエリー全体を並べ替えるremoteSortは、true(remoteSortのデフォルトはローカル)に設定する必要があります.
    (4). 列のソート
列データ

//    
+-+-------+
|1|First |
|2|Last |
|3|Second|
+-+-------+

//     
+-+-------+
|1|First |
|3|Second|
|2|Last |

レコード定義

sortType: function(value)
{
   switch (value.toLowerCase())
   {
      case 'first': return 1;
      case 'second': return 2;
      default: return 3;
   }
}

 
 
4.Tab Panelsのgrid
    (1).他のパネルのように、GridPaneをitemとして直接追加することができます.
    (2).GridパネルがTabパネルであることを確認
    (3).タブパネルでlayoutOnTabChangeを設定する

//grid  
var g = new Ext.grid.GridPanel(
       title: 'I will be the tab label';
)

var tabs2 = new Ext.TabPanel({
       renderTo: document.body,
       activeTab: 0,
       widht: '100%'
       height: 150,
       frame: true,
       defaults:{autoScroll: true},
       items: [0]   //grid   
})

 
    (4).例:http://examples.extjs.eu/?ex=gridintab
 
5.gridセルのリンク
    (1). rendererをカスタマイズするか、
    (2). Ext.gridを使用します.RowSelectionModelのrowselectイベントは、次のとおりです.

function handleRowSelect(selectionModel, rowIndex, selectedRecord){
         //       url  
         var url = selectedRecord.get('url');
         //            
         window.open(url);
}

grid.getSelectionModel().on('rowselect',handleRowSelect);

 
6.連結フィールドが1列である
    (1). 接続レコードの2つのフィールド(または複数)

var reader = new Ext.data.ArrayReader({},[
       //    
       {name:'full_name',type:'string',mapping:'first_name+ " " + obj.last_name'},
       {name: 'age'}
]);

var grid = new Ext.grid.GridPanel({
       store: new Ext.data.Store({
             render: reader,
             data: Ext.grid.dummyData
       }),
       columns:[
              {header: 'Full Name',dataIndex: 'full_name'},
              {header: 'Age',dataIndex:'age'}
       ]
})

    (2). 必要なフィールドを作成できます.
 
--続き
 
 
変換元(http://www.extjs.com/forum/showthread.php?t=27784)