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" + ')';
},
}
Related
this a Sencha code which I am supposed to fix, however I don't understand why after creating new records to a store, they don't show immediately, but, only after refresh(?). Below are the relevant pieces of code.
Thank you.
Controller
click: function(button){
var window = button.up('window');
var form = window.down('form#formTemplateWindow');
if(window.action == "add"){
if(form.isValid()){
var store = this.getDataViewList().getStore();
var zones = new Array();
Ext.each(form.zones, function(value, key){
zones.push(value.data.id);
});
var record = form.getValues();
record.zones = zones;
store.add(record);
store.sync();
button.up('window').close();
}
}
Model
Ext.define("web.model.Template", {
extend: "Ext.data.Model",
fields: [
'id',
'name',
'layout_id',
{
name: 'reg_date',
type: 'date',
dateReadFormat: 'Y-m-d H:i:s',
dateWriteFormat: 'Y-m-d H:i:s'
},{
name: 'background',
type: 'auto'
},{
name: 'color1',
type: 'string'
},{
name: 'color2',
type: 'string'
},{
name: 'url',
type: 'string'
},{
name: 'degree',
type: 'string'
},{
name: 'playlists',
type: 'auto'
},{
name: 'zones',
type: 'auto'
}
]
});
Store
Ext.define("web.store.Template",{
extend:"Ext.data.Store",
autoSync: true,
autoLoad:false,
model:"web.model.Template",
proxy:{
type:"rest",
url:web.util.Config.TEMPLATE_URI,
reader:{
type:"json",
root:"result"
}
},
sorters: [
{
property: 'Name',
direction: 'ASC'
}
]
});
The server has to respond accordingly with the newly created records.
Use store.insert(index,record) method instead of store.add(record).
this inserts Model instances into the Store at the given index and fires the add event as well
store.insert(0,record);
Change autoLoad property false to true
autoLoad:true
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
I am trying to change extraparams of a treestore at runtime. I have tried the following (works on a normal store not treestore):
myshoporders_tree_store.getProxy().setExtraParam('order_no', order_no);
myshoporders_tree_store.reload();
Since i could not get the above to do what i wanted, i found a solution like this:
myshoporders_tree_store.reload({
params:{ order_no:order_no }
});
The only problem with the solution is that the params are not persistent i.e. after the filter, the params get reset again on store reload, tho i wud like to maintain the params for other purposes. Or am I not doing it right?
Pls help. Thnx.
My treestore:
var myshoporders_tree_store = Ext.create('Ext.data.TreeStore', {
autoload: false,
model: 'myshop_order_model',
proxy: {
type: 'ajax',
url: 'includes/order_cats.php',
extraParams: {shop_id: '',cat: '',status: '',order_date: '',order_no: '',buyer_name: '',order_id: '',id: ''},
reader: {
root: 'orders',
totalProperty : 'totalCount'
}
},
folderSort: false
});
My model:
Ext.define('myshop_order_model', {
extend: 'Ext.data.Model',
idProperty: 'id',
fields: [
{ name: 'id', type: 'string' },
{ name: 'cat', type: 'string' },
{ name: 'shop_id', type: 'string' },
{ name: 'plid', type: 'string' },
{ name: 'invid', type: 'string' },
{ name: 'rectype', type: 'string' },
{ name: 'order_number', type: 'string' },
{ name: 'order_date', type: 'string' },
{ name: 'buyer_name', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'read', type: 'string' },
{ name: 'invoice_total', type: 'string' },
{ name: 'total', type: 'string' }
]
});
I have since tried the following example i got from sencha forum to try and isolate the problem:
var store = Ext.create('Ext.data.TreeStore', {
fields: ['foo'],
proxy: {
type: 'ajax',
url: 'data/json.json',
extraParams: {
one: 'one'
}
}
});
Ext.widget('button', {
renderTo: document.body,
text: 'Load Store',
handler: function () {
store.load();
}
});
Ext.widget('button', {
renderTo: document.body,
text: 'Set Params',
handler: function () {
store.getProxy().setExtraParam('one', 'two');
}
});
Ext.widget('button', {
renderTo: document.body,
text: 'Reload Store',
handler: function () {
store.reload();
}
});
The only problem am getting is that the extraparam does not get assigned the first time i click 'load->set params-> reload' based on firebug output. The extraparam 'one' always has the value 'one'. No matter how many times i click on set params-> reload.
I have to click load once again for the new values to be visible i.e.
Load->set params->reload->Load
Is this how it should behave really? The Reload alone should be able to show the new param values. I dont have to reclick load to see the new values.
Pls help. Thnx.
It's actually quite easy, just access the extraParams object in the proxy and change the attributes. Your example would be like this:
myshoporders_tree_store.getProxy().extraParams.order_no = order_no;
myshoporders_tree_store.reload();
Sorry, just found out my solution. I was using ext-debug-all.js which was causing all this. When i changed to ext-all, it seems all is ok now. Thanx for all who tried in helping.
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.
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.