What's the best way to go about adding validation to a date field in a model
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'},
{name: 'alive', type: 'boolean', defaultValue: true}
],
validations: [
{type: 'presence', field: 'age'},
{type: 'length', field: 'name', min: 2},
{type: 'inclusion', field: 'gender', list: ['Male', 'Female']},
{type: 'exclusion', field: 'username', list: ['Admin', 'Operator']},
{type: 'format', field: 'username', matcher: /([a-z]+)[0-9]{2,3}/}
]
});
Let's say the above code contained a 'dob' field for date of birth. How would I go about adding a validation for it?
My assumption is that I would use :
{type: 'format', field: 'dob', matcher: /([a-z]+)[0-9]{2,3}/}
but would use a regex that's designed to validate a date. Is there a better way to do this? I noticed that date fields on forms use their own validation methods to highlight a date field. Is there something like that for date fields in models?
add validate method to Ext.data.validations (singleton),
and it will be use at Ext.data.Model.validate().
take a look at src
Related
How to set global behavior of GraphQL with default values for object and array ?
Some examples
const AddressTC = schemaComposer.createObjectTC({
name: 'Address',
fields: {
street: {type: 'String',defaultValue: null},
number: {type: 'String', defaultValue: null},
postcode: {type: 'String', defaultValue: null},
city: {type: 'String', defaultValue: null},
comment: {type: 'String', defaultValue: null},
country: {type: 'String', defaultValue: null},
quality: {type: 'QualityEnum', defaultValue: 'BAD'},
}
});
const customerTC = schemaComposer.createObjectTC({
name: 'Customer',
fields: {
address: AddressTC
needs: {
type : ['objectID'],
defaultValue: []
},
documents: {
type: schemaComposer.getOTC('Document').List,
defaultValue: []
},
}
});
In my case I use noSQL database and when a field doesn't exist or is empty, the request GraphQL always returns null then crashed my app with wrongs data type.
INFO : I use graphql-compose
I found this post, whith the same problem, but this solution not useful for me with a large API and dynamics resolvers. Graphql, how to return empty array instead of null
Java application sends to the front the following json data:
{"data":[{"id":1,"name":"","password":"xxxxxxxxxxxxxxxxxxx","roles":[{"id":1,"name":"Administrator"}],"username":"admin"}]}
In the front I have an user model like the following:
Ext.define('App.store.Users', {
extend: 'Ext.data.Store',
fields: [
{name: 'id', type: 'auto'},
{name: 'name', type: 'auto'},
{name: 'password', type: 'auto'},
{name: 'roles', type: 'auto'},
{name: 'username', type: 'auto'},
],
autoLoad: true,
proxy: {
type: 'ajax',
url: '/web/user',
reader: {
type: 'json',
root: 'data'
}
}
});
Edit:
I updated the code and this way the data is loaded.
Also i made a grid so I can show the results.
Ext.define('App.view.Home', {
extend: 'Ext.panel.Panel',
alias: 'widget.home',
title: 'Home',
layout: 'fit',
items: [
{
xtype: 'gridpanel',
store: 'Users',
title: 'Users grid',
columns: [
{text: 'Id', dataIndex: 'id' },
{text: 'Username', dataIndex: 'username', width : 200 },
{text: 'Role', dataIndex: 'roles', width : 200 },
{text: 'Name', dataIndex: 'name', width : 200 },
]
}
]
});
Now the question that remains is that the grid is showing [object Object] how could i be showing the part that i want from that object, as the name of the role
You need to change the reader type to JSON, This code is working for me:
Fiddle
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.define('Users', {
extend: 'Ext.data.Store',
fields: ['id', {
name: 'username',
type: 'string'
}, {
name: 'name',
type: 'string'
}],
autoLoad: true,
proxy: {
type: 'ajax',
url: 'data1.json',
reader: {
type: 'json',
rootProperty: 'data'
}
}
});
Ext.create("Users", {
listeners: {
load: function() {
console.log("Loaded " + this.getCount() + " records");
}
}
});
}
});
I also removed the mappings as I don't think that you need them.
EDIT
In regards to the data showing in a grid, the 'roles' property in the JSON data is an array, that's why it's showing in the grid as object, I've updated the fiddle to show a possible way to get this information, But it's not the recommended method. You should probably look at associations in ExtJs for this.
Reviewing the guide on the Data Package may also help with this.
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.define('Users', {
extend: 'Ext.data.Store',
fields: [{
name: 'id',
type: 'int'
}, {
name: 'username',
type: 'string'
}, {
name: 'name',
type: 'string'
}, {
name: 'roles',
type: 'auto'
}],
autoLoad: true,
proxy: {
type: 'ajax',
url: 'data1.json',
reader: {
type: 'json',
root: 'data'
}
},
listeners: {
load: function(store, records) {
console.log("Loaded " + this.getCount() + " records");
}
}
});
var users = Ext.create("Users");
Ext.define('App.view.Home', {
extend: 'Ext.panel.Panel',
alias: 'widget.home',
title: 'Home',
layout: 'fit',
items: [{
xtype: 'gridpanel',
store: users,
title: 'Users grid',
columns: [{
text: 'Id',
dataIndex: 'id'
}, {
text: 'Username',
dataIndex: 'username',
width: 200
}, {
text: 'Role',
dataIndex: 'roles',
width: 200,
renderer: function(v, metadata) {
return v[0].name;
}
}, {
text: 'Name',
dataIndex: 'name',
width: 200
}]
}]
});
Ext.create('App.view.Home', {
renderTo: Ext.getBody()
});
}
});
I have a model:
Ext.define('CrudTest.model.User', {
extend: 'Ext.data.Model',
idProperty: 'Id',
fields: [
{ name: 'Id', type: 'int' },
{ name: 'Name', type: 'string' },
{ name: 'PhoneNumber', type: 'int' },
{ name: 'Address', type: 'string' },
{ name: 'StateId', type: 'int', reference: 'State' },
],
validators: [
{ type: 'presence', field: 'Name', message: 'define name, please' },
{ type: 'length', field: 'PhoneNumber', max: 8, messsage: 'lower than 8 digit' },
],
proxy: {
type: 'ajax',
api: {
create: 'home/new',
read: 'home/users',
update: 'home/Edit',
destroy: 'home/Delete'
},
},
});
and a form that load data to form by loadRecord() and my handler code for submit button is:
var form = this.up('form').getForm();
if (form.isValid()) {
form.getRecord().save();
}
it make a post request through my proxy model good. but the body of request just have dirty(edited) fields. why i don't have other fields?
but in request body i have just dirty fields. why? i know updateRecord() uses getFieldValues([onlyDirty=false]), how can send all fields values?
I use extjs 5
Finally find the problem. Ext.data.writer.Writer has a config property writeAllFields
So i change the proxy to this:
proxy: {
writer:{ writeAllFields:true },
type: 'ajax', //also works with type: 'direct',
api: {
create: 'home/new',
read: 'home/users',
update: 'home/Edit',
destroy: 'home/Delete'
},
You can set crtical: true on the Model to any fields you always want written whether changed or not, e.g.
{ name: 'title', type: 'string', critical: true }
I am very new to sencha touch, and i am using Architect. I have a controller "RegisterUser"(controlleractiontap) which has a function.. when i fill in some user data and I click register button in my formview it will write the user to my local database.
I have a model called "userModel" which contains the following:
fields: [
{
name: 'Username',
type: 'string'
},
{
name: 'Password',
type: 'string'
},
{
name: 'Firstname',
type: 'string'
},
{
name: 'Lastname',
type: 'string'
},
{
name: 'Phonenumber',
type: 'string'
},
{
name: 'Email',
type: 'string'
}
],
validations: [
{
type: 'presence',
field: 'Username'
},
{
type: 'email',
field: 'Email'
},
{
type: 'length',
field: 'PhoneNumber',
max: 10,
min: 10
}
the problem: how do i call my validators in the controller so it will validate the fields in my form?
if i missing some information to make it more clear just let me now.
Thanks in advance!
var val=Ext.create('talkbag.model.Registration',new Ext.getCmp("registration").getValues());
where "registration" is the id assigned to the view that extends Ext.form.Panel
var check=val.validate();
now you can check like this if (!check.isValid())
I´ve designed an application based on the MVC Pattern. So I also defined my proxies, fields and validators in my model. Here for example is a model for a list of countries:
Model
Ext.define('LT.model.Country',{
extend: 'Ext.data.Model',
fields: [{name: 'id',type: 'int'},
{name: 'name', type: 'string'},
],
validations: [
{type: 'length', field: 'name', min: 2}
],
proxy: {
type: 'rest',
url: '/country',
reader: {
type: 'json'
},
writer: {
type: 'json'
}
}
});
And here is the store for using this model:
Store:
Ext.define('LT.store.Country', {
extend: 'LT.base.store.Base',
model: 'LT.model.Country'
});
The store is shown in a Grid Panel, where i use the RowEditor Plugin to enable adding and editing rows directly in grid view
Grid Panel:
Ext.define('LT.view.country.List' ,{
extend: 'Ext.grid.Panel',
alias : 'widget.country-list',
plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 2,
clicksToMoveEditor: 1
})
],
store : 'Country',
columns: [
{header: 'ID', dataIndex: 'id', width: 50},
{header: 'Name', dataIndex: 'name', flex: 3, editor: 'textfield'},
],
tbar: [{
xtype: 'button',
action: 'add',
text: 'Add'
},{
xtype: 'button',
action: 'delete',
text: 'Delete'
}]
});
My problem now is, that the Validation Errors are not show if you edit data in grid view. If the data doesn´t match the validation criterias, then it´s not submitted to the proxy (which is fine), but the user also doesn´t get an error message, that the inserted data is invalid.
I found some (not really beautiful) workarounds - but maybe anyone knows another solution to add validation functionality to rowediting in extjs?
Thanks in advance & cheers,
Michael
Integrating Ext.grid.panel validation and Ext.data.Model.validations
The above response talks about the approach that you can follow