PDA

View Full Version : getSelectionModel() is not a function



amist
28 Jan 2013, 1:03 AM
Hi,

I am using gride panel, i need to select cell value in row selected . But it throws errors getSelectionModel() is not afunction .
i made the listener afterrender event


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.

Thanks,
amist

mohaskuar
28 Jan 2013, 1:12 AM
you can use......
var array =grid .getSelectionModel().getSelection();
and you can fined your selected record as array[0].get['colname'];

amist
28 Jan 2013, 1:57 AM
Thank you very much for your replay put still the same error

listeners: {
'afterrender': function(panel) {
panel.body.on('click', function(grid,rowIndex,cellIndex,columnIndex,e) {
alert('onclick');

/**************************************************************/
var pos = grid.getSelectionModel().getSelection();
//record = grid.store.getAt(pos.row);
//colname = grid.getHeaderCt().getHeaderAtIndex(columnIndex).dataIndex;
// cellvalue = record.data[colname];
alert(pos);
/*******************************************************************/

});
}
},


TypeError: grid.getSelectionModel is not a function

mohaskuar
28 Jan 2013, 3:06 AM
i think you code looks fine but
<code> var pos =grid.getSelectionModel().getSelection();</code>
gets typeError because the "grid" is not a gris its just an event wich is a click event....so u should do

var pos=panel.getSelectionModel().getSelection();
console.log(pos);////this will display the selected row as total as an object and you can do what ever u like with it....


listeners: {
'afterrender': function(grid) {
grid.body.on('click', function(event,innner) {
alert('onclick');
console.log(grid);


/**************************************************************/
var pos = grid.getSelectionModel().getSelection();
console.log(pos);
// record = grid.store.getAt(pos.row);
// colname = panel.getHeaderCt().getHeaderAtIndex(columnIndex).dataIndex;
// alert(cellvalue);
/*******************************************************************/

});
}

amist
29 Jan 2013, 3:58 AM
Thank you mohaskuar very much, it works fine now

mohaskuar
29 Jan 2013, 11:21 PM
dont forget to mark it as ANSWERED