Sencha localStorage.getItem() returns null in model - sencha-touch-2

In my model, I have the following code:
Ext.define('Proximity.model.CandidateblocklistModel', {
extend: 'Ext.data.Model',
requires: ['Ext.data.proxy.LocalStorage'],
config: {
store:'Proximity.store.CandidateblockStore',
fields: [
{ name: 'id', type: 'id' },
{ name: 'name', type: 'string' },
{ name: 'img', type: 'string' },
{ name: 'designation', type: 'string' },
{ name: 'summary', type: 'string' },
{ name: 'experience', type: 'string' },
{ name: 'industry', type: 'string' },
{ name: 'functionnml', type: 'string' },
{ name: 'role', type: 'string' }
],
proxy : {
type : 'ajax',
url : Proximity.util.Config.getBaseUrl() + '/index.php/candidate/getcandidateblock',
withCredentials: false,
useDefaultXhrHeader: false,
extraParams: {
"id": localStorage.getItem('id')
},
reader : {
filters: [
Ext.create('Ext.util.Filter', {
property: 'name'
})
]
}
}
}
});
The id in the local storage is already set before calling this model. I can see the id in localStorage by inspect element in Chrome, and I did get the value of it in other section. But I only can't get it in my model when I am trying to use it in proxy. I want to get data from my web service based on the value of the localStorage.
Code in my proxy:
extraParams: {
"id": localStorage.getItem('id')
},
I want to get the id from localStorage here.
Please help me.

I think the following code works
proxy : {
type : 'ajax',
url : Proximity.util.Config.getBaseUrl() + '/index.php/candidate/getcandidatebest',
withCredentials: false,
useDefaultXhrHeader: false,
extraParams: {
id: localStorage.getItem('id')
},
reader : {
filters: [
Ext.create('Ext.util.Filter', {
property: 'ind_id',
property: 'fun_id',
property: 'role_id',
property: 'id'
})
]
}
}
and then use the filtering facility of store to pass the localstorage value. To do that give filter permission remoteFilter: true, this.

