Sencha touch get data from json - javascript

Recently I try to get data from json file with using sencha touch but its showing 0 result, Please refer below coding and tell me about my mistake,
Thanks,
app.js
Ext.application({
name: 'TP',
views: [
'Main'
],
models: [
'User'
],
stores: [
'Users'
],
launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
// Initialize the main view
Ext.Viewport.add(Ext.create('TP.view.Main'));
var user = Ext.create('TP.model.User', {
name: 'James Henry',
age: 24,
phone: '555-555-5555',
username: 'Admin'
});
Ext.getStore('Users').on('load', this.onStoreLoad, this);
console.log(Ext.getStore('Users'));
},
onStoreLoad: function(self, records, success, operation){
console.log(self);
}
});
Model :: User.js
Ext.define('TP.model.User',{
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'name', type: 'string'},
{name: 'age', type: 'int'},
{name: 'phone', type: 'string'},
{name: 'gender', type: 'string'},
{name: 'username', type: 'string'},
{name: 'alive', type: 'boolean', defaultValue: true}
],
validations: [
{type: 'presence', field: 'age'},
{type: 'length', field: 'name', min: 2},
{type: 'inclusion', field: 'gender', list: ['Male', 'Female']},
{type: 'exclusion', field: 'username', list: ['Admin', 'Operator']},
{type: 'format', field: 'username', matcher: /^[A-Za-z0-9 _]*$/ }
],
},
ageString: function(){
var age = this.get('age');
if(age > 1) {
return age + " yesrs old";
}else{
return age = " Yes old";
}
}
});
Store :: Users.js
Ext.define('TP.store.Users', {
extend: 'Ext.data.Store',
config: {
model: 'TP.model.User',
autoload: true,
proxy: {
type: 'ajax',
url: 'http://localhost/sencha/SenchaStarter/data/users.json',
reader: {
rootProperty: 'users',
type: 'json'
}
}
}
});
JSON file users.json
{
"users": [
{
"name": "Mike Henderson",
"age": 24,
"phone": "555-555-555",
"gender": "Male",
"username": "mhenderson",
"alive": true
},
{
"name": "Sally Michael",
"age": 34,
"phone": "555-555-555",
"gender": "Female",
"username": "sallym",
"alive": true
},
{
"name": "Rory Muldoon",
"age": 19,
"phone": "555-555-555",
"gender": "Male",
"username": "greatscott",
"alive": true
}
]
}

The store isn't loading because you haven't loaded it yet. The reason is a typo as you wrote this config option in your store:
autoload
when it needs to be:
autoLoad

The proxy of your store is set to ajax. It won't save the records. I believe that you will only have access to the records in the onStoreLoad in app.js.
You could perhaps(now this is just a theory) set the ajax proxy in your model(this I am sure that you can do and is recommended by sencha because you can then override this proxy with the store proxy when needed http://www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-2/) then save the records in the store, because i believe that a store proxy type by default is localstorage.
Good luck :)

Related

How to map values from nested Typescript object to properties of JSON object

