I assumed you can put a grid on an InfoPanel as well but I am not having much luck. I have created roughly the same structure as above, but for some reason the grid never renders. Any pointers?
HTML Code:
<div id="center-div" style="height:100%;width:100%">
<div id="pnlCenter" style="height:100%;width:100%;background-color:Aqua"></div>
</div>
Code:
var iconPath = 'images/icons/';
//set up Work Breakdown Accordion
var acc = new Ext.ux.Accordion('center-div', {
fitHeight: true,
fitToFrame: true,
fitContainer: true
})
//define a panel
var pnlCent = acc.add(new Ext.ux.InfoPanel('pnlCenter', {
icon:iconPath + 'folder.png'
, autoScroll: true
, maxHeight: 500
, fixedHeight: 460
}));
//set up dataStore for the grid
var dataStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url: 'PolicyTransactions.xml'}),
reader: new Ext.data.XmlReader({
record: 'WorkItem',
id: 'WITTSID'
},
['Type', 'Status', 'Priority', 'AssignedResource', 'TransactionCode']
)})
//set up the grid columns
var colModel = new Ext.grid.ColumnModel(
[
{header: "Status", width: 120, dataIndex: 'Status'},
{header: "Priority", width: 180, dataIndex: 'Priority'},
{header: "AssignedResource", width: 115, dataIndex: 'AssignedResource'},
{header: "TransactionCode", width: 100, dataIndex: 'TransactionCode'}
]);
//create the grid
var grid = new Ext.grid.Grid(pnlCent.body, {
ds: dataStore,
cm: colModel
});
dataStore.load();
grid.render();