Email validation sencha - extjs

How to check validation for email field in sencha touch?Here my code in application,Please help me to solve this
{
xtype: 'fieldset',
items:[{
xtype: 'emailfield',
inputType:'email',
labelWidth: '33%',
label: 'Email',
id:'emailId',
name: 'emailId',placeHolder:'emailId'}]
}

The proper way to activate validation directly in the view would be:
{
xtype: 'textfield',
name: 'email',
vtype: 'email'
}
No need for regex.

If you storing fields as model instance, you can do.
Ext.define('User', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'name', type: 'string'},
{name: 'emailId', type: 'string'}
{name: 'phone', type: 'string'}
]
},
validations: [
{type: 'presence', name: 'name',message:"Enter Name"},
{type: 'format', name: 'emailId', matcher: /^\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*$/, message:"Wrong Email Format"}
]
});
Or you can just match with regular expression
var ereg = /^\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
var testResult = ereg.test(emailId);
testResult will be true or false based on validation.

For form field validation on user input use the following regex
{
xtype: 'textfield',
allowBlank:false,
regex:/^((([a-zA-Z0-9_\-\.]+)#([a-zA-Z0-9_\-\.]+)\.([a-zA-Z\s?]{2,5}){1,25})*(\s*?;\s*?)*)*$/,
regexText:'This field must contain single or multiple valid email addresses separated by semicolon (;)',
blankText : 'Please enter email address(s)',
}

Related

Extjs treepicker error when reading from a json format

I'm still new in Extjs. I have a TreeStore which reads a JSON string as an input and I can represent it in a tree panel. But when I try to use the treestore in a tree picker there is get this error:
Is there anything missing here?
// try to find a record in the store that matches the value
record = value ? me.store.getNodeById(value) : me.store.getRootNode();
Here is the JSON format:
{
success: true,
"children": [
{
"id": "G_1",
"text": "group1",
"leaf": false
},
{
"id": "G_2",
"text": "group2",
"leaf": false
}
]
}
And here is my TreeStore:
Ext.define('App.store.GroupTree', {
extend: 'Ext.data.TreeStore',
model: 'App.model.GroupTree',
requires: 'App.model.GroupTree',
proxy: {
type: 'ajax',
url: 'property/tree.json',
reader: {
type: 'json',
root:'children'
}
},
});
My treepicker item:
items: [
{
xtype: 'treepicker',
name: 'propertyCmb',
fieldLabel: 'Property',
labelWidth: 60,
displayField: 'text',
store: 'GroupTree',
valueField: 'id',
queryMode: 'local',
}
]
Here is the treestore model code
Ext.define('App.model.GroupTree', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'string', useNull: true},
{name: 'text', type: 'string'},
{name: 'leaf', type: 'boolean'},
{name: 'expanded', type: 'boolean'}
]
});
The error occurse, because the store is not auto created when assigned to your treepicker like store: 'GroupTree'.
You have to create an instance of it first and that instance you need to assign to the treepicker. See the documentation http://docs.sencha.com/extjs/5.0.1/#!/api/Ext.ux.TreePicker-cfg-store .
The following should work
var groupStore = Ext.create('App.store.GroupTree');
groupStore.load();
var picker = Ext.create('Ext.ux.TreePicker',{
name: 'propertyCmb',
store: groupStore,
fieldLabel: 'Property',
labelWidth: 60,
displayField: 'text',
valueField: 'id',
queryMode: 'local',
renderTo: Ext.getBody()
});
A working fiddle can be found at https://fiddle.sencha.com/#fiddle/dip .

Validation data in Ext.Model

Help me please.
Models have built-in support for validations, which are executed against the validator functions in Ext.data.validations.
My code:
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [{
name: 'name',
type: 'string'
},{
name: 'age',
type: 'int'
},{
name: 'phone',
type: 'string'
},{
name: 'gender',
type: 'string'
},{
name: 'username',
type: 'string'
}],
validations: [
{
type: 'length',
field: 'name',
min: 2
},{
type: 'format',
field: 'username',
matcher: /([a-z]+)[0-9]{2,3}/
}]
});
var person = Ext.create('User', {
name: 'Eugene',
username: 'Popov',
gender: 'F',
age: 300,
Married: false
});
console.log(person.get('name'))
person.set('name','U');
console.log(person.get('name'))//U
});
I've read that the model can filter data .
What is the principle of their work?
Why I can write wrong values in my example?
Thanks!
Model validations don't reject changes by themselves. Editing a model through some other component (like stores or grid editors) may provide this feature. Validations only come into play when calling the validate or isValid methods on a model.
If your models are part of a store, you can listen for the store's update event (link to docs). From within the event handler, you can validate the model and reject any changes you want.
// Simple demonstration
store.on('update', function (store, model, operation) {
if (operation === Ext.data.Model.EDIT && !model.isValid()) {
model.reject();
}
});

