I have a grid that looks something like this
----------------------
Id | Customer | Total
----------------------
100| Foo, Inc.| $19.95
----------------------
200| Bar, LLC.| $23.50
----------------------
Lets say there is a lot of data and its scrollable. When I scroll to the end, I need to display some text inside the grid body.
----------------------
Id | Customer | Total
----------------------
100| Foo, Inc.| $19.95
----------------------
200| Bar, LLC.| $23.50
----------------------
<my text goes here>
----------------------
It should not be a dockedItem. Docked Items are not part of the scrollable region of the grid. How do I achieve this in ExtJS 4?
Thanks in advance.
You can manipulate the Html property of the grid to give you inline elements and then just move them around in the dom to the correct place to append underneath your rows.
E.g.
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone'],
data: {
'items': [{
'name': 'Lisa',
"email": "[email protected]",
"phone": "555-111-1224"
}, {
'name': 'Bart',
"email": "[email protected]",
"phone": "555-222-1234"
}, {
'name': 'Homer',
"email": "[email protected]",
"phone": "555-222-1244"
}, {
'name': 'Marge',
"email": "[email protected]",
"phone": "555-222-1254"
}]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
rootProperty: 'items'
}
}
});
var myGrid = Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
// Now add the custom HTML
html: '<div class="myTest">This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test </div>',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}],
height: 200,
width: 400,
scroll: true,
renderTo: Ext.getBody()
});
// Select and cache the new content element
var myContent = Ext.get(Ext.dom.Query.selectNode('.myTest'), /*Optional root*/ myGrid.getEl());
// Now get the HTML and append into the rows container
var rowsContainer = myGrid.getEl().select('.x-grid-item-container').elements[0];
myContent.appendTo(rowsContainer);
}
});