Code:
var dayGrid = function(gridID, title, data){
var xg = Ext.grid;
// shared reader
var reader = new Ext.data.ArrayReader({}, [
{name: 'id'},
{name: 'day'},
{name: 'quantitytheo', type: 'float'},
{name: 'quantitysettled', type: 'float'}
]);
////////////////////////////////////////////////////////////////////////////////////////
// DAY GRID
////////////////////////////////////////////////////////////////////////////////////////
// row expander
// Issue template
// row expander
var expander = new Ext.grid.RowExpander({
remoteDataMethod : borrowlendGrid
});
var masterGrid = new xg.GridPanel({
ds: new Ext.data.Store({
reader: reader,
data: xg.dummyData
}),
cm: new xg.ColumnModel([
expander,
{header: "Day", width: 200, sortable: true, dataIndex: 'day'},
{header: "Theoretical Quantity", width: 200, sortable: true, dataIndex: 'quantitytheo'},
{header: "Settled Quantity", width: 200, sortable: true, dataIndex: 'quantitysettled'}
]),
viewConfig: {
forceFit:true
},
autoHeight: true,
hideHeaders: true,
width: 800,
height: 800,
plugins: expander,
collapsible: true,
animCollapse: false,
disableSelection : true,
trackMouseOver : false,
enableHdMenu : false,
renderTo: document.getElementById('testGrid')
});
}
////////////////////////////////////////////////////////////////////////////////////////
// BORROW LEND GRID
////////////////////////////////////////////////////////////////////////////////////////
var borrowlendGrid = function(record, index) {
var xg = Ext.grid;
var blreader = new Ext.data.ArrayReader({}, [
{name: 'id'},
{name: 'type'},
{name: 'theoQty'},
{name: 'theoQtyValue', type: 'float'},
{name: 'settledQty'},
{name: 'settledQtyValue', type: 'float'}
]);
var blstore = new Ext.data.Store({
reader: blreader,
data: xg.dummyData2
});
var iexpander = new Ext.grid.RowExpander({
remoteDataMethod : detailedMovementGrid,
tpl: new Ext.Template(
'<div id="subRemData"></div>')
});
var blgrid = new xg.GridPanel({
ds: blstore,
cm: new xg.ColumnModel([
iexpander,
{header: "Type", width: 200, sortable: true, dataIndex: 'type'},
{header: "Theoretical", width: 80, sortable: true, dataIndex: 'theoQty'},
{header: "Theoretical Quantity", width: 80, sortable: true, dataIndex: 'theoQtyValue'},
{header: "Settled", width: 80, sortable: true, dataIndex: 'settledQty'},
{header: "Settled Quantity", width: 80, sortable: true, dataIndex: 'settledQtyValue'}
]),
viewConfig: {
forceFit:true
},
disableSelection : false,
hideHeaders: true,
autoHeight: true,
plugins: iexpander,
collapsible: false,
disableSelection : true,
enableHdMenu : false,
trackMouseOver : false,
autoSizeColumns: true
});
blgrid.render(Ext.get('remData'+record.data.id));
};
////////////////////////////////////////////////////////////////////////////////////////
// DETAILLED MOVEMENTS GRID
////////////////////////////////////////////////////////////////////////////////////////
var detailedMovementGrid = function(record, index) {
var id = record.get("code");
var xg = Ext.grid;
var detailedreader = new Ext.data.ArrayReader({}, [
{name: 'id'},
{name:'code'},
{name: 'name'},
{name: 'tradeRef'},
{name: 'S'},
{name: 'T'},
{name: 'qty'},
{name: 'start'},
{name: 'end'},
{name: 'loanCcy'},
{name: 'loanValue'},
{name: 'rate'},
{name: 'divReq'}
]);
var detailedstore = new Ext.data.Store({
reader: detailedreader,
data: xg.dummyData3
});
var detailedgrid = new xg.GridPanel({
ds: detailedstore,
cm: new xg.ColumnModel([
{header: 'Client Code', width: 50, sortable: true, dataIndex: 'code'},
{header: 'Client Name', width: 120, sortable: true, dataIndex: 'name'},
{header: 'Trade Ref', width: 50, sortable: true, dataIndex: 'tradeRef'},
{header: 'S', width: 20, sortable: true, dataIndex: 'S'},
{header: 'T', width: 20, sortable: true, dataIndex: 'T'},
{header: 'Quantity', width: 60, sortable: true, dataIndex: 'qty'},
{header: 'Start Date', width: 60, sortable: true, dataIndex: 'start'},
{header: 'End Date', width: 60, sortable: true, dataIndex: 'end'},
{header: 'Loan Ccy', width: 60, sortable: true, dataIndex: 'loanCcy'},
{header: 'Loan Value', width: 60, sortable: true, dataIndex: 'loanValue'},
{header: 'rate', width: 60, sortable: true, dataIndex: 'rate'},
{header: 'Div Req', width: 60, sortable: true, dataIndex: 'divReq'},
]),
viewConfig: {
forceFit:true
},
autoHeight: true,
collapsible: false,
disableSelection : true,
trackMouseOver : false,
autoSizeColumns: true
});
detailedgrid.render(Ext.get('remData'+record.data.id));
};
/*** functions ***/
function issueLoad() {
Ext.QuickTips.init();
Ext.BLANK_IMAGE_URL = '/static/images/transparentpixel.gif';
new dayGrid("mastergrid", "Host Issues", Ext.grid.dummydata);
}
Ext.onReady(issueLoad);