bind a grid to form without using mvc

I am trying to bind a grid data to a form in extjs. when i click on a grid row, the details should be populated in form. Can i do that in a simple way without using MVC. I have wrote the below code. help me further. Thank you
// JavaScript Document
Ext.require('Ext.data.Store');
Ext.require('Ext.grid.Panel');
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [ 'id','name', 'email', 'phone' ]
});
Ext.onReady(function() {
var userStore = Ext.create('Ext.data.Store', {
model: 'User',
data: [
{ id: '1', name: 'srb', email: 'srb#gmail.com', phone: '555-111-1224' },
{ id: '2', name: 'srv', email: 'srv#gmail.com', phone: '555-222-1254' }
]
});
Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
store: userStore,
width: 400,
title: 'All Users',
columns: [
{
text: 'Id',
dataIndex: 'id' ,
flex: 1
},
{
text: 'Name',
dataIndex: 'name',
flex: 2
},
{
text: 'Email Address',
flex: 3,
dataIndex: 'email',
},
{
text: 'Phone Number',
flex: 2,
dataIndex: 'phone'
}
],
listeners : {
itemclick: function(dv, record, item, index, e) {
var nm= record.get('name');
}
},
});
Ext.create('Ext.form.FieldSet',{
renderTo: Ext.getBody(),
margin: '0 0 0 10',
title:'User details',
defaults: {
width: 240,
labelWidth: 90
},
defaultType: 'textfield',
items: [{
fieldLabel: 'Id',
name: 'id'
},{
fieldLabel: 'Name',
name: 'name'
},{
fieldLabel: 'Email Id',
name: 'email'
},{
fieldLabel: 'Phone Number',
name: 'phone'
}]
});
});
Use Ext.form.Panel instead of Ext.form.FieldSet. Field set is more of a decorating container. The form panel provides support for loading / saving data from the form, etc.
Then you need a way to access your form panel in your click event. The absolute simplest is to set an id on the form, and use Ext.getCmp to get a ref to the form. Since you've already got the record there, you can just use the loadRecord method of the form panel.
And you'll be done! Be happy to have named your model & form fields the same ;)
The final call in the event listener will look like this:
Ext.getCmp('myForm').loadRecord(record);
what version of extjs are you using?
you don't seem to have a form defined or instantiated.
in your grid's itemclick event handler, you need to get a reference to the form, and call form.loadRecord with the passed in record (2nd argument):
itemclick: function(dv, record, item, index, e) {
var form = getAReferenceToTheFormObject();
form.loadRecord(record);
}
example:
http://jsfiddle.net/4TSDu/74/

Where's my EXT JS 4 model data?

Using Ext JS 4.1....
I have a grid that displays a bunch of Model instances, although only some of the fields are displayed. I then have a double-click listener where I would like to load the entire record into a form for editing. In the double-click listener I do not see the data in my hasMany association although the json data is being returned according to Firebug's Net display where I see the response from the server call. Is there something wrong with my model or am I going about this wrong?
Request.js
Ext.define('Request', {
extend: 'Ext.data.Model',
requires: ['PointOfContact'],
fields: [
{name: 'id', type: 'int'},
{name: 'project', type: 'string'},
{name: 'purpose', type: 'string'},
{name: 'status'},
{name: 'additionalInfo', type: 'string'}
],
hasMany: [{
model: 'PointOfContact',
name: 'pointOfContacts',
foreignKey: 'id',
associationKey: 'pointOfContacts'
}],
proxy: {
type: 'rest',
url: '/web/project/rest/request/',
reader: { type: 'json' },
writer: { type: 'json' }
}
});
PointOfContact.js
Ext.define('PointOfContact', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'},
{name: 'fullName', type: 'string'},
{name: 'email', type: 'string'},
{name: 'phone', type: 'string'}
]
});
Requests.js
Ext.define('Requests', {
extend: 'Ext.data.Store',
model: 'Request',
autoLoad: true
});
RequestsView.js
Ext.define('RequestsView', {
extend: 'Ext.grid.Panel',
title: 'All Requests',
store: 'Requests',
viewConfig: {
singleSelect: 'true',
listeners: {
itemdblclick: function(dataview, record, item, index, e) {
console.log(record.get('project'));
console.log(record.get('purpose'));
console.log(record.get('status'));
console.log(record.get('additionalInfo'));
console.log(record.get('pointOfContacts'));
var comp = Ext.ComponentQuery.query('requestForm');
comp[0].getForm().loadRecord(record);
var mainPanel = Ext.ComponentQuery.query('mainpanel');
mainPanel[0].getLayout().setActiveItem('requestForm');
}
}
},
columns: [
{header: 'Project', dataIndex: 'project', flex: 1},
{header: 'Purpose', dataIndex: 'purpose', flex: 1},
{header: 'Status', dataIndex: 'status', flex: 1}
]
});
So in the console I see the values for project, purpose, status and additionalInfo but I get "undefined" for pointOfContacts.
Any suggestions?
UPDATE WITH FINAL WORKING CODE:
Here is the working code I used to retrieve the pointofContacts and load a grid on my form panel with the pointOfContacts
...
itemdblclick: function(dataview, record, item, e) {
var comp = Ext.ComponentQuery.query('requestForm');
comp[0].getForm().loadRecord(record);
Ext.getCmp('pocGrid').reconfigure(record.pointOfContacts());
var mainPanel = Ext.ComponentQuery.query('mainpanel');
mainPanel[0].getLayout().setActiveItem('requestForm');
}
....
Has many associations are not parsed in to associated records by default. Especially for the grid - as that is supposed to be a flat data view. Model docs show you how to setup associations but don't say anything about creating instances for you :)
There are links to usage of has many (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.association.HasMany) from the Model docs. Unfortunately the usage is not what you expect it to be. Essentially it is designed to fetch the records on demand by calling their store to load.

