Update RowEditing Fields when change its value - extjs

I am using Extjs 4.2, so i have a grid with rowediting plugin. All works fine, I want to know how I can update one field value, depending on another field. I mean for example if in my grid I have field1, and field2, I need to update field3 value with field1 + field2 values when one of those were changed. Normally using jquery we can code a change event for each of the fields, but how i can do this on rowediting event?
Is this possible?

You can use edit events of rowedit as follow:
Sencha Fiddle : Grid RowEditor - Change cell value based on condition
grid.on('edit', function(editor, e){
/**
* here I am checking the column name to complete process
* you change what you want
*/
if (e.field == "name") {
e.record.set('result', parseInt(e.record.get('dummy')) + parseInt(e.record.get('age')));
}
})

You have to add editors to the columns, the editor is like any component, has listeners, type etc. then add a change listener
Example:
...
{
header: 'HeaderName',
dataIndex: 'man_peso',
type: 'number',
width: 50,
editor: {
enableKeyEvents: true,
listeners: {
change: function(c, e, eOpts) {
//here you can modify others components
}
},
xtype: 'textfield',
maskRe: /[0-9\.]/,
maxLength: 16
},
...

When you use RowEditor, the e.field value entirely depends on the field that was clicked on to edit the row.
To illustrate the problem:
In the previous answer, open the fiddle link (https://fiddle.sencha.com/#fiddle/4pj).
Double click the email field and change the name.
The handler will not update the result field as e.field will now be 'email' and not 'name'.
That is, Row Editor considers the field on which you click as the edited field. This does not make sense as it is a 'row' editor and is most probably used to edit multiple fields in the row.
To get the list of only modified fields, use e.record.getChanges(). These will give you only the modified fields and their new values.

Related

ExtJS 4.2 editable combo strange behaviour

I have an editable combo like this:
xtype : 'combo',
value : '',
queryMode : 'local',
displayField : 'label',
valueField : 'value',
store : someStore,
allowBlank : false,
disabled : true,
typeAhead : true,
listeners : {
beforequery : function(record) {
record.query = new RegExp(record.query, 'i');
record.forceAll = true;
}
}
This combo is part of a form, and the strange behaviour is this:
If I type some text, the combo filters the results perfect, and I can select any result after type filtering. And when I press a button to submit the form, in some point in a controller I use combo.findRecord to get extra data of the selected item in the combo, process that extra data and submit the form with no problem.
Same case than first, I type some text, the combo filters and I select an option, but if I select a part/all text(click and move mouse/double click mouse on text) and press the key combination ctrl+c (copy), and press the submit button, the combo.findRecord returns false, and the only difference between case 1 and 2 is that I copied (not cut) some part of the text of the selected item.
Any idea why this happens? I have googled it but haven´t find any clue about this.
You can try by adding forceSelection config to the combo and share your results.
Regards,
Sandeep R
The problem was with new RegExp(record.query, 'i'), because when you do ctrl+c on an editable combo, it goes through the listener before query, and sometimes, the value of the combo contains characters that are used in regular expressions configurations like (,) or ..
So the solution is to scape the string to do the search:
var string= record.query;
string = string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');//This line scapes all special characters
record.query = new RegExp(string,'gi')
record.forceAll = true;

ExtJS 5 - Order Grid Columns irrelevant of it array positioning

Can someone help me to figure out a way to arrange the columns irrelevant of it columns array positioning? For example, in below grid columns array i just want to display Phone as 1st column and Name as 2nd column. How can i achieve that programmatically?
Columns Array:-
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email'
}, {
text: 'Phone',
dataIndex: 'phone'
}]
While debugging the grid column config with Chrome developer tools, i figured out a parameter "fullColumnIndex" which value getting increased for every column. But specifying that explicitly doesn't make any difference :(
Thanks!
You can do it by using reconfigure method. Docs — http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.panel.Table-method-reconfigure
Here is the description of this method:
reconfigure( [store], [columns] )
Reconfigures the grid / tree with a new store/columns. Either the store or the > columns can be omitted if you don't wish to change them.
The enableLocking config should be set to true before the reconfigure method is > executed if locked columns are intended to be used.
Parameters
store : Ext.data.Store (optional)
The new store. You can pass null if no new store.
columns : Object[] (optional)
An array of column configs

ExtJs 4.2 - How to use sourceConfig to format date?

