[2.x] Ext.grid.RadioColumn

[Condor]

In the Help forum there were several requests for a 'survey' grid.


(I modified the code to use radiobutton images instead; see post below)

This can be easily done by modifying Ext.grid.CheckColumn:

RadioColumn.js:

Ext.grid.RadioColumn = function(config){
    Ext.apply(this, config);
    if(!this.id){
        this.id = Ext.id();
    }
    this.renderer = this.renderer.createDelegate(this);
};

Ext.grid.RadioColumn.prototype ={
    init : function(grid){
        this.grid = grid;
        this.grid.on('render', function(){
            var view = this.grid.getView();
            view.mainBody.on('mousedown', this.onMouseDown, this);
        }, this);
    },

    onMouseDown : function(e, t){
        if(t.className && t.className.indexOf('x-grid3-cc-'+this.id) != -1){
            e.stopEvent();
            var index = this.grid.getView().findRowIndex(t);
            var record = this.grid.store.getAt(index);
            record.set(this.dataIndex, this.inputValue);
        }
    },

    renderer : function(v, p, record){
        p.css += ' x-grid3-check-col-td'; 
        return '<div class="x-grid3-check-col'+(v == this.inputValue?'-on':'')+' x-grid3-cc-'+this.id+'"> </div>';
    }
};

Usage:

Ext.onReady(function(){
	var store = new Ext.data.SimpleStore({
		fields: ['question', 'answer'],
		data: [['Staff', 3], ['Services', 3], ['Clean', 3], ['Comfort', 3], ['Value for money', 3]]
	});
	var answers = [
		new Ext.grid.RadioColumn({header: 'Very poor', inputValue: 1, dataIndex: 'answer', width: 75, align: 'center', sortable: true}),
		new Ext.grid.RadioColumn({header: 'Poor', inputValue: 2, dataIndex: 'answer', width: 75, align: 'center', sortable: true}),
		new Ext.grid.RadioColumn({header: 'Average', inputValue: 3, dataIndex: 'answer', width: 75, align: 'center', sortable: true}),
		new Ext.grid.RadioColumn({header: 'Good', inputValue: 4, dataIndex: 'answer', width: 75, align: 'center', sortable: true}),
		new Ext.grid.RadioColumn({header: 'Very good', inputValue: 5, dataIndex: 'answer', width: 75, align: 'center', sortable: true})
	];
	var columns = [
		{header: 'Review your stay', dataIndex: 'question', width: 100, sortable: true}
	].concat(answers);	
	var grid = new Ext.grid.EditorGridPanel({
		store: store,
		plugins: answers,
		columns: columns,
		width: 475,
		autoHeight: true,
		renderTo: document.body
	});
});

[evant]

That's cool, very useful!

[nb]

can't select multiple checkbox in one row???

[mystix]

can't select multiple checkbox in one row???

it's a RadioColumn.

you can't score both "Very Poor" and "Very Good" for cleanliness.

[Condor]

Perhaps it is confusing that I still used the original checkbox images.

I included a new version using radio images.

[Ritesh]

Thanx Condor, this is more or less what i needed.

Does anyone know if it is possible to do this in the headings? see screenshot
even if you could point me to the right direction

[Condor]

Does anyone know if it is possible to do this in the headings? see screenshot even if you could point me to the right direction

Your question isn't quite clear. Are you looking for GroupHeaderGrid?

[Ritesh]

Thank You! That was exactly what i was looking for. I had no idea that functionality existed.

[Waldo]

Your question isn't quite clear. Are you looking for GroupHeaderGrid?

How do I add the the RadioColumn plugin to the groupHeaderGrid plugin? I tried the code below, but it doesn't work.

var radioButtons = [
new Ext.grid.RadioColumn({header: '$', inputValue: 1, dataIndex: 'paymentType', width: 8, align: 'center', sortable: false, menuDisabled: true}),
new Ext.grid.RadioColumn({header: 'R', inputValue: 2, dataIndex: 'paymentType', width: 8, align: 'center', sortable: false, menuDisabled: true})
];

var columns = [sm, {id:'productDetails', header: "Product details", width: 40, sortable: true, dataIndex: 'productDetails'}].concat(radioButtons).concat(additionalCols);

var grid = new Ext.grid.EditorGridPanel({
store: store,
columns: columns,
sm: sm,
width: 475,
autoHeight: true,
renderTo: 'radioGrid',
plugins: [new Ext.ux.plugins.GroupHeaderGrid(), radioButtons]
});

[Condor]

How do I add the the RadioColumn plugin to the groupHeaderGrid plugin? I tried the code below, but it doesn't work.

You are putting an array inside an array instead of appending to it. Try:

plugins: [new Ext.ux.plugins.GroupHeaderGrid()].concat(radioButtons)