GridPanel の概要
ExtJS のテーブル関数は非常に強力で、並べ替え、キャッシュ、ドラッグ、特定の列の非表示、行番号の自動表示、列の要約、セルの編集、その他の実用的な機能が含まれます。
テーブルは、Panel から継承されたクラス Ext.grid.GridPanel によって定義され、その xtype は Grid です。 ExtJS では、テーブル Grid に列定義情報が含まれ、テーブルのデータ ストレージ Store を指定する必要があります。テーブルの列情報は Ext.grid.Column クラス (以前は Ext.grid.ColumnModel で定義) によって定義され、テーブルのデータ ストレージは Ext.data.Store によって定義されます。 データ ストレージは JsonStore に分割されます。 、SimpleStroe、および GroupingStore は解析されたデータに従って待機します。
以下では、コードを通じて sencha グリッドパネル編集ユニットを紹介します。具体的なコードは次のとおりです。
{ xtype: 'gridpanel', region: 'north', height: 150, title: 'My Grid Panel', store: 'A_Test_Store', columns: [ { xtype: 'gridcolumn', dataIndex: 'Name', text: 'Name', editor: { xtype: 'textfield' } }, { xtype: 'gridcolumn', dataIndex: 'Content', text: 'Content' }, { xtype: 'gridcolumn', dataIndex: 'Time', text: 'Time' } ], plugins: [ Ext.create('Ext.grid.plugin.CellEditing', { clicksToEdit: 1, //点击单元格编辑 listeners: { beforeedit: { fn: me.onCellEditingBeforeEdit, scope: me }, validateedit: { fn: me.onCellEditingValidateedit, scope: me } } }) ] } onCellEditingBeforeEdit: function(editor, e, eOpts) {//动态赋值用.正常情况下不需要该事件. e.record.data[e.field]= "my test"; e.value="my test"; e.record.commit(); //提交,不提交无效 } onCellEditingValidateedit: function(editor, e, eOpts) { if(e.row==1) //验证逻辑 { e.cancel=true; //取消 e.record.data[e.field] = e.value; } e.record.commit(); }
次のコードは sencha グリッドパネルのセルの色の変更に関するものです
タイトル列には、承認された場合は緑色、拒否された場合は赤色が表示されます:
{ xtype: 'gridcolumn', renderer: function(value, metaData, record, rowIndex, colIndex, store, view) { metaData.tdAttr = 'data-qtip="'+record.data.Content+'"'; if(record.data.Content.indexOf('审核通过')!=-1) { metaData.style="color:green"; } else if(record.data.Content.indexOf('拒绝')!=-1) { metaData.style="color:red"; } return value; } , width: '*', dataIndex: 'Title', text: '标题' }