PDA

View Full Version : Multiple rows into single cell for extjs grid panel



saurabh.find
5 Apr 2011, 11:32 AM
I have problem add multple row with in single cell of extjs. there is some requirement i have to put 3-4 combox box in single extjs grid. i m using renderder funtion of extjs . i can add/remove extjs row but how can i add new row into single cell of extjs . please help me.

/:)/:)/:)

Ext.onReady(function(){
Ext.QuickTips.init();

// sample static data for the store
var myData = [
['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'],
['Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '9/1 12:00am']
];





// create the data store
var store = new Ext.data.ArrayStore({
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]
});

// manually load local data
store.loadData(myData);

// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{
id :'company',
header : 'Company',
width : 160,
sortable : true,
renderer :function (data, metadata, record, rowIndex, columnIndex, store) {return '<div class="controlBtn"><img src="../shared/icons/fam/add.gif" width="16" height="16" class="control_add"><img src="../shared/icons/fam/delete.gif" width="16" height="16" class="control_delete"></div>';},
dataIndex: 'company'
},
{
header : 'Price',
width : 75,
sortable : true,
renderer : 'usMoney',
dataIndex: 'price'
},
{
header : 'Change',
width : 75,
sortable : true,
renderer : change,
dataIndex: 'change'
},
{
header : '% Change',
width : 75,
sortable : true,
renderer : pctChange,
dataIndex: 'pctChange'
},
{
header : 'Last Updated',
width : 85,
sortable : true,
renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'
}
],
viewConfig:{
scrollOffset:1
},
stripeRows: true,
autoExpandColumn: 'company',
autoHeight:true,
width: 600,
title: 'Array Grid',
// config options for stateful behavior
stateful: true,
stateId: 'grid'
});


var table = new Ext.Panel({
title: 'Table Layout',
autoHeight:true,
autoWidth: true,
layout: {
type: 'table',
// The total column count must be specified here
columns: 4,
tableAttrs: {
style: {
width: '100%',
valign:'top'
}}

},
defaults: {
// applied to each contained panel
bodyStyle:'padding:10px'
},
viewConfig : {
forceFit : true
},
items: [{
html: '<p>Cell A content</p>',
rowspan: 2
},{
html: '<p>Cell B content</p>',
rowspan: 2
},{
html: '<p>Cell C content</p>',
colspan: 2
},{
html: '<p>Cell D content</p>',
colspan: 2
}]
});

grid.on('click', function(e) {
var btn = e.getTarget('.controlBtn');
if (btn) {
var t = e.getTarget();
var v = this.getView();
var rowIdx = v.findRowIndex(t);
var record = this.getStore().getAt(rowIdx);
var control = t.className.split('_')[1];



//console.log(this.getStore().getAt(rowIdx));

switch (control) {
case 'add':
//console.log('edit this record - ' + record.id);
store=this.getStore();
data = grid.getSelectionModel().getSelected().data;
data.id = -1;
record = new store.recordType(data);
record.id = Ext.data.Record.id(record); // here is the different
store.insert(rowIdx+1,[record]);
grid.getSelectionModel().selectRecords([record], false);
break;
case 'delete':
//console.log('go to this record - ' + record.id);
store=this.getStore();
data = grid.getSelectionModel().getSelected().data;
record = new store.recordType(data);
store.removeAt(rowIdx);
grid.getSelectionModel().selectRecords([record], false);

break;
}
}
}, grid);

// render the grid to the specified div in the page
grid.render('grid-example');
table.render('table-example');
});

brahmareddy
29 May 2012, 4:31 AM
Hi Friend,

Me also having the same requirement in extjs 4.0.7,

if u know the solution , please help me out

Thanks in advance

Brahma