Grid panel columns as rows, help needed

[meshulro]

Hi all,

As you know, the typical grid displays data per column, each column has its header which tells the user what is shown in that column.

In my case, I want to create dynamic grid where each time the user clicks a button a column is added, in this case the rows are actually the data titles, i.e. instead of having "Price" column i have "Price" row. Anyone had a case like this?

To help you visualize it, think of a mortgage calculation application where each click adds another payment:
Year 1 ¦ Year 2 ¦ Year 3 ¦ Year 4 ¦ Year 5 ¦ Year 6
principal:
interest:
total:
- Add year -
Users feel more comfortable viewing this information in this layout in case you wonder why I don't follow the typical grid where years have been the rows.

Anyone?

[walldorff]

Maybe you can try this:

You set up and load the full store. I presume the years are limited.
Then, in the button handler, you add a column.

First: read this (http://www.sencha.com/forum/showthread.php?53009) and include the goodies of Condor in your code.

Then you may do something like:
// Placeholder for the amount of columns.
// On initialization there are 3 columns for 3 years.
var t = 3;

// The data of all years you feed to the store. From the server or otherwise.
var myData = [
['principal', 1000, 2000, 3000, 4000, 5000, 6000],
['interest', 0.29, 0.25, 0.20, 0.17, 0.13, 0.10],
['total', 1290, 2500, 3600, 4680, 5650, 6600]
];

// Set up the store; in this case an ArrayStore.
var store = new Ext.data.ArrayStore({
fields: ['what','yr1','yr2','yr3','yr4','yr5','yr6']
});

// manually load local data
store.loadData(myData);

// column model with the initial 1 + 3 columns
var colModel = new Ext.grid.ColumnModel({
columns: [
{header : 'what', dataIndex: 'what', width: 70},
{header : 'Year 1', dataIndex: 'yr1'},
{header : 'Year 2', dataIndex: 'yr2'},
{header : 'Year 3', dataIndex: 'yr3'}
],
defaults: {sortable: false, menuDisabled: true, width: 50}
});

// create the Grid
var grid = new Ext.grid.GridPanel({
title : 'Array Grid',
store : store,
cm : colModel,
renderTo : Ext.getBody(),
stripeRows : true,
height : 200,
bbar : [{
text : 'Add year',
handler: function(btn) {
// courtesy: Condor. http://www.sencha.com/forum/showthread.php?53009
grid.addColumn({header : 'Year '+ (++t), dataIndex: 'yr'+ (t)});
delete store.reader.ef;
store.reader.buildExtractors();
// disable the button when limit is reached
if(t == 6) {
btn.disable();
}
}
}]
});