View Full Version : Ajax request on a grid cell click

21 Feb 2012, 9:20 AM

I have just started working with Extjs4. I am trying to use MVC pattern of Extjs in my project. I have couple of views there. One of the views is a grid. The code looks like this ..

Ext.define('PSPortal.view.com.fimt.asts.paas.util.ProjectList' , {
extend: 'Ext.grid.Panel',
alias : 'widget.proectjlist',
store: 'com.fimt.asts.paas.projectListStore',
title : 'Web Hosting Platform List',
id : 'projlst',
selType: 'cellmodel',

A store and model is related to the grid. The store loads the data over Ajax call and Grid displays that. So, far it is fine with me but now I want some more feature in my code.

My requirement is like this :

[1] I want to data in one of the columns to be clickable.
[2] I want to click that and shoot an Ajax request to backend.
[3] I want the cell data to be passed as parameter to that Ajax call.

I read somewhere that there is something called 'selType: 'cellmodel' and I need to use that. But I could not get a sample code which will show me how to do that.

Could Someone please help me with this.

Thank You !!

21 Feb 2012, 11:34 AM
On the CellModel you can listen for the select event which will fire when you select a cell. You can then fire the Ajax call off with the value of the field associated with that column from the record.

21 Feb 2012, 6:04 PM
Thank you very much for the reply. I got the concept.

I tried couple of things to listen to that select event but nothing worked for me.
Is there any code sample which can show me how to start with this ?

Thank You !!

21 Feb 2012, 6:33 PM
Let try

init: function(){
'projectjlist': {
select: function(cellModel, record, rowIndex, columnIndex){
// your code here

21 Feb 2012, 7:01 PM

Thanks for the reply.

I have an initComponent in my grid view.. I tried the code there and then it looks like this...

initComponent: function()
this.columns =
{header: 'Platform Name',
dataIndex: 'platformName',
flex: 1
//renderer: renderIcon()
{header: 'VAH Name', dataIndex: 'vahName', flex: 1},
{header: 'FIMT Division', dataIndex: 'fimtDivision', flex: 1},
{header: 'Intake-Form Contact', dataIndex: 'intakeFormContact', flex: 1},
{header: 'Project Type', dataIndex: 'projectType', flex: 1}
'projectjlist': {
select: function(cellModel, record, rowIndex, columnIndex){

But I am getting javascript error, Object [object, object] has no method control..
I am sure I am doing some mistake.

21 Feb 2012, 7:06 PM
That because this.control is for a controller. You can do

this.on('select', function() {}, this);

In your initComponent

21 Feb 2012, 7:31 PM

(http://www.sencha.com/forum/member.php?22216-mitchellsimoens)T (http://www.sencha.com/forum/member.php?22216-mitchellsimoens)hanks for the reply and for being patience.

I can see that now it is working up to some extent. After every cell is clicked I can see that function gets called.

Now, I have two more problems -

{1} How to pass the cell value to that function
{2} How to start an ajax call and pass the cell value.

21 Feb 2012, 7:35 PM
You need to get the value from the field. So you have to get the dataIndex from the column and then the value from the record using that dataIndex. Then in your Ajax call you can use that value as a param:

params : {
foo : 'bar'

21 Feb 2012, 8:43 PM

(http://www.sencha.com/forum/member.php?22216-mitchellsimoens)T (http://www.sencha.com/forum/member.php?22216-mitchellsimoens)hank you very much. It is working now for me.