[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

[Komal Vaswani]

Hi,
I want to store the value of radio button which I have selected back into the Database..so can u give me the idea how can I retrieve the inputvalue of selected radio button?

Thanks,
Komal

[Condor]

RadioColumn stores the inputValue of the selected radio in the field of the record in the store.

This means you only have to send the store content and don't have to bother about radio states.

[Komal Vaswani]

Hi,
How can I send the store content to java action class? any example?

[Condor]

This is array data, not simple name/value pairs, so I first have to know what kind of parameter format your server is expecting.