Ahh i found an awesome trick. Instate of setting extraParams in your Model, set it in the store of the same model.
My new code is as follows.
Ext.define('Proximity.model.RecruiterbestlistModel', {
extend: 'Ext.data.Model',
config: {
store:'Proximity.store.RecruiterbestStore',
fields: [
{ name: 'id', type: 'int' },
{ name: 'name', type: 'string' },
{ name: 'img', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'summary', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'industry', type: 'string' },
{ name: 'functionnml', type: 'string' },
{ name: 'role', type: 'string' }
],
proxy : {
type : 'ajax',
url : Proximity.util.Config.getBaseUrl() + '/index.php/recruiter/getrecruiterbest/',
withCredentials: false,
useDefaultXhrHeader: false,
reader : {
filters: [
Ext.create('Ext.util.Filter', {
property: 'ind_id',
property: 'fun_id',
property: 'role_id'
})
]
}
}
}
});
Look i have removed the code
extraParams: {
"id": localStorage.getItem('id')
},
from Model. And in my store i have added
listeners: {
beforeload: function(store){
this.getProxy().setExtraParams({
id: localStorage.getItem('id')
});
return true;
},
So my new store code is as follows
Ext.define('Proximity.store.RecruiterbestStore', {
extend: 'Ext.data.Store',
alias: 'store.recruiterbeststore',
config: {
model: 'Proximity.model.RecruiterbestlistModel',
autoLoad: true,
remoteFilter: true,
storeId: 'recruiterbeststore'
},
listeners: {
beforeload: function(store){
this.getProxy().setExtraParams({
id: localStorage.getItem('id')
});
return true;
}
}
});
And its solved my problem.
But now i am having another issue. after running sencha app build native(using cordova bild), again i am having same issue, the extraParam are not added to proxy request.
Please help me to solve this.

Related

vue good table - 3 requests to the service

I use vue-good-table object to render table in Vue.js. I use paging and sorting serverside.
My code:
<vue-good-table v-if="authorizations"
id="AuthorizationsTable"
ref="refToAuthorizationsTable"
#on-page-change="onPageChange"
#on-sort-change="onSortChange"
#on-column-filter="onColumnFilter"
#on-per-page-change="onPerPageChange"
mode="remote"
:columns="columns"
:rows="authorizations"
:totalRows="totalRecords"
:pagination-options="{
enabled: true,
mode: 'pages',
nextLabel: 'następna',
prevLabel: 'poprzednia',
ofLabel: 'z',
pageLabel: 'strona',
rowsPerPageLabel: 'wierszy na stronie',
allLabel: 'wszystko',
dropdownAllowAll: false
}"
:sort-options="{
enabled: true,
initialSortBy: {
field: 'id',
type: 'asc'
}
}">
(...)
export default {
name: 'AuthoritiesAdministration',
components: {},
data() {
return {
totalRecords: 0,
serverParams: {
columnFilters: {},
sort: {
field: 'id',
type: 'asc'
},
page: 1,
perPage: 10
},
rows: [],
columns: [
{
label: 'ID',
field: 'id',
type: 'number',
tdClass: 'vue-good-table-col-100'
},
{
label: 'Data wystawienia',
field: 'issueDate',
formatFn: this.formatDate,
tdClass: 'vue-good-table-col-200',
},
{
label: 'Nazwa operatora',
field: 'operator',
sortable: true,
formatFn: this.formatOperatorName,
},
{
label: 'Login',
field: 'operator.login'
},
{
label: 'Spółka',
field: 'company.description',
type: 'text',
},
{
label: 'Data ważności',
field: 'endDate',
type: 'text',
formatFn: this.formatDate,
},
{
label: 'Akcje',
field: 'btn',
tdClass: 'vue-good-table-col-250',
sortable: false
}
],
}
},
(...)
methods: {
updateParams(newProps) {
this.serverParams = Object.assign({}, this.serverParams, newProps);
},
onPageChange(params) {
this.updateParams({page: params.currentPage});
this.loadAuthorizations();
},
onPerPageChange(params) {
this.updateParams({
perPage: params.currentPerPage
});
this.loadAuthorizations();
},
onSortChange(params) {
this.updateParams({
sort: {
type: params[0].type,
field: params[0].field
}
});
this.loadAuthorizations();
},
onColumnFilter(params) {
this.updateParams(params);
this.loadAuthorizations();
},
loadAuthorizations() {
getAllAuthorizationsLightWithPagination(this.$store.getters.loggedUser.token, this.serverParams).then(response => {
this.totalRecords = response.data.totalRecords;
this.rows = response.data.authorizations;
}).catch(err => {
this.$showError(err, true);
});
},
I have noticed that there are sent 3 requests to the server instead of 1: there are called methods like onPageChange, onPerPageChange and onSortChange but only the first time when my page is loaded. It is unnecessary. I have one method in "mounted" section where I load the first 10 results (sorting and paging by default). It's common, well-known problem with vue-good-table? Or maybe should I add an additional flag to not to invoke these 3 methods unnecessarily when the page is loaded?
Your onSortChange method is called at the table loading because you made a initialSortBy with specific values. To remove this calling juste remove
initialSortBy: {
field: 'id',
type: 'asc'
}
from you table configuration, but your sort will not be set, so I think this should be a legit function call.
The onPerPageChange and onPageChange are triggered by the config below
:pagination-options="{
enabled: true,
...
}
just remove the colon before pagination-options to have a config like this
pagination-options="{
enabled: true,
...
}

JSON-SCHEMA arbitrary names on top level

