PDA

View Full Version : Horizontal Grid - How to Transpose Columns to rows in Grid



ahijazi
20 Sep 2012, 3:23 AM
Hi,
I have a requirement where I have a grid that has different columns with different types across the top and days down the rows. What I need is to transpose this grid so that the columns become rows and the rows become columns. The main issue is the columns all have different types.

Example of what it needs to look like:
....................................................Mon Tue Wed Thu Fri Sat Sun ...
A Boolean Row Here:
A String Row Here:
A Number Row Here:
More Rows Here...:

Is this achievable without create a seperate grid per row or individual form fields.

Thanks any help will be appreciated.

scottmartin
20 Sep 2012, 7:13 AM
I guess you could create another store and and reconfigure your grid with the new columns?

Scott.

iplanit
20 Sep 2012, 7:18 AM
There is a MyApp.view.MyPropertyGrid that maybe useful (but it is not what you want) for you.

http://dev.sencha.com/deploy/ext-4.0.0/examples/grid/property.html

Regards

scottmartin
20 Sep 2012, 7:27 AM
Yeah .. I thought of suggesting the property grid as well, but you would have to extend it to show columns that used to be rows.

You could also look at this:
http://www.sencha.com/forum/showthread.php?237492

Scott.

ahijazi
20 Sep 2012, 9:58 AM
Thanks guys for your input.

Here is my solution. I used a grid and updated the celleditor for each row dependent on a type field supplied in the data model.


Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.data.Model'
]);

Ext.onReady(function() {
// sample static data for the store
Ext.define('Company', {
extend: 'Ext.data.Model',
fields: ['name', 'day1', 'day2', 'day3', 'day4', 'type']
});
var myData = [
['This another yes/no', true, true, false, false, 'boolean'],
['This another yes/no', false, true, false, true, 'boolean'],
['this is a text row', 'test', 'test2', 'test3', 'test4', 'string'],
['this is a time row', '03:00', '17:32', '12:33', '00:00', 'time']
];
specialRender = function(val, meta, rec) {
var type = rec.get('type');
var result = val;
if (type == 'time' && Ext.isDate(val)){
result = Ext.util.Format.date(val,'H:i');
} else if (type == 'boolean' && Ext.isBoolean(val)) {
if (val) {result='Yes'}else{result='No'};
}
return Ext.util.Format.htmlEncode(result);
};
getCellEditor = function(record, column) {
return myeditors[record.get('type')];
};
var myeditors = {
'date' : Ext.create('Ext.grid.CellEditor', { field: Ext.create('Ext.form.field.Date', {selectOnFocus: true})}),
'string' : Ext.create('Ext.grid.CellEditor', { field: Ext.create('Ext.form.field.Text', {selectOnFocus: true})}),
'number' : Ext.create('Ext.grid.CellEditor', { field: Ext.create('Ext.form.field.Number', {selectOnFocus: true})}),
'int' : Ext.create('Ext.grid.CellEditor', { field: Ext.create('Ext.form.field.Number', {selectOnFocus: true})}),
'time' : Ext.create('Ext.grid.CellEditor', { field: Ext.create('Ext.form.TimeField', {selectOnFocus: true,format: 'H:i'})}),
'boolean' : Ext.create('Ext.grid.CellEditor', { field: Ext.create('Ext.form.field.ComboBox', {
editable: false,
store: [[ true, 'Yes' ], [false, 'No' ]]
})})
};
var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
});
// create the data store
var store = Ext.create('Ext.data.ArrayStore', {
model: 'Company',
data: myData
});

// create the Grid
grid = Ext.create('Ext.grid.Panel', {
store: store,
stateful: true,
stateId: 'stateGrid',
plugins: [cellEditing],
columns: [
{
text : 'Company',
flex : 200,
sortable : false,
render : specialRender,
dataIndex: 'name'
},
{
text : 'day1',
width : 75,
sortable : false,
renderer : Ext.Function.bind(this.specialRender, this),
getEditor: Ext.Function.bind(this.getCellEditor, this),
dataIndex: 'day1'
},
{
text : 'day2',
width : 75,
sortable : false,
renderer : Ext.Function.bind(this.specialRender, this),
getEditor: Ext.Function.bind(this.getCellEditor, this),
dataIndex: 'day2'
},
{
text : 'day3',
width : 75,
sortable : false,
renderer : Ext.Function.bind(this.specialRender, this),
getEditor: Ext.Function.bind(this.getCellEditor, this),
dataIndex: 'day3'
},
{
text : 'day4',
width : 75,
sortable : false,
renderer : Ext.Function.bind(this.specialRender, this),
getEditor: Ext.Function.bind(this.getCellEditor, this),
dataIndex: 'day4'
}
],
height: 350,
width: 600,
renderTo: 'grid-example',
viewConfig: {
stripeRows: true
}
});
});

scottmartin
20 Sep 2012, 10:06 AM
Thanks for posting your solution. After reviewing your solution, I believe we did not understand your intent.

Glad you got it working.

Scott.

ahijazi
21 Sep 2012, 4:36 AM
Thank you for responding. This forum is extremely useful.