I added an actioncolumn to my grid, and i am trying to get a grid value when it is pushed.
this is my actioncolumn:
xtype: 'actioncolumn',
width: 30,
sortable: false,
menuDisabled: true,
items: [{
icon: 'images/refresh16x16.png',
scope: this,
handler: this.onBidHistoryGridlClick
}
This is my listener:
onBidHistoryGridlClick: function(record, grid, rowIndex){
alert(grid.getStore().getAt(rowIndex).column_name);
}
This doesnt work.
Any ideas?
You've got the record in the listener arguments, use it!
record.get('column_name')
You were probably close with your own tentative, but you forgot that what you get from the store is a record, not a raw data object. So this would rather have been:
grid.getStore().getAt(rowIndex).get('column_name')
Update
You've got your handler's arguments wrong (check the docs). This should be:
onBidHistoryGridlClick: function(view, rowIndex, colIndex, item, e, record){
alert(record.get('column_name'));
}
In addition to #rixo's answer, you may need to use the "data" attribute depending on the context (event handler callback function):
handler: function (grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex).data;
alert(rec.toSource()); // this only works in Mozilla Firefox
var rec_col_val = grid.getStore().getAt(rowIndex).data.col_name;
alert(rec_col_val);
Related
I have a gridpanel and one of my column like
columns: [
...
{ text: 'Name', dataIndex: 'name' , width: 200,
renderer: function (value) {
// how to get width of this column (200)
//alert(this.width); // this is width of gridpanel
}
}
...
],
how to get width of this column thanks.
Fairly certain this isn't the ideal way to do it, but it works. There are lots of other values passed to the renderer function besides just the value. Via dom inspection, this will get you the column width, but I don't think it's something I would trust to work as they update ExtJS:
renderer: function (value, metaData, record, rowIndex, colIndex, store, view) {
return view.ownerCt.columns[colIndex].getWidth();
}
Alternatively, you could use component query to get the grid panel view, use the row index to find the column, and then get it's width the same way:
renderer: function (value, metaData, record, rowIndex, colIndex, store, view) {
var grid = Ext.ComponentQuery.query('#gridId')[0];
return grid.columns[colIndex].getWidth();
}
I really don't know what is the better option in this case, and don't really know why they pass the gridview rather than the gridpanel as the view in the renderer function. In any case, this should get you started, good luck.
I'm currently experiencing an issue with the RowEditing plugin, and was not able to find anything relevant in order to help me with it.
I gave a grid using the RowEditing plugin, and was asked to add a row containing a "reset" button. The best choice seemed to be using an actionColumn.
When the row is not in edition mode, there is no problem, the actionColumn handles clicks correctly, and I can do my processing.
But, if the row is in edition mode, then the actionColumn seems to not react at all.
I've tried to use the editor option, but nothing is happening with that. I've tough of using some listeners too, but I can't find any relevant event for this issue.
Any Ideas?
Finally, I've choosen an other way :
{
xtype: 'actioncolumn',
action : 'tarifRowAction',
handler: function (grid, rowIndex, colIndex)
{
console.log("got click handler § ");
me.fireEvent("clickedMAJButton", grid, rowIndex, colIndex);
},
editor:
{
xtype: 'button',
handler: function (grid, rowIndex, colIndex)
{
console.log("got click handler § ");
me.fireEvent("clickedMAJButton", grid, rowIndex, colIndex);
},
},
items: [
{
icon: 'images/image16/modifier.png',
action : 'tarifRowAction',
scope: me
}
]
}
You could achieve your functionality using this approach instead of row editing plugin :
{
xtype: 'actioncolumn',
width: 50,
items: [{
icon: 'edit.png', // Use a URL in the icon config
tooltip: 'Update',
handler: function (grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("Edit " + rec.get('name'));
rec.set("name", "LISA124"); //Here you may have your logic of updating the data with new data
}
},
{
icon: 'reset.png',
tooltip: 'Reset',
handler: function (grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("Reset " + rec.get('name'));
rec.set("name", rec.raw.name);
}
}
]
}
Have a look at this fiddle
You can use the approach suggested by #Jeff if you wanna stick with your requirements.
{
icon: 'images/delete.png',
tooltip: 'Edit',
handler: function(grid, rowIndex, colIndex) {
var edit = Ext.create('AM.view.user.Uploadfile').show();
//here I want to pass parameters to get in window panel
}
}
The code that I have written and want the parameter to be passed like the row id where the icon is clicked on window panel.
If you look at the API you will see that the handler has the arguments
view : The owning TableView.
rowIndex : The row index clicked on.
colIndex : The column index clicked on.
item : The clicked item (or this Column if multiple items were not configured).
e : The click event.
record : The Record underlying the clicked row
Where the last one is interesting for you. So you can do it like so
handler: function(grid, rowIndex, colIndex, item, e , record) {
var win = Ext.create('Ext.window.Window', {
autoShow: true,
html: record.data.firstname + ' ' + record.data.lastname
});
}
And here is a working JSFiddle
It is a button on a actioncolumn. To pass the Id to a window you can retrieve the row data by getting it from the record parameter.
columns: [
{ text: 'Id', dataIndex: 'Id', width: 50 },
{
xtype: 'actioncolumn',
width: 100,
text: 'Delete',
align: 'center',
items: [{
icon: '../images/delete.png',
tooltip: 'Delete',
handler: function (grid, rowIndex, colIndex, item, e, record) {
myWin.id = record.data.Id; //where myWin is a reference to the window object and id is just a config.
}
}]
}
]
How can I remove the icon in this actioncolumn item within its handler?
{
header: 'Activate',
xtype: 'actioncolumn',
align: 'center',
width: 30,
sortable: false,
items: [{
icon: './Scripts/extjs/examples/shared/icons/fam/accept.png',
tooltip: '',
handler: function (grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
if (rec.get('status') == '1') { // if active, don't show icon
this.up('actioncolumn').icon = '';
}
}
...
In general, it can't - configs are applied at initialization time, and sadly the ExtJS API doesn't always provide ways to change things as easily as they are specified in configs.
In the case of an ActionColumn, you can see in the source that the icon is used to generate a renderer function in the constructor and there's no way to set it afterwards.
To dynamically decide whether to show an icon or not, you'll need to use iconCls instead, see here.
I have a simple grid with one of the columns being a 'download' link placed like this:
{
header: 'Config files',
width: 130,
sortable: false,
fixed: true,
renderer: function() {
return 'Download';
}
}
This is in the view. Now moving on to the controller I placed a listener on the grid to catch whenever the link is clicked:
init : function() {
this.control({
'accountFiles a[class=downloadCfg]': {
click: function () {
alert('test');
}
}
});
}
Very basic but it doesnt work. Can it be because the link is created via the 'renderer' function of the grid? Any ideas?
#Romeo
This is how you can grab whether the Download link is clicked or not:
'accountFiles': {
itemclick: function( thisView, record, item, index, e, eOpts ) {
var t = e.getTarget('.downloadCfg');
if (!Ext.isEmpty(t))
alert('Download clicked!!');
else
alert('Other item clicked!!');
}
}
Once you have identified that the Download link is clicked, you have the record containing the complete record representing the row.
I don't know how to fix this issue, but I know another solution.
Create method in GridPanel:
doDownload: function(recordId) {
var record = this.getStore().data.get(recordId);
// do something
}
Then create change renderer to:
renderer: function(value, meta, record, rowIndex, colIndex, store) {
return 'Download';
}
Action in onclick handler tries to find grid using dom classes.
accountFiles a[class=downloadCfg]
will select all descendant of accountFiles tag which have a tag. And filter them by class attribute.
It seems to me that you confused it with ComponentQuery syntax where you select by component id not by tag.