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
Related
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.
I am using Ext.plugin.PullRefresh plugin which is working fine when I directly run my app on
the browser but when I build my production through sencha cmd 4.0 its duplicating my content whenever I pull to refesh.
I have already used idProperty on my model.
My Jsonp:
callback({"Message":"Success","Post":[{"id":"35","UserId":"faisalkhalid690","Content":"lol","Time":"2013-12-03 05:28:15"},{"id":"50","UserId":"faisalkhalid","Content":"asdfasdfasdf","Time":"2013-12-03 05:52:27"},{"id":"51","UserId":"faisalkhalid","Content":"sadfasdfasdf","Time":"2013-12-03 05:52:38"},{"id":"52","UserId":"faisalkhalid","Content":"holloa","Time":"2013-12-03 05:52:50"},{"id":"70","UserId":"faisalkhalid690","Content":"hello","Time":"2013-12-04 23:22:52"}]});
Model:
Ext.define('talkbag.model.Comments', {
extend: 'Ext.data.Model',
config: {
idProperty: 'id',
fields: [
{ name: 'id', type: 'auto' },
{ name: 'UserId', type: 'auto' },
{ name: 'Content', type: 'auto' },
{ name: 'Time', type: 'auto' }
]
}
});
Store:
Ext.define('talkbag.store.Comments', {
extend:'Ext.data.Store',
storeId:'Comments',
config:{
autoLoad: true,
model:'talkbag.model.Comments',
proxy: {
type: 'jsonp',
url : 'http://www.litemake.com/ViewComments.php?Pid='+talkbag.User.PostId,
reader: {
type: 'json',
rootProperty: 'Post'
}
}
}
});
View:
Ext.define('talkbag.view.ViewPost.ViewCommentDetail', {
extend:'Ext.Panel',
xtype:'ViewCommentDetail',
requires:['Ext.plugin.PullRefresh'],
extend:'Ext.Panel',
config:{
layout:'vbox',
items:
[{
xtype:'appbar',
},{
flex:1,
xtype:'list',
store:'Comments',
plugins: [
{
xclass: 'Ext.plugin.PullRefresh',
pullRefreshText: 'Pull down for new Comments',
}
],
disableSelection :true,
itemTpl:'<table><tr><td width="80px"><table align="center"><tr><td align="center"><img src="http://www.litemake.com/getPic.php?userId={UserId}" heigth="30px" width="30px"/></td></tr><tr><td style="font-size:0.6em">{UserId}</td></tr></table></td><td style="padding-left:20px"><table><tr><td style="font-size:0.7em; padding:0px 0px 5px 0px">{Content}</td></tr><tr><td style="font-size:0.5em">{Time}</td></tr></table></td></tr></table>',
}]
}
});
Have you added a requires for it? that is
requires:['Ext.plugin.PullRefresh']
or something like that?
I have also faced this type of duplicating record issue, In my case i have put an autogenerated id field in my json, like this way
{
"items": [
{
"id": 0,
"ContactName": "Aanitha Ps",
},
{
"id": 1,
"ContactName": "Aby",
}
]
}
and reference that id field in my model, i think sencha some times not taking model default id field.
I need to reassign extra param when load more even fire. But I dont have any idea
Here is my code
List.js
Ext.define('bluebutton.view.BlueButton.TestingList', {
extend: 'Ext.List',
xtype: 'testinglistcard',
requires: [
'Ext.field.Select',
'Ext.field.Search',
// 'bluebutton.view.BlueButton.MemberDetail',
'Ext.plugin.ListPaging',
'Ext.plugin.PullRefresh',
'Ext.dataview.Override'
],
config: {
styleHtmlContent: true,
scrollable: 'vertical',
indexBar: true,
singleSelect: true,
onItemDisclosure: true,
grouped: true,
variableHeights : false,
store : { xclass : 'bluebutton.store.BlueButton.Testing'},
itemHeight :100,
loadingText : 'loading',
id :'testinglist',
plugins: [
{ xclass: 'Ext.plugin.PullRefresh',
refreshFn: function() {
var transaction = Ext.ModelMgr.getModel('bluebutton.model.BlueButton.Testing');
var proxy = transaction.getProxy();
proxy.setExtraParam('refresh', 'true' );
Ext.getStore('testingstore').load();
},
},
{
xclass: 'Ext.plugin.ListPaging',
autoPaging: true,
loadNextPage: function() {
var transaction = Ext.ModelMgr.getModel('bluebutton.model.BlueButton.Testing');
var proxy = transaction.getProxy();
proxy.setExtraParam('refresh', );
Ext.getStore('testingstore').load();
}
},
],
masked: {
xtype: 'loadmask',
message: 'loading...'
}, // masked
emptyText: '<p class="no-search-results">No member record found matching that search</p>',
itemTpl: Ext.create(
'Ext.XTemplate',
'<div class="tweet-wrapper">',
'<table>',
'<tr>',
'<td>',
' <div class="tweet">',
' <h3>{invoiceId}</h3>',
' <h3>Name: {billNumber}</h3>',
' <h3>Point Avalaible : {invoiceDate} , Last Visited : {invoiceAmount}</h3>',
' </div>',
'</td>',
'</tr>',
'</table>',
'</div>'
),
},
});
Store.js
Ext.define('bluebutton.store.BlueButton.Testing', {
extend: "Ext.data.Store",
requires: ['bluebutton.model.BlueButton.Testing'],
config: {
grouper: {
groupFn: function (record) {
return record.get('invoiceId')[0];
}
},
model :'bluebutton.model.BlueButton.Testing',
storeId :'testingstore',
autoLoad: true,
pageSize: 5,
clearOnPageLoad: false,
}
});
Model.js
Ext.define('bluebutton.model.BlueButton.Testing', {
extend: 'Ext.data.Model',
config: {
idProperty: 'testingModel',
fields: [
{ name :'invoiceId'},
{ name: 'billNumber' },
{ name: 'invoiceDate' },
{ name: 'invoiceAmount' },
{ name :'downloadLink'},
{ name: 'refresh' },
],
proxy: {
type: 'rest',
url: 'http://192.168.251.108:8080/RESTFulExample/rest/json/metallica/invoicejsonPost',
reader: 'json',
actionMethods: {
create: 'POST',
read: 'GET',
update: 'PUT',
destroy: 'DELETE'
},
noCache: false, // get rid of the '_dc' url parameter
// extraParams: {
// userid: "test",
// // add as many as you need
// },
reader: {
type: 'json',
rootProperty: 'invoice'
},
writer: {
type: 'json',
},
}
}
});
I need to assign extra param "refresh" to true when i refresh the list. On the other hand, if the load more event fire i need to assign param refresh to false. Please give me solution. Thanks
I dont think you can do it the way you ask. But you can listen to the load event and change your refresh parameter there.
{
xtype: 'store',
//Your Code
listeners: {
load: function(store){
store.getProxy.setExtraParam('refresh', false);
}
}
}
Hope it helps
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.
The below configuration works on 4.07 but not 4.1.
On 4.1 i can see that my combo has 3 items. It just doesn't reader the displayField and valueField.
i'm using the mvc architecture.
In my view
{
xtype: 'combobox',
id: 'ProofRequired',
name: 'ProofRequired',
fieldLabel: 'Proof Required',
displayField: 'Name',
store: 'ProofRequired',
triggerAction: 'all',
queryMode: 'local',
valueField: 'Id'
},
in my app.js
stores: [ 'VarnishType'],
and my store
Ext.define('Mis.store.ProofRequired', { extend: 'Ext.data.Store',
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: true,
storeId: 'ProofRequired',
clearOnPageLoad: false,
data: [
{
Id: '1',
Name: 'Digital'
},
{
Id : '2',
Name : 'PDF'
},
{
Id : '3',
Name : 'Other'
}
],
proxy: {
type: 'ajax',
reader: {
type: 'array'
}
},
fields: [
{
Id: 'Id',
Name: 'Name'
}
]
}, cfg)]);
}
});
The below worked for me. I'm 100% sure why. I believe i need to put quotes around the field names.
Ext.define('Mis.store.ProofRequired', {
extend: 'Ext.data.Store',
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: true,
storeId: 'ProofRequired',
clearOnPageLoad: false,
fields: ['Id', 'Name'],
data : [
{"Id":"1", "Name":"Digital"},
{"Id":"2", "Name":"PDF"},
{"Id":"3", "Name":"Other"}
],
proxy: {
type: 'ajax',
reader: {
type: 'array'
}
}
}, cfg)]);
}
});