I want a javascript function to be called as I click on a cell in grid .I want code for the same using extjs 3.4. How can I achieve it? can anyone help me out in it?
Set the selection model to CellSelectionModel and call your function on cell select:
var grid = new Ext.grid.GridPanel({
// ..
sm: new Ext.grid.CellSelectionModel({
listeners: {
cellselect: function(sm, row, col) {
Ext.Msg.alert('click','got a click!');
}
}
})
})
Related
Hi I have added one context menu on my grid which will perform the enable and disable functionality for selected row. I am new to ExtJs. I have added below listener for the grid. How to add enable and disable functionality for the grid row?
listeners: {
itemcontextmenu: function (grid, record, item, index, e) {
var contextMenu = Ext.create('Ext.menu.Menu', {
controller: 'grid-controller',
width: 165,
plain: true,
items: [{
text: 'Disable',
listeners: {
click: {fn: 'disable', extra: record}
},
}]
});
e.stopEvent();
contextMenu.showAt(e.getXY());
}
}
This is not a copy-paste answer, but going through the following steps with doing your own research you can solve your problem.
1. Create the context menu only once and destroy it
In you code, the context menu is created every time when the user opens up the menu on the grid. This is not good. Instead, create the context menu only once when the grid is created, and destroy it when the grid is destroyed. Something like this:
Ext.define('MyGrid', {
extend: 'Ext.grid.Panel',
initComponent : function() {
this.callParent();
this.MyMenu = Ext.create('Ext.menu.Menu', {
items: [...]
});
this.on({
scope : this,
itemcontextmenu : this.onItemContextMenu
});
},
onDestroy : function() {
if (this.MyMenu) {
this.MyMenu.destroy();
}
},
onItemContextMenu : function(view, rec, item,index, event) {
event.stopEvent();
this.MyMenu.showAt(event.getXY());
}
});
2. Store enabled / disabled state in the record
For the next step to work, records in your grid must contain whether the corresponding row is enabled or disabled. In the context menu, when user selects enabled / disabled, store this status like this, get record of the row where the context menu was displayed from:
record.set('myDisabledState', true); // or false
It is important to store the disabled state (and not enabled), because when your grid initially is rendered, these values won't be in the records, so record.get('myDisabledState') will evaluate to FALSE, and that is the desired behaviour, if you want to start with every row being able to be selected.
3. Disable selection
Now you can add a beforeselect listener to your grid, see documentation. This listeners receives record as parameter, and if you return false from this listener, the selection will be canceled. So in this listener simply add:
listeners: {
beforeselect: function ( grid, record, index, eOpts ) {
return !record.get('myDisabledState');
}
}
4. Apply formatting - OPTIONAL
It is likely that you want to add different formatting for disabled rows, for example grey colour. The easiest way to do it is to add a custom CSS style to your Application.scss file:
.my-disabled-row .x-grid-cell-inner {
color: gray;
}
Finally add getRowClass configuration to your grid, it will receive the current record being rendered, and you can return the above custom CSS style when the row is disabled:
Ext.define('MyGrid', {
// your grid definition
,
viewConfig: {
getRowClass: function (record, rowIndex, rowParams, store) {
if (record.get('myDisabledState')) {
return "my-disabled-row";
}
}
}
});
In this last part, when row is not disabled, it will return nothing, so default formatting will be used.
When we have multiple parent-child grid and want to re config the grid after load call like this:
listeners: {
'afterrender': function (grid) {
var state =grid.getState();
state.columns[1].hidden= true;
grid.applyState(state);
}
}
This behaviour is even still reproducable on ExtJS 6.5.1.
For Example
https://www.sencha.com/forum/showthread.php?306941-Apply-state-after-grid-reconfigure
Here's an override I've been using to fix the hidden columns issue. I am using 6.6 so not sure if this will work in 4.4, though. Also, you may not need to suspend/resume layouts but not sure on that either.
Ext.define('MyApp.overrides.Grid', {
override: 'Ext.grid.Panel',
applyState: function () {
this.callParent(arguments);
Ext.suspendLayouts();
Ext.each(this.getColumns(), function (column) {
if (column.hidden) {
column.show();
column.hide();
}
});
Ext.resumeLayouts(true);
}
});
Well it's still an issue with applyState. When grid is having multiple hidden columns and we use applyState function it crash our grid. So we have skip the hidden property part although it's working smooth for width change , filters etc.
listeners: {
'afterrender': function (grid) {
var state =grid.getState();
state.columns[1].hidden= false;
grid.applyState(state);
grid.columns[3].hidden = true;
}
}
if you manually set hidden property of column it'll hide it.
I am new to Extjs,I am working on Extjs3.2 grid RowEditor. I want Once we click on Add Employee Button editor windows pops up and when we click on cancel editor gots close but row get added to the grid .I want if we click on cancel it get back to initial state without new row
http://dev.sencha.com/deploy/ext-4.0.0/examples/grid/row-editing.html
How to Stop This??
Thanks
Add a 'canceledit' listener for RowEditing plugin and write logic acceptable for you.
For example I have written:
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
autoCancel: false,
listeners: {
canceledit: function(editor, context) {
if(context.rowIdx == 0 && context.value == "New Guy") {
store.remove(context.record);
}
}
}
});
Working Demo: http://jsfiddle.net/3Ht5u/2/
I am working on a EXTJS application, where I am displaying data in an EXTJS grid.
There is an edit button against each row. Please check the image.
I want on clicking the edit link, a pop window will open with all the editable fields and I can edit the row from there.
Please help me achieving this.
Here is my code.
{
xtype:'actioncolumn',
width:50,
items: [{
icon: 'assets/images/edit.png', // Use a URL in the icon config
tooltip: 'Edit',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("Edit " + rec.get('ID'));
}
}
}
Thanks
I'm not gonna do the coding for you, but here's what you'll need:
A window with a form panel.
The loadRecord method on the form panel's underlying basic form to the load record into the form
The getValues method on the basic form to retrieve the modified values
The set method on the record to write back the values from the form to the record
after click the button( you get the id of the row/record), you can open a window which contain a form grid, then load the data into the form.
Is there a standard way to highlight active row in a grid like in attached screen?
I mean having a grid, with cellmodel selection type, when clicking on an item in the grid, it highlights the cell. I would like to highlight the active row at the same time.
It is very useful when gird contain a lots of data to be analysed,
when selecting cell, and entire row (maybe collumn?) needs to be highlighted.
Thanks for your help guys. We did it :) Here is the one possible solution :
selModel: Ext.create('Ext.selection.CellModel', {
listeners: {
select: function (cellModel, record, rowIndex) {
var myGrid = this.items.get('gridItemId');
myGrid.getView().addRowCls(rowIndex, 'row-style');
},
deselect: function (cellModel, record, rowIndex) {
var myGrid = this.items.get('gridItemId');
myGrid.getView().removeRowCls(rowIndex, 'row-style');
},
scope: this
}
}),
you can use addRowCls method of grid which Adds a CSS Class to a specific row.
http://docs.sencha.com/ext-js/4-0/#/api/Ext.grid.View-method-addRowCls
Even if you are using the CellSelectionModel, you could easily apply styles/classes to the row the selected cell is in. If you take a look at the events for CellSelectionModel, you'll see the cellselect actually returns the rowIndex.
cellselect : ( SelectionModel this, Number rowIndex, Number colIndex )
So, what you could so is something like the following:
// we'll say you have your Grid stored in a variable, grid
CellSelectionModel ...({
listeners: {
'cellselect': function(selModel, rowIndex) {
var cellRow = grid.getView().getRow(rowIndex);
Ext.fly(cellRow).addClass('selectedRow')
// do any other logic with the actual DOM element here
}
})