In a project that I'm working on, we're using the Angular library called formly to create our forms dynamically.
Currently, the form configuration is hardcoded as a Typescript object called mockForm. All of the properties in mockForm are hardcoded besides the options property in objects whose type property equals 'select':
mockForm
export const mockForm = {
name: 'root',
subSections: [
{
name: 'Client',
subSections: [
{
name: 'Contact Information'
},
{
name: 'Insurance Information'
}
]
},
{
name: 'Sales',
subSections: [
{
name: 'Overview',
subSections: [
{
name: 'Overview - A',
fields: [
{
key: 'fieldA1',
type: 'input',
templateOptions: {
label: 'A1',
required: true
}
},
{
key: 'fieldA2',
type: 'select',
templateOptions: {
label: 'A2',
required: true,
options: []
}
}
]
},
{
name: 'Overview - B',
fields: [
{
key: 'fieldB1',
type: 'input',
templateOptions: {
label: 'B1',
required: false
}
},
{
key: 'fieldB2',
type: 'select',
templateOptions: {
label: 'B2',
required: false,
options: []
}
}
]
}
]
}
]
}
]
};
I would like to populate the options property by using an API called which returns the following object:
API return
{
"multi_value_fields": {
"fieldA2": [
"froodian#outlook.com",
"gastown#sbcglobal.net",
"dgriffith#me.com",
"maradine#live.com",
"samavati#icloud.com",
"naupa#comcast.net"
],
"fieldB2": [
"<3m",
"<6m",
"<9m",
"<12m",
"+12m",
"N/A"
]
}
}
The object returned from the API call returns a JSON whose properties are the key values from mockForm whose property type equals 'select'; and the values of these JSON properties represent the dropdown options of the form.
The intended outcome should be the following:
export const mockForm = {
name: 'root',
subSections: [
{
name: 'Client',
subSections: [
{
name: 'Contact Information'
},
{
name: 'Insurance Information'
}
]
},
{
name: 'Sales',
subSections: [
{
name: 'Overview',
subSections: [
{
name: 'Overview - A',
fields: [
{
key: 'fieldA1',
type: 'input',
templateOptions: {
label: 'A1',
required: true
}
},
{
key: 'fieldA2',
type: 'select',
templateOptions: {
label: 'A2',
required: true,
options: [
"froodian#outlook.com",
"gastown#sbcglobal.net",
"dgriffith#me.com",
"maradine#live.com",
"samavati#icloud.com",
"naupa#comcast.net"
]
}
}
]
},
{
name: 'Overview - B',
fields: [
{
key: 'fieldB1',
type: 'input',
templateOptions: {
label: 'B1',
required: false
}
},
{
key: 'fieldB2',
type: 'select',
templateOptions: {
label: 'B2',
required: false,
options: [
"<3m",
"<6m",
"<9m",
"<12m",
"+12m",
"N/A"
]
}
}
]
}
]
}
]
}
]
};
I haven't experienced a scenario like this, and I'm not so sure on how to approach this (Should I start with the JSON properties and map back to mockForm? Would I need to manually iterate through mockForm in order to populate from the API call?)
your JSON mockForm is very typical.
If it remains the same then you must manually iterate over the bottom leaf i.e., mokeForm.subSections[1].subSections and then loop there to match the label & type.
Otherwise, you need to write parse which iterates all over mokeForm JSON & assign required options are respective places.

Sencha touch Selectfield picker not showing correct selection

Store of the selectfield contains same word with different case like Ed & ed.When we select ed,In the picker it is showing Ed.
Code:
Ext.create('Ext.form.Panel', {
fullscreen: true,
items: [
{
xtype: 'fieldset',
title: 'Select',
items: [
{
xtype: 'selectfield',
label: 'Choose one',
displayField:'firstName',
valueField:'firstName',
store:Ext.create("Ext.data.Store", {
fields: [
{name: 'firstName', type: 'string'},
],
data : [
{firstName: "Ed"},
{firstName: "ed"},
{firstName: "Tommy"},
{firstName: "Aaron"},
{firstName: "Jamie"}
]
})
}
]
}
]
});
Fiddle for the problem
In Sencha, the selectfield is somethings whose value doesn't distinguish between the caps and small letter. So, it has provided valuefield. If you create your store like this below, you will get the expected result:
store: Ext.create("Ext.data.Store", {
fields: [{
name: 'firstName',
type: 'string'
}, {
name: 'value',
type: 'string'
}],
data: [{
firstName: "Ed",
value: 'edCaps'
}, {
firstName: "ed",
value: 'edSmall'
}, {
firstName: "Tommy",
value: 'tommy'
}, {
firstName: "Aaron",
value: 'aaron'
}, {
firstName: "Jamie",
value: 'jamie'
}]
})
Here is fiddle also. Happy coding! :)

Sencha Touch2: Display nested Json data in seperate row in list

