Custom validations in ExtJS - extjs

Iam using Ext3.3
In my application iam design email field in composite field,So when set vtype:email,its not shows error icon ,its shows only redline in txtfield
And also how to write custom validations in ExtJS like Phone numbers and numaric values
Please help me
when iam using
Ext.apply(Ext.form.VTypes, {
phone: function (value, field) {
debugger;
return value.replace(/[ \-\(\)]/g, '').length == 10;
},
phoneText: 'Wrong phone number, please make sure it contains 10 digits',
phoneMask: /[ \d\-\(\)]/
});
its shows an error object does not support this property
Thanks in advance

use msgTarget : 'side' for the field to see the error icon.
See here for a list of vtypes : http://www.sencha.com/forum/showthread.php?4271-More-VTypes!

Related

ExtJS Issue with boolean data and grid column list filter as well as Ext.Data.Store

I am using ExtJS 6 (although from what I can tell it applies up to version 7.4 as well) and I have a grid with a booleancolumn xtype. For that boolean column I wanted to use the filter list option. Yes I know there is a boolean filter option however I don't like how it works using a radio button. I wanted to be able to select the Yes or No with checkboxes, however I found that only the option with true as the value worked. Here is my column config:
{
header: 'Active'
, dataIndex: 'inactive'
, xtype: 'booleancolumn'
, trueText: 'No'
, falseText: 'Yes'
, filter:{
type: 'list',
options: [[true,"No"],[false, "Yes"]]
}
}
This didn't work when excluding the 'options' property and letting it get the data from the store either by the way. After looking through the code I discovered that it takes the 'options' config and creates its own Ext.Data.Store using that as the data. See here as a simple example that can be run that will get the same issue:
var teststore = new Ext.data.Store({
fields: [
'id',
'text'
],
data: [[true,"No"],[false, "Yes"]]
});
The problem is that the 'false' boolean value is changed and is replaced with a dynamically created generic id. I discovered the issue lays in the constructor for 'Ext.data.Model' for the following line:
if (!(me.id = id = data[idProperty]) && id !== 0) {
If that line evaluates to true it will replace the id with the generated one. To fix this I just added ' && id !== false' to the end of the if statement and this fixed the issue.
I have not tested this fully, however the logic seems sound and it looks like the same type of issue occurred with the value of '0' hence the ' && id !==0'. Since we are directed here from the sencha forums I wanted to bring this up in case it helps someone.
Since my post already has the answer I will post a better way to do it other than directly changing the Ext code file (whether this is the proper way I may be wrong). Instead, you can create a new js file that will need to be included in your application (you can name it ext-overrides.js). In the new js file you need only type:
Ext.override(Ext.data.Model, {
constructor: function(data, session) {
.....
}
}
You would then copy the constructor function code from your version of the ExtJS code in where the '.....' is (if perchance the constructor function arguments are different you would have to update those as well) and just add the suggested change I made above in the 'question'. A search of the Extjs code for Ext.define('Ext.data.Model' should get you there easily and then just scroll to the constructor function.

TaxonomyFields in SPFx

Currently I'm creating a new form in SPFx. When reading the fields of the list there is an taxonomyField.
I'm using the PnP Taxonomy control to display the taxonomy labels.
I would like to get the termset id from the taxonomy field and using the following code
var taxField = field as SP.Taxonomy.TaxonomyField;
ctx.load(taxField);
await new Promise((resolveTax, rejectTax) => {
ctx.executeQueryAsync(()=> {
let termSetID = taxField.get_termSetId();
console.log(termSetID);
resolveTax();
}, (sender,args) =>{
console.log("Could not retrieve taxonomyfield termsset id: " + args.get_message());
rejectTax();
});
});
}
I Always receive the following error:
TypeError: Cannot read property 'TaxonomyField' of undefined
at eval (eval at Type.parse (https://...sharepoint.com/_layouts/15/MicrosoftAjax.js:5:10143), :1:13)
at Function.Type.parse (https://...sharepoint.com/_layouts/15/MicrosoftAjax.js:5:10143)
at SP.ClientRequest.$3K_0 (https://...sharepoint.com/_layouts/15/SP.Runtime.js:2:51794)
at Array. (https://...sharepoint.com/_layouts/15/MicrosoftAjax.js:5:307)
at https://...sharepoint.com/_layouts/15/MicrosoftAjax.js:5:51370
at Sys.Net.WebRequest.completed (https://...sharepoint.com/_layouts/15/MicrosoftAjax.js:5:89652)
at XMLHttpRequest._onReadyStateChange (https://...sharepoint.com/_layouts/15/MicrosoftAjax.js:5:84251)
Anybody a suggestion to fix this?
I suggest to use open source tools to work with SharePoint's Taxonomy, for example react-taxonomypicker
This is an elegant Taxonomy Picker control built with TypeScript for React. Initially built for use in Office 365 / SharePoint.
Features:
Retrieve Terms from a Term Set by Term Set GUID.
Support for large Term Set using Async mode
Use SP.Taxonomy.js
Use Promise (polyfill it if needed IE)
You can test it here: https://jquintozamora.github.io/react-taxonomypicker/

Ext validation for datefield against copy/paste of characters

In datefield, I am using regular expression(maskRe) to prevent user from entering alphabets, but If the user try to copy paste the same, he can get his alphabetical text on my datefield, so is there any way to solve this particular issue. I dont want cop/paste to be disabled.
I am using EXT 4.2 version...
Thanks in advance.
Hi Please find these example . It will solves your issue without disabling Copy/Paste
Ext.onReady(function(){
test = Ext.create('Ext.form.field.Date', {
width: 320,
enableKeyEvents:true,
listeners:{
keyup:function( thiss, e, eOpts ){
var str=thiss.value;
if(/^[a-zA-Z]+$/.test(str)){
alert("Contains alphabets");
thiss.reset();
}
}
},
value:'10.69',
renderTo:document.body
});
});

Change default '-Any-' in Drupal 7 exposed views dropdown selector filter

I'd like to change the text of the default '-Any-' that Drupal 7 views uses for an exposed dropdown filter.
Based on an answer in this thread,
How to change the label of the default value (-Any-) of an exposed filter in Drupal Views?
I have created a module called any_exposed with a hook form alter:
function any_exposed_form_alter(&$form, &$form_state, $form_id) {
if ($form['#id'] == 'views-exposed-form-vendors-page') {
$form['field_vendor_type_tid']['#options']['ALL'] = t('Everything'); } }
But all that does is add another option for 'Everything' in the dropdown, it does not overwrite/translate '-Any-'. Just to test I added:
$form['submit']['#value'] = t('Search');
Which changes the text of the Submit button from 'Apply' to 'Search', and this works fine. In case you can't tell, I'm not much of a programmer, but I figure I must be missing something simple. Any help would be appreciated!
This is an old post but in case you are still looking or for anybody who comes to this searching for an answer. 'ALL' must be 'All' as in
$form['field_vendor_type_tid']['#options']['All'] = t('Everything');
Since the array has a member 'All' but not 'ALL' (case is important here) you are adding a member 'ALL' while you want to overwrite 'All'.
Use hook_form_views_exposed_form_alter instead hook_form_alter.
function hook_form_views_exposed_form_alter(&$form, $form_state, $form_id) {
if ($form_id == 'views_exposed_form') {
$form['tid']['#options']['All'] = t('Search');
}
}
function any_exposed_form_alter(&$form, &$form_state, $form_id) {
if ($form['#id'] == 'views-exposed-form-vendors-page') {
$form['field_vendor_type_tid']['#options']['ALL'] = t('Everything'); } }
Works perfectly after changing ALL to All.
I recommend using Better Exposed Filters module, it allows you to do this simply via the Views UI interface.
Install & enable the module
Edit your view, then click on 'Exposed form > Exposed form style'
Select 'Better Exposed Filters'
Click 'More options'
Change the value of 'Override "Any" option label'

Custom Edit control inside a ExtJS Editor grid

Got an issue, and need your advices
I just started writing an editor grid. (I will actually use this grid as a search filter editor, i.e. columns with criteria name, operators and values).
Now, for the value field, I want to have different edit controls for different rows. For instance, when a criteria type is string I want to display a text box, when it's date time, I want a datetime editor.
So the fact is, I need to control the "edit control creation/display" just before editing starts. and it should be different among rows. Unlike the examples I found which are fixed for the columns.
In order to implement this, can you guys please suggest the steps I need to do? I can probably figure out it if one of you can direct me a way.
Thanks and best regards
Actually you can easily accomplish this by dynamically returning different editors and renders depending on the column you're in. In your ColumnModel object you can define something like this below. Note that i'm getting a type property of each record to determine its type. I have an object containing all my different types of editors, and the same for renderers, and then based on the the type i dish out a different editor or renderer for that cell.
editors: { 'default': {xtype:'textfield'},
texttype: {xtype:'textfield'},
numbertype: {xtype:'numberfield'},
combotype: {xtype:'combo'}....... etc. }
getCellEditor: function(colIndex, rowIndex) {
var store = Ext.getCmp('mygrid').getStore();
var field = this.getDataIndex(colIndex);
var rec = store.getAt(rowIndex);
var type = rec.get('type');
if (type in this.editors) {
return this.editors[type];
} else {
return this.editors['default'];
}
},
In the configuration section of your editorgrid, you will need to define your custom editors:
{
xtype: 'editorgrid',
id : 'mygridID',
stripeRows: true,
...
...
,customEditors : {
//configs go here or pre-define the configs prior to this
'columnName1' : new Ext.grid.GridEditor(new Ext.form.Combobox(configObject)),
//configs go here or pre-define the configs prior to this
'columnName7' : new Ext.grid.GridEditor(new Ext.form.CheckBox(configObject))
}
}
use this grid config - in order to select whole rows:
selType: 'rowmodel'

Resources