ExtJS Model - Concatenate fields - extjs

Is there a sensible way in a model to concatenate two fields, something like this:
Ext.define('model.Person', {
extend: 'Ext.data.Model',
idProperty: 'Id',
fields: [
{ name: 'Id', type: 'int' },
{ name: 'FirstName', type: 'string' },
{ name: 'LastName', type: 'string' },
{ name: 'FullName', type: 'string', mapping: 'FirstName + " " + LastName' }
]
});
I've tried a multitude of ways, but can't seem to get any to work.
I was going to use a function in the model to stick the two fields together, but I also need to use this as the displayfield inside a 'itemselector' (custom control) and switch this dynamically and that control doesn't seem to like 'FullName()' as a displayfield.
Any thoughts greatly appreciated.

Use the convert config of the Ext.data.Field: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.data.Field-cfg-convert
{ name: 'FirstName', type: 'string' },
{ name: 'LastName', type: 'string' },
{
name: 'FullName',
type: 'string',
convert: function( v, record ) {
return record.get( 'FirstName' ) + ' ' + record.get( 'LastName' )
}
}
Here's a live example: https://fiddle.sencha.com/#fiddle/mf

Related

Create Select field in detail window

I am creating a custom plugin where I need to list some stuff in the backend area. Each item in the list has the option to open a detail window where I want to display some info and a SELECT OPTION field but not sure how to create it. That field is just to select the option you want and save it in the database.
Is it possible to create it in myplugin/Resources/views/backend/my_plugin/model/product.js file?
I have something like this (sample):
Ext.define('Shopware.apps.MyPlugin.model.Product', {
extend: 'Shopware.data.Model',
configure: function() {
return {
controller: 'MyPlugin',
detail: 'Shopware.apps.MyPlugin.view.detail.Product'
};
},
fields: [
{ name : 'id', type: 'int', useNull: true },
{ name : 'Name', type: 'string' },
{ name : 'Lastname', type: 'string' },
{ name : 'Date', type: 'date' },
{ name : 'Color', type: 'SELECT?' }
]
});
Of course the Color field doesnt recognize the SELECT there but I was wondering if there's another word for it?
I was hoping to create that new field like this:
fields: [
...
{
name : 'Color',
type: 'SELECT?',
values: {'green', 'blue', 'red'}
}
]
If I am completly wrong could you please guide me where to create this field?
Thanks in advance.
You're defining a model, not a plugin and it looks like you want to configure 'Color' as an enum? Am I right?
The standard types are:
Ext.data.field.Field //(Default, implies no conversion)
Ext.data.field.String
Ext.data.field.Integer
Ext.data.field.Number
Ext.data.field.Boolean
Ext.data.field.Date
(see documentation under Field Types)
You can probably just use a string unless you want model validation...
You could create a custom type, extended from string or field and use a custom validator. (see same page under Validation)
Example:
Ext.define('App.field.Color', {
extend: 'Ext.data.field.Field',
alias: 'data.field.color',
// Match list of colors
validators: {
type: 'list',
list: ['green', 'blue', 'red']
}
});
Ext.define('App.model.Product', {
extend: 'Ext.data.Model',
fields: [
{ name : 'id', type: 'int', useNull: true },
{ name : 'Name', type: 'string' },
{ name : 'Lastname', type: 'string' },
{ name : 'Date', type: 'date' },
{ name : 'Color', type: 'color' }
]
});

Modify data before rendering to grid in ExtJS 4

How to modify the value stored in local storage before rendering it in the grid in ExtJs?
I need to pass the value to a function for processing before it gets rendered,
eg: process(value fetched from local storage);
I have written the Model like this:
Ext.define('MyApp.model.RegistrationModel', {
extend: 'Ext.data.Model',
fields: [
{ name: 'user', type: 'string' },
{ name: 'fName', type: 'string' },
{ name: 'lName', type: 'string' },
{ name: 'gender', type: 'string'},
{ name: 'role', type: 'string' },
{ name: 'phone', type: 'string'}
]
});
Do you want to modify the data just for visualisation? Then you can simply use the renderer config: http://docs.sencha.com/extjs/4.1.1/#!/api/Ext.grid.column.Column-cfg-renderer
You have to add renderer in grid columns you can render what ever you want:
{
dataIndex: 'data',
renderer: function (val, metaData, r) {
return val + ' (' + "local data" + ')';
},
}

Does Extjs Combobox work with store filters?