I'm using json-schema with a nodeJs backend called 'feathers-plus' which validate data using popular ajv.
I've got two objects -> ObjectA & ObjectB where ObjectA is the parent.
ObjectA contain a collection of ObjectB that have arbitrary names defined by patternProperties and which is objects:
exchanges: {
type: 'object',
patternProperties: {
"^[A-Za-z]+$": {
type: 'object'
}
},
additionalProperties: false
},
ObjectB (which is an exchange in my case) start with this arbitrary key name on top-level and then contain itself more properties (on second level and so on).
The problem is I don't know how to define these arbitrary keys names. I know how to define it on second level and more deeply using the example above for exchanges. But on top, I suppose I can't write something like this:
"^[A-Za-z]+$": {
type: 'object'
}
With feathers-plus, we can separate our logical objects in services. In my case here, the top service is called "configs" and the child one "exchanges".
Any help would be grateful.
Thanks!
EDIT: as requested, I post my current schemas for both objects:
Parent ObjectA ->
let schema = {
title: 'Configs',
description: 'Configs database.',
required: [
'name',
'bot',
'GUI',
'ws',
'createdAt',
'updatedAt'
],
uniqueItemProperties: [
],
properties: {
id: { type: 'ID' },
name: {},
pairs: {
type: 'object',
patternProperties: {
"^[A-Za-z]+$": {
type: 'object'
}
},
additionalProperties: false
},
// THIS IS THE CONTAINER FOR EXCHANGES OBJECTS
exchanges: {
type: 'object',
patternProperties: {
"^[A-Za-z]+$": {
type: 'object'
}
},
additionalProperties: false
},
// END
bot: {
type: 'object',
properties: {
debug: { type: 'boolean' },
gui: { type: 'boolean' },
period_storage_ticker: { type: 'number' },
interval_ticker_update: { type: 'number' },
timeout_buy: { type: 'number' },
timeout_sell: { type: 'number' },
WATCH_MODE: { type: 'boolean' },
TELEGRAM_ENABLED: { type: 'boolean' },
TELEGRAM_NICK: {},
TOKEN: {},
chat_id: { type: 'number' }
},
required: [
'debug',
'gui',
'period_storage_ticker',
'interval_ticker_update',
'timeout_buy',
'timeout_sell',
'WATCH_MODE',
'TELEGRAM_ENABLED',
'TELEGRAM_NICK',
'TOKEN',
'chat_id'
]
},
GUI: {
type: 'object',
properties: {
enabled: { type: 'boolean' },
start: { type: 'boolean' },
port: { type: 'number' },
https: { type: 'boolean' },
key: {},
cert: {},
networktraffic: { type: 'boolean' },
authentication: {
type: 'object',
properties: {
login: { type: 'boolean' },
twoFA: { type: 'boolean' }
},
required: [
'login',
'twoFA'
]
},
notifications: {
type: 'object',
properties: {
trade: { type: 'boolean' },
callback: { type: 'boolean' },
error: { type: 'boolean' }
},
required: [
'trade',
'callback',
'error'
]
}
},
required: [
'enabled',
'start',
'port',
'https',
'key',
'cert',
'networktraffic',
'authentication',
'notifications'
]
},
ws: {
type: 'object',
properties: {
port: { type: 'number' },
clientport: { type: 'number' },
hostname: {}
},
required: [
'port',
'clientport',
'hostname'
]
}
createdAt: {},
updatedAt: {}
}
}
Child ObjectB ->
let schema = {
title: 'Exchanges',
description: 'Exchanges database.',
// MY CURRENT EDIT (NOT WORKING)
type: 'object',
patternProperties: {
"^[A-Za-z]+$": { type: 'boolean' }
},
additionalProperties: false,
// END
required: [
],
uniqueItemProperties: [
],
properties: {
},
}
If I'm making a request and try to pass anything, it works and validation is not made. The same patternProperties set on a deeper level have no problem at all and is validated correctly.

How to load localstorage data in list view in sencha touch?

How to load localstorage data in list view in sencha touch?
I have my model:
Ext.define('SenchaWebWorker.model.tweetsModel', {
extend: 'Ext.data.Model',
requires:['Ext.data.proxy.LocalStorage'],
config: {
fields: [
{ name: 'id', type: 'string' },
{ name: 'text', type: 'string' },
{ name: 'date', type: 'string' },
{ name: 'uname', type: 'string' },
{ name: 'uid', type: 'string' },
{ name: 'uimgurl', type: 'string' }
],
proxy: {
type: 'localstorage',
id : '_tweetStore'
}
}});
and my store:
Ext.define('SenchaWebWorker.store.tweetStore', {
extend: "Ext.data.Store",
config: {
storeId: '_tweetStore',
model: 'SenchaWebWorker.model.tweetsModel',
autoLoad:true
}});
please give me some example if possibel.
Thanks.
It's very easy to do, just simply reference your store in the config object of your list, i.e:
Ext.define('MyApp.view.MyList', {
extend: 'Ext.dataview.List',
xtype: 'MyList',
config: {
store : 'MyStore',
itemTpl : document.getElementById('tpl_my_list').innerHTML
}
});
All you need to do is set store property of list to _tweetStore
Ext.define('SenchaWebWorker.view.tweetsList', {
extend: 'Ext.List',
xtype: 'tweetlist',
config: {
store:'_tweetStore',
scrollable:true,
scrollToTopOnRefresh:true,
deselectOnContainerClick:true,
............
............
}
});
Since you have autoLoad set to true, no need to explicitly load store data.

Loading associated data in Sencha Touch without nesting

