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
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,
...
}
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?
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.
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.
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