PDA

View Full Version : How to 'expandBody' only one item in a grid



Fent2
23 Mar 2014, 10:38 PM
I want the grid 'expandBody' only one item in a time ,so once another item expandbody,
the other item that had 'expandbody' must 'collapsebody'. I try to use fire event 'collapsebody'
to collapsebody,but the icon before the item still show '-',
Somebody please tell me how to collapsebody a item ? ths!





Ext.define('Company', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id' },
{ name: 'company' },
{ name: 'price', type: 'float' },
{ name: 'change', type: 'float' },
{ name: 'pctChange', type: 'float' },
{ name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia' },
{ name: 'industry' },
{ name: 'desc' }
]
});
var dummyDataForMainGrid = [
['1', '3m Co', 71.72, 0.02, 0.03, '9/1 12:00am', 'Manufacturing'],
['2', 'Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am', 'Manufacturing'],
['3', 'Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am', 'Manufacturing'],
['4', 'American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am', 'Finance'],
['11', '3m Co', 71.72, 0.02, 0.03, '9/1 12:00am', 'Manufacturing'],
['12', 'Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am', 'Manufacturing'],
['13', 'Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am', 'Manufacturing'],
['14', '3m Co', 71.72, 0.02, 0.03, '9/1 12:00am', 'Manufacturing'],
['15', 'Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am', 'Manufacturing'],
['16', 'Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am', 'Manufacturing'],
['17', '3m Co', 71.72, 0.02, 0.03, '9/1 12:00am', 'Manufacturing'],
['18', 'Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am', 'Manufacturing'],
['19', 'Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am', 'Manufacturing'],
['20', '3m Co', 71.72, 0.02, 0.03, '9/1 12:00am', 'Manufacturing'],
['21', 'Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am', 'Manufacturing'],
['22', 'Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am', 'Manufacturing'],
['23', '3m Co', 71.72, 0.02, 0.03, '9/1 12:00am', 'Manufacturing'],
['24', 'Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am', 'Manufacturing'],
['25', '3m Co', 71.72, 0.02, 0.03, '9/1 12:00am', 'Manufacturing'],
['26', 'Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am', 'Manufacturing'],
['27', 'Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am', 'Manufacturing'],
];
var mainStore = Ext.create('Ext.data.ArrayStore', {
model: 'Company',
data: dummyDataForMainGrid
});


function displayInnerGrid(rowNode,record) {

// delete the other item that had 'expandbody'
var search_view = Ext.ComponentQuery.query('MainGrid');
var aa = search_view[0].overCls;
search_view[0].overCls = '';


store = search_view[0].store;


store.each(function(record)
{
search_view[0].view.fireEvent('collapsebody',null,record);
}
);


//Model for the inside grid store
Ext.define('TestModel', {
extend: 'Ext.data.Model',
fields: [
{ name: 'Field1' },
{ name: 'Field2' },
{ name: 'Field3' }
]
});
//dummy data for the inside grid
var dummyDataForInsideGrid = [
['dummyRow1', 1, 2],
['dummyRow2', 1, 2],
['dummyRow3', 1, 3]
];
var insideGridStore = Ext.create('Ext.data.ArrayStore', {
model: 'TestModel',
data: dummyDataForInsideGrid
});

renderId = record.get('id');
innerGrid = Ext.create('Ext.grid.Panel', {
store: insideGridStore,
selModel: {
// selType: 'cellmodel'
},
columns: [
{ text: "Column1", dataIndex: 'Field1' },
{ text: "Column2", dataIndex: 'Field2' },
{ text: "Column3", dataIndex: 'Field3' }
],
viewConfig: {
// stripeRows: true
getRowClass :function(record, rowIndex, rowParams, store)
{
return rowIndex % 2 == 0 ? 'child-row ': 'adult-row';
}
},
columnLines: true,
autoWidth: true,
autoHeight: true,
//width: 400,
//height: 200,
frame: false,
iconCls: 'icon-grid',
renderTo: renderId
});
innerGrid.getEl().swallowEvent([
'mousedown', 'mouseup', 'click',
'contextmenu', 'mouseover', 'mouseout',
'dblclick', 'mousemove'
]);
}

function destroyInnerGrid(record) {
var parent = document.getElementById(record.get('id'));
var child = parent.firstChild;
while (child)
{
child.parentNode.removeChild(child);
child = child.nextSibling;
}
}

Ext.define('MainGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.MainGrid',
store: mainStore,
columns: [
{ text: "Company", flex: 1, dataIndex: 'company' },
{ text: "Price", renderer: Ext.util.Format.usMoney, dataIndex: 'price' },
{ text: "Change", dataIndex: 'change' },
{ text: "% Change", dataIndex: 'pctChange' },
{ text: "Last Updated", renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange' }
],
autoWidth: true,
selModel: {
selType: 'cellmodel'
},
autoHeight: true,

plugins: [{
ptype: 'rowexpander',
rowBodyTpl: [
'<div id="{id}">',
'</div>'
]
}],

viewConfig : {
stripeRows: false,
getRowClass :function(record, rowIndex, rowParams, store)
{
return rowIndex % 2 == 0 ? 'child-row ': 'adult-row';
}
},

collapsible: true,
animCollapse: false,
title: 'Expander Rows in a Collapsable Grid',
iconCls: 'icon-grid',
renderTo: Ext.getBody(),

collapseMode:'mini',
initComponent: function () {
var me = this;
this.callParent(arguments);
}
});

Ext.onReady(function () {

Ext.QuickTips.init();

// Ext.BLANK_IMAGE_URL = '/images/s.gif';
var mainGrid = new Ext.create('MainGrid');
mainGrid.view.on('expandBody', function (rowNode, record, expandRow, eOpts) {
displayInnerGrid(rowNode,record);
});
mainGrid.view.on('collapsebody', function (rowNode, record, expandRow, eOpts) {
destroyInnerGrid(record);
});
mainGrid.render(Ext.getBody());
mainGrid.setHeight(window.innerHeight);
mainGrid.setWidth(window.innerWidth);
Ext.EventManager.onWindowResize(function () {
//console.log('-------');
mainGrid.setHeight(window.innerHeight);
mainGrid.setWidth(window.innerWidth);
});


});

Farish
24 Mar 2014, 12:53 AM
on expandbody event, you can use the following code:


var expander = grid.plugins[0]; // get the rowexpander plugin of the grid.
for(var i = 0; i < store.getCount(); i++) // iterate over all records in store
{
var tempRecord = store.getAt(i);
if(expander.recordsExpanded[tempRecord.internalId] && tempRecord.internalId != record.get('id')) // Toggle (collapse) all rows except the current row (the record which you want to expand)
expander.toggleRow(i);
}