GridPanel 개요
ExtJS의 테이블 기능은 정렬, 캐싱, 드래그, 특정 열 숨기기, 행 번호 자동 표시, 열 요약, 셀 편집 및 기타 실용적인 기능을 포함하여 매우 강력합니다.
테이블은 Panel에서 상속된 Ext.grid.GridPanel 클래스에 의해 정의되며 xtype은 그리드입니다. ExtJS에서 테이블 그리드는 열 정의 정보를 포함해야 하며 테이블의 데이터 저장소 저장소를 지정해야 합니다. 테이블의 컬럼 정보는 Ext.grid.Column 클래스(기존 Ext.grid.ColumnModel에 의해 정의됨)에 의해 정의되고, 테이블의 데이터 저장소는 Ext.data.Store에 의해 정의됩니다. 데이터 저장소는 JsonStore로 나누어집니다. , SimpleStroe 및 GroupingStore는 구문 분석된 데이터에 따라 대기합니다.
다음은 코드를 통해 센차 그리드패널 편집 유닛을 소개합니다.
{ 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 Gridpanel에서 셀 색상을 변경하는 코드입니다
제목 열에는 승인된 경우 녹색이, 거부된 경우 빨간색이 표시됩니다.
{ 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: '标题' }