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.
Related
Help me with my code. It returns [object Object]. how can I return it as button
{
xtype: 'gridcolumn',
width: 100,
header: 'Apply Action',
dataIndex: 'Test',
sortable: false,
renderer: function(value, metadata, record, rowIndex, colIndex, store) {
var hasAutoAction = record.data.autoActions;
if(hasAutoAction.length == 0){
return '';
}
return '<input type="button" onClick="buttonclick(event)" id="btn" value="Apply"/>'
var buttonclick = function (event) {
alert('Clicked')
}
}
Please have a look at widgetcolumn, which should do exactly what you want, but the ExtJS way:
xtype:'widgetcolumn',
widget:{
xtype:'button',
handler:function(btn) {
Ext.Msg.alert('Clicked','Clacked');
}
}
You can not return object in this way and therefore you getting this error. Anyway as per my understanding you wanted button in grid and and then display something on click of button. For that you don't need to write in renderer. In your previous code also you were trying to return button where button was object which is invalid.
You can change you code design and place button either in tbar or bbar.
Sample code :
bbar: [
{ xtype: 'button',
text: 'Button 1',
handler: function() {
alert('You clicked the button!');
}
}
],
I created a Fiddle for you. Try this and understand. It will work.
I am trying to create a grid using extjs 4.2.2. The grid contains several rows, if I click one row, then pops up another page which displays the detail info of that row.
The grid is in a panel, so the view code is:
Ext.define("Application.view.foo.Panel", {
extend: "Ext.panel.Panel",
cls: 'foo.panel'
...
items: [
{
itemId: "foo-bar",
xtype: "grid",
...
,selType: 'checkboxmodel'
,columns: [
xtype: 'templatecolumn'
and the code of listening row select event in controller is like:
"panel[cls~=foo.panel] #foo-bar": {
select: function(selectionModel, record, index) { .... }
Now, I am going to add check box for each row in order to mass edit, I added selType: 'checkboxmodel', but the problem is that I cannot click the check box: if I click the box, it goes the the detail page, not just being 'checked', cuz the code in controller listens that 'row click' event.
Is there any suggestions to implement it? Thanks in advance.
I would suggest to change your row click listener to view row details with action column.
{
xtype:'actioncolumn',
width:50,
items: [{
// Url is just for example (not working)
icon: 'extjs/examples/shared/icons/fam/showDetails.png', // Use a URL in the icon config
tooltip: 'Show details',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
// do your functionality here...
}
}
In every row will appear an icon, and then you will have possibility to multiselect rows and to look details of every row as well. Hope that helps.
Try to listen on cellclick event instead.
cellclick: function(view, td, cellIndex, record, tr, rowIndex, e, eOpts) {
if(cellIndex != your_checkbox_column) {
//do your info page stuff here
}
}
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);
{
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.