View Full Version : Transpose X and Y axis on editor grid (or property grid with multiple columns)

21 Sep 2010, 1:52 PM
I need an editor grid with the rows acting line columns and the columns acting like rows. As records are added, a new column is added. This is for a financial application where the dates (records) are displayed in columns and the attributes/fields are displayed in rows. For example:

Item Q1 Q2 Q3
------- ------ ------- -------
Cash 1000 2000 3000
Debt 300 500 200
Date 4/2/10 7/4/10 9/1/10

I can transpose the data on the server but I need the cell editors to be correct. For example, the "Date" row needs a Date editor. This is how the PropertyGrid works but that only allows for one data/value column. I need multiple data columns.

Has anyone done this or have advise on the best approach? Extend PropertyGrid, extend EditorGrid, use some advanced dynamic field editor that changes based on the row data?


21 Sep 2010, 8:50 PM
turn your screen by 90 (joke, sorry :))

Starting by extend Ext.grid.GridView and looking at insertRows, deleteRows methods... and create your own insertCols and deleteCols method with this example !

Good luck !

23 Sep 2010, 10:05 PM
// Define the editor for each row (This could also be an object based on some value in the record)
var editors = [

// Set the editor for the current column for each edit. The e arg contains:
// grid - This grid
// record - The record being edited
// field - The field name being edited
// value - The value for the field being edited.
// row - The grid row index
// column - The grid column index
// cancel - Set this to true to cancel the edit or return false from your handler.
var setEditor = function(e){
e.grid.getColumnModel().config[e.column].setEditor(new editors[e.row])

// In the editor grid, listen for beforeedit and call setEditor
var grid = new Ext.grid.EditorGridPanel({
store: store,
cm: cm,
renderTo: 'editor-grid',
width: 600,
height: 300,
autoExpandColumn: 'common', // column with this id will be expanded
title: 'Edit Plants?',
frame: true,
clicksToEdit: 1,
listeners: {beforeedit: setEditor}