I am new to sencha touch2, facing problem while displaying nested json data in seperate rows in list.
Here is my Json looks like:
[
{
"work": {
"agent": {
"activeFlag": "false",
"shiftId": "0",
"id": "0",
"deleteFlag": "false"
},
"id": "124",
"status": "Unassigned",
"assignment": {
"pnr": {
"locator": "ABCDEF",
"connectTime": "0",
"id": "0"
},
"id": "123",
"alerts": "Delay",
"customers": [
{
"lastName": "XYZ",
"firstName": "MNO"
},
{
"lastName": "PQR",
"firstName": "STU "
}
]
}
}
},
{
"work": {
"agent": {
"activeFlag": "false",
"shiftId": "0",
"id": "0",
"deleteFlag": "false"
},
"id": "124",
"status": "Unassigned",
"assignment": {
"pnr": {
"locator": "ABCDEF",
"connectTime": "0",
"id": "0"
},
"id": "123",
"alerts": "Delay",
"customers": [
{
"lastName": "ANY",
"firstName": "KLJ"
},
{
"lastName": "CHE",
"firstName": "MAK"
}
]
}
}
}
]
like this i have 30 'work' objects and in 1 'work' i have 1 'customers' array and i have multiple customers inside
I want to show 'customers' in seperate rows in list but am able to show all the customers of single 'work' in one row like.
Output should be:
---------------
delay
First Name: MNO
---------------
delay
First Name: STU
---------------
delay
First Name: KLJ
---------------
delay
First Name: MAK
---------------
here are models.
ModelList.js:
Ext.define('CustomList.model.ModelList', {
extend: 'Ext.data.Model',
xtype:'modelList',
requires:['CustomList.model.Customers'],
config: {
fields:['work'],
proxy:{
type:'ajax',
url:'http://localhost:9091/CustomListJson/app/store/sample.json',
reader:{
type:'json'
}
},
hasMany:{model:'CustomList.model.Customers',
name:'customers'}
}
});
Customers.js:
Ext.define('CustomList.model.Customers', {
extend: 'Ext.data.Model',
config: {
fields: [
'firstName','lastName'
],
belongsTo: "CustomList.model.ModelList"
}
});
Here is my ShowList.js:
Ext.define('CustomList.view.ShowList',{
extend:'Ext.Panel',
xtype:'showList',
config:{
layout:'fit',
styleHtmlContent:'true',
styleHtmlCls:'showListCls',
items:[
{
xtype:'list',
id: 'listitems',
store:'StoreList',
itemTpl:[ '{work.assignment.alerts}<br>',
'<tpl for="work.assignment.customers">',
'firstName: {firstName}<br>',
'</tpl>'
]
// am able get the below values in list
// itemTpl:'{work.assignment.alerts}'
// itemTpl:'{work.assignment.pnr.locator}'
// itemTpl:'{work.agent.activeFlag}'
// itemTpl: '<b>{firstName} {lastName} </b><br>'+'pnr: '+ '{locator} <br>' +
// 'Alerts: '+'{alerts}' +'status: '+'{status} '
}]
}
});
Here is my StoreList.js:
Ext.define('CustomList.store.StoreList', {
extend:'Ext.data.Store',
requires:['Ext.data.reader.Json'],
config:{
model:'CustomList.model.ModelList',
autoLoad:'true'
}
});
Can anyone please help me. Thanks.
Is this what you were after?
download here
This is a really simple mock up but it should help you out, I think you're model associations are confusing things.
List:
Ext.define('MyApp.view.MyList', {
extend: 'Ext.dataview.List',
config: {
store: 'MyJsonStore',
itemTpl: [
'<div><div><h1>{work.assignment.alerts}</h1></div><tpl for="work.assignment.customers"><div>First Name: {firstName}</div></tpl></div>'
]
}
});
store:
Ext.define('MyApp.store.MyJsonStore', {
extend: 'Ext.data.Store',
config: {
data: [
{
work: {
agent: {
activeFlag: 'false',
shiftId: '0',
id: '0',
deleteFlag: 'false'
},
id: '124',
status: 'Unassigned',
assignment: {
pnr: {
locator: 'ABCDEF',
connectTime: '0',
id: '0'
},
id: '123',
alerts: 'Delay',
customers: [
{
lastName: 'XYZ',
firstName: 'MNO'
},
{
lastName: 'PQR',
firstName: 'STU '
}
]
}
}
},
{
work: {
agent: {
activeFlag: 'false',
shiftId: '0',
id: '0',
deleteFlag: 'false'
},
id: '124',
status: 'Unassigned',
assignment: {
pnr: {
locator: 'ABCDEF',
connectTime: '0',
id: '0'
},
id: '123',
alerts: 'Delay',
customers: [
{
lastName: 'ANY',
firstName: 'KLJ'
},
{
lastName: 'CHE',
firstName: 'MAK'
}
]
}
}
}
],
storeId: 'MyJsonStore',
proxy: {
type: 'ajax',
reader: {
type: 'json'
}
},
fields: [
{
name: 'work'
}
]
}
});
If you get the config working like I have then you can gradually add in your models and associations, as-well as your ajax loading, testing all the way, this should help you to discover what the issue is.
Also, you might want to consider using tools like Json Lint when your working with JSON data, the original JSON blob you posted was difficult to read and badly formatted, all of which makes developing more difficult.