I have a property grid and we set the source for this from a controller. There is a date field that needs formatting. I checked the documentation but the example is not so easy to understand.
The grid view just has the grid defined. The controller gets the values from the server and then uses setSource to populate the grid.
I tried this:
sourceConfig: {
installationDate: {
renderer: Ext.util.Format.date('d.m.Y H:i:s')
}
}
How do I format the date using sourceConfig?
Provide a renderer function in your sourceConfig. You can use the utility function Ext.util.Format.dateRenderer to generate it. To set the format for the corresponding editor, use the date field's format config.
sourceConfig: {
'dateAttribute': {
renderer: Ext.util.Format.dateRenderer('Y-m-d'),
editor: {
xtype: 'datefield',
format: 'd.m.Y'
}
}
}
}
Also see this fiddle.
EDIT:
As pointed out in the comments below, it is important that the keys of sourceConfig match exactly with the keys as used in the actual source in order for the configuration to apply correctly.

ExtJS 4: A grid column that displays checkbox with checkall header and can be hidden

We are using ExtJS 4.2, so that is my context for this question.
I need to have a column in a grid that:
Display a checkbox on each row which can be selected/deselected. It is for the purpose of tracking user selections and not synchronized with underlying store data.
Has a checkall checkbox in header that allows user to select or deselect all rows in the grid.
Can be hidden/removed based on certain condition when page is rendered (user permission or data).
I tried the following:
SelModel - which will satisfy requirement No. 2, but cannot be manipulated once defined (see http://www.sencha.com/forum/showthre...selectionModel).
CheckColumn - which satisfies requirement No. 3, but doesn't have a checkall box in column header (see http://www.sencha.com/forum/showthread.php?265924).
Is there a way for me to achieve what I wanted?
Thanks in advance
Haixi
See my answer to this question:
ExtJS 4 select multiple CheckColumn checkboxes with checkbox header
The addition you would need to make is that on the 'update' event of the grid's store, you will need to manually create code that selects the row with the grid's selectionModel based on the new value in the record.
I had the same requirements and was able to use the 'Ext.selection.CheckboxModel' feature (Ext 4.2). Basically, I override the renderer through the config object. I am using the Sencha Architect 3 and this is the code that was produced:
selModel: Ext.create('Ext.selection.CheckboxModel', me.processMyCheckboxSelectionModel3({}))
processMyCheckboxSelectionModel1: function(config) {
config.renderer = function(value, metaData, record, rowIndex, colIndex, store, view) {
var status = record.get('Status');
if (status === 'Failed') {
var baseCSSPrefix = Ext.baseCSSPrefix;
metaData.tdCls = baseCSSPrefix + 'grid-cell-special ' + baseCSSPrefix + 'grid-cell-row-checker';
return '<div class="' + baseCSSPrefix + 'grid-row-checker"> </div>';
} else {
return '';
}
};
return config;
}
What the renderer is returning when I want it to show a checkbox is copied from Reimius' answer, the only difference with this approach is I am using the Ext 4.2's built in 'Ext.selection.CheckboxModel'.

How to Validate the value of text field after pasting some text in a text field regex in extjs?

In my application a text field is there where only regex: /[A-Z0-9_]/ should be allowed.
its working fine when we enter values from key board with the code i pasted below.
Problem is when i paste some value other than regex is being accepted using ctrl+v and rightclick paste.
NoteI disabled right click and ctrl+v events on key down which is not good solution for my problem please help me in solving this..
please tell me how to validate the value of text field after pasting some text .
Mycode: {
xtype: 'textfield',
flex: 1,
allowBlank: false,
maskRe: /[A-Z0-9_]/,
maxLength: 50,
regex: /[A-Z0-9_]/,
ref: '../refField',
enableKeyEvents:true,
listeners: {
keydown: function(field, e){
if((e.getKey() ==86) && e.ctrlKey){
e.stopEvent();
}
}
}
}
Regards,
raj
You could try call validate method on the keyup event, as suggested here:
http://www.sencha.com/forum/showthread.php?27147-Trying-to-get-extjs-to-react-to-text-changing-on-a-text-field
But as they say, it wont guarantee that this will work in all browsers. In my view 100% solution is to call validate() on field in the blur event.
something like:
combo.on('blur', funciton(field){
!if(field.isValid()){
//do what you need, for example clean the value in the field
}
})

Resources