PDA

View Full Version : How to add a extra attribute to a column?



ragecf
14 Jul 2013, 8:17 AM
Hi, all

I have a grid with some data. I want to get the some detail info when user clicks the data.

Now I want to add a attribute to each column in order to identify which method will be called.




Ext.onReady(function () {
Ext.define('MyModel', {
extend: 'Ext.data.Model',
fields: [ 'user', 'owner']
});

var myStore = Ext.create('Ext.data.Store', {
model: 'MyModel',
data: [
{ user: 'Lisa', owner: 'Mike' },
{ user: 'Bart', owner: 'Alex' }
]
});

Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
store: myStore,
width: 400,
height: 200,
title: 'My Grid',
columns: [{
text: 'USER',
width: 200,
dataIndex: 'user',
renderer: function(val){
return '<a href="#">' + val + '</a>'
}
}, {
text: 'OWNER',
width: 200,
dataIndex: 'owner',
renderer: function(val){
return '<a href="#">' + val + '</a>'
}
}],

listeners: {
cellclick: function(view, td, colIndex, record, tr, rowIndex, e, eOpts) {
var fieldName = record.fields.items[colIndex].name;

alert(fieldName + '\n' + record.get(fieldName));

Ext.Ajax.request({
url: 'backend.php',
params: {

action: 'getUserDetail', // use getUserDetail when user clicks USER column data, or use getOwnerDetail when user clicks OWNER colum data.
name: record.get(fieldName)
},
success: function(response){
var text = response.responseText;
alert(text);
}
});
}
}
});
});



I know this can be solved by hard code in cellclick function just like below:



listeners: {
cellclick: function(view, td, colIndex, record, tr, rowIndex, e, eOpts) {
var fieldName = record.fields.items[colIndex].name;

switch (fieldName) {
case 'user':
actionName = 'getUserDetail';
break;
case 'owner':
actionName = 'getOwnerDetail';
break;
};


Ext.Ajax.request({
url: 'backend.php',
params: {
action: actionName,
name: record.get(fieldName)
},
success: function(response){
var text = response.responseText;
alert(text);
}
});
}
}


But I don't want to hard code like this. Is there any way to add a actionName property to column or data model or somewhere?

Thanks.

ragecf
14 Jul 2013, 10:33 PM
I find a solution:

1. add myMethod to columns




columns: [{
text: 'USER',
width: 200,
dataIndex: 'user',
myMethod: 'getUserDetail',

renderer: function(val){
return '<a href="#">' + val + '</a>'
}
}, {
text: 'OWNER',
width: 200,
dataIndex: 'owner',
myMethod: 'getOwnerDetail',

renderer: function(val){
return '<a href="#">' + val + '</a>'
}
}],




2. Get the myMethod data from columns.initialConfig



listeners: {
cellclick: function(view, td, colIndex, record, tr, rowIndex, e, eOpts) {
var fieldName = record.fields.items[colIndex].name;
var actionName = view.ownerCt.columns[colIndex].initialConfig.myMethod;

Ext.Ajax.request({
url: 'backend.php',
params: {
action: actionName,
name: record.get(fieldName)
},
success: function(response){
var text = response.responseText;
alert(text);
}
});
}
}



If there is any better solution, please let me know. Thanks.