Extjs Comobobox duplicate display field not allowed to be set?

I'm a newbie using Extjs 4.07. I have created a combobox (remote) queryMode. The combobox displays a list of courses. However, the institution I work for recently recoded their entire courses. So, I end up having two records with the same display field. My JSON looks like this:
{"result":[{"id":"90223","code":"CM12","description":"Introduction to C Programming","creditHours":"3.00","numberOfLabs":"0","contactHours":null,"chargeableCredits":null},
{"id":"2094","code":"CMPS1302","description":"Introduction to C Programming","creditHours":"3.00","numberOfLabs":"0","contactHours":null,"chargeableCredits":null}],"total":2}
the display field is description and the value field is id. When I select one of the items in the combobox and submit everything works fine. The problem occurs if later I selected the incorrect course and select the other one.
I have tried setting the idProperty: 'id' but to no avail. When I submit the form the value that will be sent is the one that was selected first after. Note: This only happens for duplicate course descriptions, everything else works fine.
here is some code to help explain the problem:
Ext.define('SIS.model.ManageCourse', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'},
{name: 'code', type: 'string'},
{name: 'description', type: 'string'},
{name: 'creditHours', type: 'float'},
{name: 'contactHours', type: 'float'},
{name: 'chargeableCredits', type: 'float'},
{name: 'numberOfLabs', type: 'float'},
{name: 'selected', type: 'bool'} //for update course pre-requisites
]
});
Ext.define('SIS.store.ClassCourse', {
extend: 'Ext.data.Store',
autoLoad: true,
autoSync: true,
model: 'SIS.model.ManageCourse',
pageSize: 7,
remoteFilter: true,
idProperty: 'id',
proxy: {
type: 'ajax',
api: {
read: 'course/select'
},
reader : {
type : 'json',
root : 'result',
totalProperty : 'total',
successProperty : 'success'
}
}
});
Ext.define('SIS.view.class.ClassCourseCombo', {
extend: 'Ext.form.ComboBox',
alias: 'widget.ClassCourseCombo',
name: 'courseId',
fieldLabel: 'Course',
store: 'ClassCourse',
queryMode: 'remote',
pageSize: 7,
displayField: 'description',
valueField: 'id',
allowBlank: false,
hideTrigger: true,
forceSelection: true,
minChars: 1,
lazyInit: false,
listConfig: {
getInnerTpl: function () {
return '<div class="combo-header">{description}</div>\
<div class="combo-item">{code}</div>';
}
}
});
Having same display value for different rows in combo box is confusing at least for the end user. Why don't you create a calculated field like this:
fields: [
{ name: 'id', type: 'int' },
{ name: 'description', type: 'string' },
{ name: 'display', type: 'string', convert: function(v, r) {
return r.get('id') + ' ' + r.get('description');
}}
}]
And use this display as your displayField.
This is a bug identified since version 3 I found the solution in sencha forum provided by Condor.
I changed the line
if(val.length > 0 && val != this.emptyText)
with
if(val.length > 0 && val != this.emptyText && typeof this.emptyText != 'undefined')
when there is no emptyText defined the result is just as if forceSelection was set to false even when explicitly set to true. small fix.

Resources