[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
	});
});