Develop Reference

Extjs6 apply property from config via function

I used to write this in extjs4:
Ext.define('Superstore', {
extends: 'Ext.data.Store'
config : {
customer : null,
},
applyCustomer : function (value) {
this.customer = value;
},
model : 'Supermodel'
});
I tried the same in extjs6, but with no success:´
Ext.define('Supermodel', {
extend: 'Ext.data.Model',
requires: ['Ext.data.reader.Json', 'Ext.data.proxy.Rest'],
config: {
customer: null
},
fields: [
{name: 'id', type: 'string'},
...
],
proxy: {
type: 'rest',
url: '/customers/{customer}/users',
reader: {
type: 'json'
}
},
applyCustomer: function (value) {
this.customer = value;
this.proxy.url.replace('{customer}', value);
}
});
Did they remove the magic?
Or is there any other, better, way to build my url like in my code?
I've already seen a few solutions, but none of them fitted to my application.
I get the customerId via session which is sent by the backend after login. I would get the store via StoreManager, get the customer record and apply it to the proxy.
Thanks in advance.

If you don't need to manipulate the value use the update function instead:
updateCustomer: function(newValue){
this.proxy.url.replace('{customer}', newValue);
}
(And remove the applyCustomer function)

Setting LocalStorage store for nested list

I've created a localstorage store, and stored demo values in it following this tutorial:
http://sureshdotariya.blogspot.com/2013/03/understanding-local-storage-proxy-in.html
And it all works fine, I've viewed the store data in the resources in chrome and it is there, and when I load the page it loads fine, no errors, but it shows no data, here's my view code:
Ext.define('MyTest.view.SearchPanel', {
extend: 'Ext.Panel',
xtype: 'searchpanel',
config: {
layout: 'fit',
items: [
{
xtype: 'nestedlist',
title: 'Search Results',
displayField: 'Name',
store: {
storeId: 'UserStore',
fields: ['Name']
},
}]
}
});
What am I missing here? Can I use local storage store as the store for the nested list? And if yes then why it shows "No items found", I've added the store in app.js, I tried requiring it in this view but that did not work.
Your help is appreciated, thanks.

Ext.dataview.NestedList requires Ext.data.TreeStore instead of Ext.data.Store ( in the sample URL you gave ).
There are root, defaultRootProperty config required in Ext.data.TreeStore, and leaf property in items.
Of course you can set Ext.data.proxy.LocalStorage as proxy in Ext.data.TreeStore , try with these codes :
Ext.define('ListApp.model.User', {
extend: 'Ext.data.Model',
config: {
fields: [{
name: 'text',
type: 'string'
}]
}
});
Ext.define('App.store.User', {
config: {
model: 'ListApp.model.User',
defaultRootProperty: 'items',
root: data
proxy: {
type: 'localstorage',
id: 'UserInfo'
}
}
});

No values in ComboBox ExtJs

I am trying to implement combobox of extjs but im facing some problems. I have a html form that is divided into multiple tabs. The first tab has 3 dropdownlist that i have to populate from 3 different Mysql database tables. I wrote the back-end code and it is returning values i checked it in log but when i click on drop-down, it shows loading and nothing is there. I am fairly new with ExtJs. Here is my code:
First is model:
Ext.define('osFamilyModel', {
extend: 'Ext.data.Model',
fields: [
//{name: "osFamily"},
{name: 'os_description'}
]
});
Second comes store:
Ext.define('osFamilyStore', {
extend: 'Ext.data.Store',
model: 'osFamilyModel',
proxy: {
type: "ajax",
url: "<lp:resourceURL id='fetchOsFamily'/>",
timeout: 120000
}
});
The ComboBox:
Ext.create('Ext.form.field.ComboBox', {
id : 'editVmOsFamily',
width : fieldWidth,
renderTo : 'vmOsFamilyFieldContainer',
store : Ext.create('osFamilyStore'),
queryMode : 'remote',
valueField : 'os_description',
displayField : 'os_description',
baseCls : 'third_span'
});
what am i missing here?

EXTJS Accessing Setters

Ext.define("E.model.P", {
extend: 'Ext.data.Model',
associations: [{
type: 'hasOne',
model: 'E.model.D',
associationKey: 'D',
name:'demo',
getterName: 'getD', // avoid dots in function name
setterName: 'set' // avoid dots in function name
}],
fields: [
{ name: 'id', type: 'int' },
{ name: 'CPR', type: 'string' },
]
});
I have a Store created with the Model P
var store = Ext.create("E.store.MyP");
store.load(function() {
store.each(function(record) {
var info = {
data: Ext.encode(record.getData()),
allData: Ext.encode(record.getData(true)),
personData: Ext.encode(record.getD()) //Here i get the getD is not a function
};
console.log(info);
});
});
The problem I am having is getD is not a function, It will only work if I do not have classes define ex: Ext.define("P").
So how do I access the getD so I can drill further down?
This works http://jsfiddle.net/aqHdC/
Now when I start seperating the classes, It stops working and says can't find function

The associated model (in your example E.model.D) class must be loaded for the getter to be generated.
That means you need to require this class in your base model class definition (or, as you have found out, have all your classes in the same file).
For example:
Ext.define("E.model.P", {
extend: 'Ext.data.Model',
// here's for the class loader!
requires: [
'E.model.D'
],
// rest of your definition
});

How to store login credentials in localstorage

If got a sencha touch application, with a login form. For returning users, I would like to store the login credentials in the local storage.
User.js
App.models.User = Ext.regModel('User', {
fields: [
{
name: 'username',
type: 'string'
}, {
name: 'password',
type: 'string'
}
],
proxy: {
type: 'localstorage',
id: 'p2s-users'
}
});
Users.js
App.stores.users = new Ext.data.Store({
model: 'User',
autoLoad: true
});
Now I try to sync the form values with local storage, how can I do that, what's the activity flow for reading / getting it?
For reading I would do:
var model = new App.models.User();
users = App.stores.users.load();
if (users.data.length > 0 ) {
model = users.getAt(0);
} else {
App.stores.users.create();
}
form.load(model);
Writing:
form.model.set(form.data);
form.model.save();
App.stores.users.sync();
Somehow it looks too complicate to me (and it doesn't work anyway). How would you solve the problem?

First make sure your saving the models right. For example do this:
var model = new App.models.User();
model.data.username = 'theUser';
model.data.password = 'thePass';
model.save(); //the actual saving. Use chrome developer tools to see the local storage
Then load the model from the localstorage
users = App.stores.users.load();
model = users.getAt(0);
Check if the loaded model is OK and load that to the form with load(model)
The form could be like this:
new Ext.Application({
launch: function() {
new Ext.form.FormPanel({
id:'theForm',
fullscreen: true,
defaults: {
labelAlign: 'top',
labelWidth: 'auto',
},
items: [
{
id : 'userName',
name : 'username',
label: 'Email',
xtype: 'emailfield',
},
{
id : 'userPassword',
name: 'password',
label: 'Password',
xtype: 'passwordfield',
}
]
});
}
});
Then load the record like this Ext.getCmp('theForm').load(users.getAt(0));
To get the model from the form: Ext.getCmp('theForm').getRecord();

From a cursory look, it looks like a possible way to do it.
But, you should create model instances from the model manager, for instance:
Ext.ModelMgr.create({username: 'foo', password: 'bar'}, 'User');