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/
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.
want to show popup (like.. Do you want to save changes?) while row change of grid and pop Up have buttons like YES and NO, if previous row is modified and user click on "YES" in popup at that time previous row will be selected till user will not save it and if user click on "NO" at that time remove previous row changes and select next row.
If you are using Ext.grid.plugin.CellEditing to edit rows.
You need to listen on beforeedit event and commit/reject the changes with combine with Ext.Msg.confirm to prompt.
Like:
plugins: [{
ptype: 'cellediting',
listeners: {
beforeedit: function (editor, context) {
Ext.Msg.confirm("Confirmation", "Confirm to save",
function (btn) {
if (btn === "yes") {
context.record.commit();
} else {
context.record.reject()
}
});
}
}
}]
I have a grid, when I open it the first time I can edit normal use the RowEditing plugin. When I close the window to edit and open again I can not edit.
Thanks.
you have to use for cancel event and if you want to update then use update on the place of "canceledit"
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
//autoCancel: false,
listeners:{
'canceledit': function(rowEditing, context) {
// Canceling editing of a locally added, unsaved record: remove it
if (context.record.phantom) {
context.store.remove(context.record);
}
}
}
});
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.
This is one of the requirements am working on.
I have a grid with the selmodel as 'Ext.selection.CheckboxModel'. And to edit the grid rows, I can either use RowEditing or CellEditing plugins. So, here i what happens:
I select multiple checkboxes/rows.
Then I singleclick/doubeclick on one of the selected rows to edit the data in it.
This deselects all the other rows except for the one I double clicked to edit.
I don't want the other rows to be deselected. I should be able to singleclick/doubeclick on one of the selected rows and still keep the rest selected.
When all are rows are selected.
After i double click on a single row, you can see the other rows getting de-selected.
Returning false from the beforedeselect event will prevent the deselection. So, for the 1-click case, it should be easy to prevent deselection when editing. As luck gives it, it appears that the beforedeselectevent is fired after the beforeedit event (in 4.2.0 at least, that may not be stable across versions).
With row editing:
plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 1
,pluginId: 'editing'
})
]
,listeners: {
beforedeselect: function(sm, record) {
var plugin = this.getPlugin('editing');
return !plugin.editing;
}
// The checkbox selection column should probably not be editable, but
// apparently it is not accounted for... So we must prevent edition on
// this column, or you won't be able to deselect using the checkbox.
,beforeedit: function(editor, context) {
return context.colIdx !== 0;
}
}
With cell editing:
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
,pluginId: 'editing'
})
]
,listeners: {
beforedeselect: function(sm, record) {
var plugin = this.getPlugin('editing');
// In 4.2.0 there is apparently a bug that makes
// plugin.editing always true
return !plugin.getActiveEditor();
}
,beforeedit: function(editor, context) {
return context.colIdx !== 0;
}
}
For the double click, you can elaborate on this strategy by capturing the deselect event and releasing it only if editing has not started.
plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 2
,pluginId: 'editing'
})
]
,listeners: {
beforeedit: function(editor, context) {
return context.colIdx !== 0;
}
,beforedeselect: function(sm, record) {
var plugin = this.getPlugin('editing');
setTimeout(function() {
if (!plugin.editing) {
// The true prevents the event from firing again,
// and an infinite loop.
sm.deselect(record, true);
}
}, 200);
return false;
}
}
However you have to make a guess concerning the user's double click delay. Too short and you might miss some double clicks, while too long will incur a unpleasant delay on the deselection.
Try to keep selected records a variable, then edit the row. When everythings complete, try to re-select selected rows.
var selModel, selRows;
selModel = grid.getSelectionModel();
selRows = selModel.getSelection();
// after eediting, use the following
selModel.select(selRows);
You have to pass second parameter as true to select method to retain the previous selections as:
selModel.select(rowsToSelect, true);
Sencha ExtJS docs for reference:
http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.selection.Model-method-select
Hope it helps!!