PDA

View Full Version : How to add CheckboxGroup as column in Sencha Grid



offshoreteam
1 Apr 2013, 4:22 AM
I would like to add checkboxgroup as separate column in sencha grid. I am working with ExtJs 4.1
Also I want to bind data from server to checkboxgroup column.
Suppose I have weekdays as checkboxgroup. I should be able to make Mon,Tue,Wen,Thu as checked and Fri ,Sat ,Sun as unchecked through server data. Please refer below screen shot

42804

slemmon
3 Apr 2013, 3:04 PM
There's not a way to neatly drop an Ext component into a grid cell. However, HTML can be added including images and CSS. My first thoughts are to have the 'selected days of the week' returned from the server in a data field in the model that a column renderer (http://docs.sencha.com/ext-js/4-2/#!/api/Ext.grid.column.Column-cfg-renderer) could use in order to render the appropriate images, divs, and/or class data to the cell.

cellclick (http://docs.sencha.com/ext-js/4-2/#!/api/Ext.panel.Table-event-cellclick) events could be used to monitor interactions with the 'checkboxes' in the cell even if you wanted users to be able to interact directly with the checkboxes directly.

Alternatively, if you're ok with the columns per day of the week being separate you might make use of the checkcolumn (http://docs.sencha.com/ext-js/4-2/#!/api/Ext.grid.column.CheckColumn) ux class or a subclass of it to suit your styling needs.

raminbp
3 Apr 2013, 11:48 PM
if you take a look into the Extjs Docs , there is an xtype config under the Ext.grid.column.Column.

whats that config for ? if you cant put any ExtComponent in gridCells so what is 'datecolumn' ?

I'm really interested in this subject, and as always about Extjs , there is an straight way to handle that. you need just to find it .

offshoreteam
4 Apr 2013, 1:16 AM
There's not a way to neatly drop an Ext component into a grid cell. However, HTML can be added including images and CSS. My first thoughts are to have the 'selected days of the week' returned from the server in a data field in the model that a column renderer (http://docs.sencha.com/ext-js/4-2/#!/api/Ext.grid.column.Column-cfg-renderer) could use in order to render the appropriate images, divs, and/or class data to the cell.

cellclick (http://docs.sencha.com/ext-js/4-2/#!/api/Ext.panel.Table-event-cellclick) events could be used to monitor interactions with the 'checkboxes' in the cell even if you wanted users to be able to interact directly with the checkboxes directly.

Alternatively, if you're ok with the columns per day of the week being separate you might make use of the checkcolumn (http://docs.sencha.com/ext-js/4-2/#!/api/Ext.grid.column.CheckColumn) ux class or a subclass of it to suit your styling needs.


Thanks for your reply. We are able to do this as suggested by you. By implementing this way we are not able to sort other columns of grid. If we enabling the sorting, then we are loosing the checkbox state. Please suggest if we can maintain the checkbox state while sorting.

slemmon
4 Apr 2013, 1:35 PM
Hmm... not sure I follow what's failing for you. Would you be able to post a code snippet as an example of what you're doing and how it's failing?

offshoreteam
5 Apr 2013, 4:20 AM
Below is code snippet which I used:

If user select few days(checkboxes) and sort grid , those selection get vanished.

How to preserve those selection after sorting?

<div id="weekdayGrid"></div>

<script type="text/javascript">
var tpl = new Ext.XTemplate(
'<p>{[this.getDay(values)]}</p>',
{
getDay: function (values) {
var arr = [],
days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
day;

for (var i = 0, len = values.length; i < len; i++) {
day = days[values[i]];
arr.push('<input type="checkbox" name="day" value="' + day + '" />' + day);
}
return arr.join('');
}
}
);

Ext.onReady(function () {
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone', 'days'],
data: [
{ 'name': 'Lisa', "email":"lisa@ttt.com", "phone":"123-111-1224", days: [0, 3, 5] },
{ 'name': 'Bart', "email":"bart@ttt.com", "phone":"123-222-1234", days: [4, 5, 6] },
{ 'name': 'Homer', "email":"home@ttt.com", "phone":"123-222-1244", days: [1, 2, 3] },
{ 'name': 'Marge', "email":"marge@ttt.com", "phone":"123-222-1254", days: [1, 4, 6] }
]
});

Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' },
{ text: 'Days of the Week', dataIndex: 'days', renderer: function (value, metaData, record, rowIndex, colIndex, store, view) {
return tpl.apply(value);
}, flex: 1 }
],
height: 400,
width: 800,
renderTo: 'weekdayGrid'
});
});
</script>