Extend from custom model class in ExtJS 4

How to extend from custom model in extjs.
Is there any method which can directly club the fields of User and BusinessUser fields when I'll refer the fields from BusinessUser class in example below.
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', type: 'string'},
{name: 'age', type: 'int'},
{name: 'phone', type: 'string'},
{name: 'alive', type: 'boolean', defaultValue: true}
],
});
Ext.define('BusinessUser', {
extend: 'User',
fields: [
{name: 'businessType', type: 'string'},
{name: 'company', type: 'string'}
],
});
You don't need to join the fields manually because it's done automatically. Check the outputs in the code bellow based on your question:
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', type: 'string'},
{name: 'age', type: 'int'},
{name: 'phone', type: 'string'},
{name: 'alive', type: 'boolean', defaultValue: true}
],
});
Ext.define('BusinessUser', {
extend: 'User',
fields: [
{name: 'businessType', type: 'string'},
{name: 'company', type: 'string'}
],
});
// instantiating a User object
var u = Ext.create('BusinessUser', {
name: 'John Doe',
age: 30,
phone: '555-5555'
});
// instantiating a BusinessUser object
var bu = Ext.create('BusinessUser', {
name: 'Jane Doe',
age: 40,
phone: '555-5556',
businessType: 'analyst',
company: 'ACME'
});
console.log(Ext.getClassName(bu)); // "BusinessUser"
console.log(Ext.getClassName(u)); // "User"
console.log(u instanceof User); // true
console.log(bu instanceof User); // true
console.log(u instanceof BusinessUser); // false
console.log(bu instanceof BusinessUser); // true
console.log(u instanceof Ext.data.Model); // true
console.log(bu instanceof Ext.data.Model); // true
console.log(u instanceof Ext.data.Store); // false, just to check if it's not returning true for anything
console.log(bu instanceof Ext.data.Store); // false
console.log("name" in u.data); // true
console.log("name" in bu.data); // true
console.log("company" in u.data); // false
console.log("company" in bu.data); // true
Although it should work automatically, use the below if you are having troubles for some reason.
Use the constructor to join the fields:
Ext.define('BusinessUser', {
extend : 'User',
constructor : function(){
this.callParent(arguments);
this.fields.push([
{name: 'businessType', type: 'string'},
{name: 'company', type: 'string'}
]);
}
});

How to sort ArrayStore?

I have a object:
store: Ext.create('Ext.data.ArrayStore',{
sortInfo: { field: "uniq_users", direction: "DESC" },
fields: [
{name: 'Country', type: 'string'},
{name: 'uniq_users', type:'int'}],
data: [{Country: 'Ed', users: 'Spencer'}]
})
store.loadData(...)
Why default sort don't work for field ?
The sortInfo property is available for ExtJS 3.x and not for the latest version. With release of version 4, the sorting is implemented through the mixin Ext.util.Sortable. You should be using the property sorters to define your sorting parameters..
Here is what you should be doing:
store: Ext.create('Ext.data.ArrayStore',{
sorters: [
{property : 'uniq_users',direction: 'DESC'}
],
fields: [
{name: 'Country', type: 'string'},
{name: 'uniq_users', type:'int'}
],
data: [{Country: 'Ed', users: 'Spencer'}]
});
store.loadData(...);

Categories