I'm working on a basic Sencha Touch application that displays a list of text messages and the name of an associated user that sent the message. I have followed the tutorials online on how to setup model associations but each tutorial assumes that the server produces data with a nested structure.
The data I am working with has a flat structure with primary/foreign key relationships, and I cannot figure out how to get Sencha to load both stores from a single response.
model/User.js
Ext.define('App.model.User', {
extend: 'Ext.data.Model',
config: {
fields: [
{ name: 'uid', type: 'number' },
{ name: 'name', type: 'string' },
]
}
});
store/Users.js
Ext.define('App.store.Users', {
extend: 'Ext.data.Store',
config: {
model: 'App.model.User',
autoLoad: true,
}
});
model/Message.js
Ext.define('App.model.Message', {
extend: 'Ext.data.Model',
config: {
fields: [
{ name: 'id', type: 'number' },
{ name: 'uid', type: 'number' },
{ name: 'message', type: 'string' }
],
associations: [{
type: 'belongsTo',
model: 'App.model.User',
primaryKey: 'uid',
foreignKey: 'uid'
}],
proxy: {
type: 'jsonp',
url: 'messages.json',
reader: {
type: 'json',
rootProperty: 'req_messages'
}
}
}
});
store/Messages.js
Ext.define('App.store.Messages', {
extend: 'Ext.data.Store',
config: {
model: 'App.model.Message',
autoLoad: true,
}
});
The messages are correctly loaded and displayed by my application (sample JSON response below), but I cannot figure out how to get the associated users to be loaded into the store. Can this be solved with a configuration, or will I need a custom reader? Any help appreciated!
Sample JSON
{
"users": [{
"uid": "1",
"name": "John"
}, {
"uid": "3033",
"name": "Noah"
}],
"req_messages": [{
"id": "539",
"uid": "1",
"message": "my message"
}, {
"id": "538",
"uid": "1",
"message": "whoops"
}, {
"id": "534",
"uid": "3033",
"message": "I love pandas."
}]
}
I've never really worked with associations and I went through the document to try to find something that would load two stores with on request, but I couldn't find anything. So here's how I would do it :
Model
Ext.define('App.model.User', {
extend: 'Ext.data.Model',
config: {
fields: [
'uid',
'name'
]
}
});
Ext.define('App.model.Message', {
extend: 'Ext.data.Model',
config: {
fields: [
'id',
'message',
'uid'
],
associations: { type: 'hasOne', model: 'User', primaryKey: 'uid', foreignKey: 'uid'}
}
});
Stores
Ext.define('App.store.Users', {
extend: 'Ext.data.Store',
config: {
model: 'App.model.User',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'http://www.titouanvanbelle.fr/test.json',
reader: {
type: 'json',
rootProperty: 'users'
}
},
listeners:{
load:function(s,r,success,op){
var msgs = JSON.parse(op.getResponse().responseText).req_messages;
Ext.each(msgs, function(msg) {
Ext.getStore('Messages').add(Ext.create('App.model.Message',msg));
});
}
}
}
});
Ext.define('App.store.Messages', {
extend: 'Ext.data.Store',
config: {
model: 'App.model.Message'
}
});
List
Ext.define("App.view.Main", {
extend: 'Ext.Panel',
config: {
fullscreen: true,
layout:'fit',
items: [{
xtype:'list',
store:'Messages',
itemTpl: new Ext.XTemplate(
'<tpl for=".">',
'{[this.getUserName(values)]} : {message}',
'</tpl>',
{
getUserName(v){
var s = Ext.getStore('Users'),
u = s.getAt(s.find('uid',v.uid));
return u.get('name');
}
}
)
}]
}
});
And you'd get something like this :
Hope this helps. If you need explanation, let me know.

Ext.Ajax.request Sencha Touch

I want to make a simple request like Ext.Ajax.request and display it in a list. But it does not work.
I have a URL like this
http://server/GetContacts.aspx?CustAccount=10019
Can someone tell me exactly how it works and what I should consider?
This is an example of what I get back.
{
"HasError": false,
"ErrorString": "",
"Data": [
{"ContactPersonId":"","Name":"","FirstName":"","MiddleName":"","LastName":"","Phone":"","CellularPhone":"","Telefax":"","Email":"","Url":"","Address":"","ZipCode":"","City":"","Street":"","Country":"","Function":""}
]
}
Ext.regModel('kunden', {
idProperty: 'id',
fields: [
{ name: 'ContactPersonId', type: 'string' },
.
.
.
{ name: 'Function', type: 'string' }
]
});
Ext.regStore('kundenStore', {
model: 'kunden',
sorters: [{
property: 'LastName'
}],
proxy: {
type: 'ajax',
url: 'http://server/GetContacts.aspx?CustAccount=10019'
},
reader: {
type: 'json',
root: 'Data'
}
});
NotesApp.views.kundenList = new Ext.List({
id: 'kundenList',
store: 'kundenStore',
grouped: true,
indexBar : true,
itemTpl: '<div class="list-item-title">{firstname} {lastname}</div>' +'<div class="list-item-narrative">{email}</div>',
listeners: {}
}
});
It can be so easily XP