Code:
Ext.define('Market_Watch', {
extend: 'Ext.data.Model',
fields: ['Cmp_Name', 'Last_Price', 'Last_Price_Qty',
'Change', 'ChangP', 'Low',{name:'High',type:'float'}, 'AskV', 'Low_Ask_Qty', 'Low_Ask_Price', 'High_Bid_Price','High_Bid_Qty'
,'BidV','Volume','Value','Open_Price', 'Close'],
proxy: {
type: 'ajax',
url : 'data/Streamer.ashx',
method: 'GET',
reader: {
type: 'json'
}
}
});
var market_store;
Ext.require('Ext.data.Store');
Ext.onReady(function() {
Ext.create('Ext.container.Viewport',{
title:'Border Example',
layout:'border',
defaults:{
frame:true,
split:true
},
items:[
{
title : 'North Panel', // 2
region : 'north',
height : 100,
minHeight : 100,
maxHeight : 150,
collapsible : true
},
{
title:'South Panel',
region:'south',
split:false,
height:75,
margins:
{
top:5
}
},
{
title:'East Panel',
region:'east',
collapsible:true,
width:100,
minWidth:100,
maxWidth:150,
},
{
title : 'West Panel', // 5
region : 'west',
collapsible : true,
/*collapseMode : 'mini',*/
width:100,
minWidth:100,
maxWidth:150
},
// {
// title:'Center Panel',
// region:'center'
// },
{
xtype : 'container',
region : 'center',
layout : 'fit',
id : 'centerRegion',
autoEl : {},
items : {
title : 'Center Region',
id : 'centerPanel',
html : 'I am disposable',
frame : true
}
}
]
});
var showIndividualGraph = function(grid,rowIndex,e){alert("CLICK");
Ext.MessageBox.alert('Clicked!','You Clicked row!');
}
market_store = Ext.create('Ext.data.Store', {
model: 'Market_Watch',
autoLoad: true
});
market_store.load();
var streamer;
streamer=Ext.create('Ext.grid.Panel', {
/*renderTo: Ext.getBody(),*/
store: market_store,
width: 900,
height: 200,
align: 'center',
title: 'Market Watch',
columns: [
{header: 'Name', width:250, dataIndex: 'Cmp_Name'},
{header: 'Last', width:50, dataIndex: 'Last_Price'},
{header: 'LastVol', width:50, dataIndex: 'Last_Price_Qty'},
{header: 'Change', width:50, dataIndex: 'Change'},
{header: 'Change %', width:70, dataIndex: 'ChangP'},
{header: 'Low', width:50, dataIndex: 'Low'},
{header: 'High', width:50, dataIndex: 'High',tdCls: 'x-high-cell', },
{header: 'AsksVol', width:50, dataIndex: 'AskV'},
{header: 'BestAskVol', width:50, dataIndex: 'Low_Ask_Qty'},
{header: 'AskPrice', width:50, dataIndex: 'Low_Ask_Price'},
{header: 'BidPrice', width:50, dataIndex: 'High_Bid_Price'},
{header: 'BestBidVol', width:50, dataIndex: 'High_Bid_Qty'},
{header: 'BidsVol', width:50, dataIndex: 'BidV'},
{header: 'Volume', width:50, dataIndex: 'Volume'},
{header: 'Value', width:50, dataIndex: 'Value'},
{header: 'Open', width:50, dataIndex: 'Open_Price'},
{header: 'Close', width:50, dataIndex: 'Close'}
],
stripeRows: true,
autoSizeColumns: true,
autoSizeGrid: true,
title:'Mist Market Watch',
collapsible: false,
animCollapse: false,
height: 445,
viewConfig: {
getRowClass: function(rec, index) {
if (rec.get('rendered') === undefined) {
Ext.Function.defer(function() {
this.removeRowCls(index, 'price-fall');
this.removeRowCls(index, 'price-rise');
rec.set('rendered', true); // mark row, in case there repaint occur
}, 2000, this);
if (rec.get('high') < 0) {
return 'price-fall';
} else {
return 'price-rise';
}
}
}
},
columnLines: true,
listeners: {
'afterrender': function(panel) {
panel.body.on('click', function(grid,rowIndex,cellIndex,columnIndex,e) {
alert('onclick');
/**************************************************************/
var pos = grid.getSelectionModel().getCurrentPosition();
record = grid.store.getAt(pos.row);
colname = grid.getHeaderCt().getHeaderAtIndex(columnIndex).dataIndex;
cellvalue = record.data[colname];
alert(cellvalue);
/*******************************************************************/
});
}
}
});
var centerPanel = Ext.getCmp('centerPanel');
var centerRegion = Ext.getCmp('centerRegion');
centerRegion.remove(centerPanel, true);
centerRegion.add(streamer);
});
In firebug the error is thrown my js. I have tried a lot but no luck.