PDA

View Full Version : How do you make a Grid cell react to user events (clicking, selecting, etc.)



shivers222
8 Feb 2012, 1:01 PM
Hi,

I'm fairly new to Ext JS and I'm trying to get a function I defined to be called whenever the user clicks on any cell in a Grid. I've tried

grid.on('select', saveChanges);

and

grid.on('click', saveChanges);

but it didn't work. Here's my code:


Ext.onReady(function(){


Ext.tip.QuickTipManager.init();
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [ 'name', 'email', 'phone' ]
});




// create the Data Store
var userStore = Ext.create('Ext.data.Store', {
model: 'User',
autoLoad: true,
pageSize: 4,
proxy: {
type: 'ajax',
url : 'data/users.json',
reader: {
type: 'json',
root: 'users',
totalProperty: 'total'
}
}
});


var cellEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 1
});


// create the grid and specify what field you want
// to use for the editor at each header.
var grid = Ext.create('Ext.grid.Panel', {
store: userStore,
columns: [
{
text: 'Name',
width: 100,
sortable: false,
hideable: false,
dataIndex: 'name'
},
{
text: 'Email Address',
width: 150,
dataIndex: 'email',
editor: {
xtype: 'textfield',
allowBlank: false
}
},
{
text: 'Phone Number',
flex: 1,
dataIndex: 'phone'
}
],
renderTo: Ext.getBody(),
selType: 'rowmodel',
width: 600,
height: 300,
title: 'Application',
plugins: [cellEditing]
});

userStore.loadPage(1)

grid.on('click', saveChanges);
});


function saveChanges (oGrid_event) {
alert('test');
}

mitchellsimoens
8 Feb 2012, 1:12 PM
grid.mon(grid.body, {
scope : this,
delegate : 'some selector', // <-- a DOM select you want to listen to... eg div.my-cls
click : function() {}
});

shivers222
8 Feb 2012, 1:19 PM
Thanks for the fast reply!

I'm pretty new to this stuff. I understand everything you put there except for the "delegate" line and the DOM select. Can you please explain that more?

I just started using Ext JS and it looks awesome

Thanks

mitchellsimoens
8 Feb 2012, 1:25 PM
It's a CSS selector that you want the click listener to fire when clicked on.

shivers222
8 Feb 2012, 1:32 PM
Sorry, I'm not sure what you mean by CSS selector... Is that a CSS file? And if so, what do I put into it? Is that necessary even if I just want something simple to happen like an alert box to pop up? I was hoping for a simpler solution, hehe

Thanks for the help so far, I really appreciate it.

shivers222
8 Feb 2012, 1:33 PM
Could you possibly give an example?

Thanks

shivers222
8 Feb 2012, 1:38 PM
Here's what I have now and nothing seems to be happening when I click.


grid.mon(grid.body, {
scope : this,
delegate : 'active', // <-- a DOM select you want to listen to... eg div.my-cls
click : function() {alert('test');}
});
});