表格GridPanel概述
ExtJS中的表格功能非常強大,包括了排序、緩存、拖動、隱藏某一列、自動顯示行號、列匯總、單元格編輯等實用功能。
表格由類Ext.grid.GridPanel定義,繼承自Panel,其xtype為grid。ExtJS中,表格Grid必須包含列定義信息,並指定表格的數據存儲器Store。表格的列信息由類Ext.grid.Column(以前是由Ext.grid.ColumnModel定義)、而表格的數據存儲器由Ext.data.Store定義,數據存儲器根據解析的數據不同分為JsonStore、SimpleStroe、GroupingStore等。
下面通過一段代碼給大家介紹sencha gridpanel 編輯單元,具體代碼如下所示:
{ 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: '標題' }