PDA

View Full Version : Ext Elements inside the grid



aungii
5 Feb 2008, 8:33 PM
I have implemented a grid plugin to render the ext elements inside the gird column.
Thank jsakalos for the post http://extjs.com/forum/showthread.php?t=24508 that was referenced to implement this.

ElementColumn.js

Ext.namespace('Ext.ux', 'Ext.ux.grid');

Ext.ux.grid.ElementColumn = function(config) {
Ext.apply(this, config);
};

Ext.ux.grid.ElementColumn.prototype = {
header:'',
sortable:false,
dataIndex:'',
width:100,
lazyRender:true

init:function(grid) {
this.grid = grid;
this.renderer = this.renderer.createDelegate(this);
this.grid.on('render', this.renderElements, this);
},

renderer : function(value, cell, record, row, col, store) {
cell.css = 'ux-grid3-row-action-cell';
if(!this.col) {
this.col = col;
}
return "<div class='x-elements-cols x-select-rowId-"+row+"'></div>";
},

renderElements : function() {
var cols = Ext.DomQuery.select('div[class^="x-elements-cols"]',this.grid.getView().dom);
for(var x=0; x<cols.length; x++) {
var rowIndex = this.getRowIdFromClassName(cols[x].className);
var dataIndex = this.grid.getColumnModel().getDataIndex(this.col);
var record = this.grid.store.getAt(rowIndex);
var value = record.get(dataIndex);
if (value.type == 'chk') {
for(var y=0; y<value.data.length; y++) {
var element = new Ext.form.Checkbox({
id: value.data[y],
boxLabel: value.data[y],
xtype: 'checkbox'
});
element.render(cols[x]);
}
} else if (value.type == 'radio') {
for(var y=0; y<value.data.length; y++) {
var element = new Ext.form.Radio({
id: value.data[y],
boxLabel: value.data[y],
xtype: 'radio'
});
element.render(cols[x]);
}
} else if (value.type == 'txtbox') {
for(var y=0; y<value.data.length; y++) {
var element = new Ext.form.TextField({
id: value.data[y],
boxLabel: value.data[y],
xtype: 'textfield',
width:'30'
});
element.render(cols[x]);
}
}
}
},

getRowIdFromClassName : function (className) {
var rowId = className.replace('x-elements-cols x-select-rowId-','');
return rowId;
}
};

CSS

.ux-grid3-row-action-cell .x-grid3-cell-inner {
padding: 1px 0 0 0;
}
.ux-grid3-row-action-cell .x-grid3-cell-inner div {
background-repeat:no-repeat;
width:16px;
cursor:pointer;
}

Sample Usage

Ext.onReady(function(){

Ext.QuickTips.init();

var xg = Ext.grid;

var reader = new Ext.data.JsonReader({
totalProperty: 'results',
root: 'rows',
id: 'id',
fields: [
{name: 'company'},
{name: 'products'}]
});

var elementCol = new Ext.ux.grid.ElementColumn({
header:"Products",
dataIndex:'products'});

var grid1 = new xg.GridPanel({
store: new Ext.data.Store({
reader: reader,
data: dummyData
}),
cm: new xg.ColumnModel([
{header: "Company", width: 80, sortable: true, dataIndex: 'company'},
elementCol
]),
viewConfig: {
forceFit:true
},
width: 500,
height: 200,
plugins: [elementCol],
title: "Ext elements inside grid column",
iconCls: 'icon-grid',
renderTo: document.body
});
});

dummyData = {'results': 2, 'rows': [
{ 'id': 1, 'company': 'Company A', 'products': {'type': 'chk', 'data':['Product A','Product B'] } },
{ 'id': 2, 'company': 'Company B', 'products': {'type': 'radio', 'data':['Product C','Product D', 'Product E'] } },
{ 'id': 3, 'company': 'Company C', 'products': {'type': 'txtbox', 'data':['Product F','Product G', 'Product H'] } }
]};

Please advice that how can we improve this implementation.
Right now, the trick is render the elements after grid rendering is done (listen on 'render' event on gird) at the predefined placeholder (defined while column is rendering).

Regards,

kenshin
6 Feb 2008, 12:53 AM
Very nice work!

Thanks :)