i want to ask you if extjs comboboxes use filtered stores. I have a table with different kind of business(so it has a "type" field). I have a view with multiple comboboxes, and i want that those works with stores that use the same model, but with different filters. So when i put them to work, it doesn't work.
This is one of the filtered stores:
Ext.define('myapp.store.ListaAerolineas', {
extend: 'Ext.data.Store',
requires: [
'myapp.model.Empresa'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: true,
autoSync: true,
model: 'myapp.model.Empresa',
storeId: 'MyJsonPStore',
proxy: {
type: 'jsonp',
url: 'http://myapp.localhost/empresa/listar/',
reader: {
type: 'json',
root: 'listaempresa'
}
},
filters: {
property: 'IdTipo',
value: 5
}
}, cfg)]);
}
});
This is the model:
Ext.define('myapp.model.Empresa', {
extend: 'Ext.data.Model',
idProperty: 'Id',
fields: [
{
name: 'Id',
type: 'int'
},
{
name: 'Nombre',
type: 'string'
},
{
name: 'Direccion',
type: 'string'
},
{
name: 'Telefono',
type: 'string'
},
{
name: 'Contacto',
type: 'string'
},
{
name: 'Celular',
type: 'string'
},
{
name: 'TipoEmpresa',
type: 'string'
},
{
name: 'Estado',
type: 'string'
},
{
name: 'FechaCreacion',
type: 'date'
},
{
name: 'IdTipo',
type: 'int'
},
{
name: 'IdEstado',
type: 'int'
}
]
});
And finally this is my grid column definition for my combobox:
{
xtype: 'gridcolumn',
dataIndex: 'Aerolinea',
text: 'Aerolinea',
editor: {
xtype: 'combobox',
id: 'cmbGridListaEmbarquesAerolinea',
store: 'ListaAerolineas'
}
So, i must do anything? Thank you in advance...
What version of ExtJs are you using? but in general combobox will display only records that are filtered in the store. So, to answer your question - yes, it should work.

Sencha Touch 2: localstorage creates multiple ids

My User has the following config:
identifier: 'uuid',
proxy: {
type: 'localstorage',
id: 'tm-user'
}
But in my localstorage the following is shown:
Why is the id added to the tm-user key everytime I save the user profile?
I only overwrite the user everytime if that helps?
// create user
var user = Tm.model.User.create({
id: response[0].id,
...
});
user.save();
EDIT: full model requested:
Ext.define('Tm.model.User', {
extend: 'Ext.data.Model',
config: {
hasMany: { model: 'Tm.model.Exam', name: 'exams', autoLoad: true },
fields: [
{ name: 'id', type: 'int' },
{ name: 'username', type: 'string' },
{ name: 'email', type: 'string' },
{ name: 'nameFirst', type: 'string' },
{ name: 'nameLast', type: 'string' },
{ name: 'syncedAt', type: 'date', defaultValue: null }
],
validations: [
{ field: 'id', type: 'presence' },
{ field: 'username', type: 'presence' },
{ field: 'syncedAt', type: 'presence' },
{ field: 'email', type: 'presence' },
{ field: 'email', type: 'email' },
{ field: 'username', type: 'length', min: 3 }
],
identifier: 'uuid',
proxy: {
type: 'localstorage',
id: 'tm-user'
}
}
});
Change the following (if you're using UUID type should be string, not int.
{ name: 'id', type: 'string' }
And change identifier definition like:
identifier: {
type: 'uuid',
isUnique: true
}
Update
Since you're receiving Ids from the server and they are not UUIDs you might try the following. Change identifier configuration to this:
identifier: {
type: 'sequential',
isUnique: true
}
and of course type of id should be int in this case. If that doesn't work however I would recommend still use first approach (using uuid) but store id you're receiving from the server in some different field (item_number for example) and let ST handle unique UUID field.

1 to many model association

I have problems to make an 1 to many model with Sencha Touch 2.
I want to save "persons" and add "todo's" to persons.
These values should be saved at the local storage.
So 1 person can have many todo's.
For this I have 2 models and 2 stores.
Personmodel:
Ext.define("app.model.PersonModel", {
extend: "Ext.data.Model",
config: {
idProperty: 'email',
fields: [
{ name: 'name', type: 'string' },
{ name: 'email', type: 'string' },
],
validations: [
{ type: 'presence', field: 'email' , message: 'Blabla'},
{ type: 'presence', field: 'name' , message: 'Blabla'},
{ type: 'email', field: 'email' , message: 'Blabla'},
]
}
});
TodoModel:
Ext.define("app.model.TodoModel", {
extend: 'Ext.data.Model',
config: {
idProperty: 'todoId',
fields: [
{ name: 'todoId', type: 'int' },
{ name: 'email', type: 'string' },
{ name: 'note', type: 'string' }
],
validations: [
{ type: 'presence', field: 'todoId', message: 'Blabla' },
{ type: 'presence', field: 'email', message: 'Blabla' },
{ type: 'presence', field: 'note', message: 'Blabla' }
]
}
});
PersonStore:
Ext.define("app.store.PersonStore", {
extend: "Ext.data.Store",
requires: "Ext.data.proxy.LocalStorage",
config: {
model: "app.model.PersonModel",
proxy: {
type: 'localstorage',
id: 'todo-app-personstore'
},
sorters: [{ property: 'name', direction: 'ASC'}],
grouper: {
sortProperty: "name",
direction: "ASC",
groupFn: function (record) {
}
}
}
});
TodoStore:
Ext.define("app.store.TodoStore", {
extend: "Ext.data.Store",
requires: "Ext.data.proxy.LocalStorage",
config: {
model: "app.model.TodoModel",
proxy: {
type: 'localstorage',
id: 'todo-app-todostore'
},
sorters: [{ property: 'email', direction: 'ASC'}],
grouper: {
sortProperty: "email",
direction: "ASC",
groupFn: function (record) {
}
}
}
});
I deleted the associations I made in the models because they didn't work at all.
Maybe relevant information: First I want to save a person. Later on I want to save todo's and connect them to a person.
Try Referring below links may helpful to you
http://miamicoder.com/2012/sencha-touch-2-models-hasmany-associations-php-example/
http://appointsolutions.com/2012/07/using-model-associations-in-sencha-touch-2-and-ext-js-4/

Resources