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.
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.
Ext.List does not fill with the data of store, only shows two lines of empty list item. When I debug with firebug, I saw store is filled with the information in json data but list items does not shown.
Store object
Ext.define('MyApp.store.ListStore', {
extend: 'Ext.data.Store',
autoLoad: true,
config:
{
model: 'MyApp.model.NewsData',
fields: [{ name: 'haberId', mapping: 'haberId' },
{ name: 'haberGonderen', mapping: 'haberGonderen' },
{ name: 'haberDetay', mapping: 'haberDetay' },
{ name: 'haberZaman', mapping: 'haberZaman'}]
},
proxy: {
id: 'ListStore',
access: 'public'
}});
News object
Ext.define('MyApp.model.NewsData', {
extend: "Ext.data.Model",
config: {
fields: [
'haberId',
'haberGonderen',
'haberDetay',
'haberZaman'
]
}});
List View
Ext.define('MyApp.view.ListTemplate', {
extend: 'Ext.List',
title: 'Haber Listesi',
store : 'ListStore',
fullscreen: true,
itemTpl : '{haberGonderen}'});
Anybody has any idea?
Try this. May be this helps you.
Store.js
Ext.define('MyApp.store.ListStore', {
extend: 'Ext.data.Store',
config:
{
autoLoad: true,
model: 'MyApp.model.NewsData',
proxy: {
id: 'ListStore',
access: 'public'
},
fields: [{ name: 'haberId', mapping: 'haberId' },
{ name: 'haberGonderen', mapping: 'haberGonderen' },
{ name: 'haberDetay', mapping: 'haberDetay' },
{ name: 'haberZaman', mapping: 'haberZaman'}]
}
});
ListTemplate.js
Ext.define('MyApp.view.ListTemplate', {
extend: 'Ext.List',
config: {
fullscreen: true,
title: 'Haber Listesi',
store : 'ListStore',
itemTpl : '{haberGonderen}'
}
});
I am trying to get some master data from server in JSON format and bind it to selectfield with the help of Store.
Find my code below
Model
Ext.define('Mobile.model.OrganizationModel', {
extend: 'Ext.data.Model',
config: {
fields: [
{ name: 'Name', type: 'string' },
{ name: 'Id', type: 'int' }
]
}
});
Store
Ext.define('Mobile.store.OrganizationStore', {
extend: 'Ext.data.Store',
model: 'Mobile.model.OrganizationModel',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'login/GetOrgList',
method: 'GET',
reader: {
type: 'json'
}
}
});
View
Ext.define("Mobile.view.LoginView", {
extend: "Ext.form.FormPanel",
alias: "widget.login",
id: 'loginFormPanel',
config: {
margin: '0 auto',
name: 'loginform',
frame: true,
url: 'login/Authenticate',
title: 'something',
items: [
{
xtype: 'fieldset',
itemId: 'LoginFieldset',
margin: '10 auto 0 auto ',
title: '',
items: [
{
xtype: 'selectfield',
label: 'Organization',
name: 'Organization',
store: 'OrganizationStore',
displayField: 'Name',
valueField: 'Id',
placeHolder: 'Select a Value'
}
]
},
]
}
});
APP.js
Ext.application({
name: "Mobile",
controllers: ["LoginController"],
views: ['LoginView', 'HomeView'],
models: ['UserModel', 'OrganizationModel'],
stores: ['OrganizationStore'],
launch: function () {
var loginPanel = Ext.create('Ext.Panel', {
layout: 'fit',
items: [
{
xtype: 'login'
}
]
});
Ext.Viewport.add(loginPanel);
}
});
JSON Data format is
[{"Id":1,"Name":"Company 1"},{"Id":2,"Name":"Company 2"},{"Id":3,"Name":"Company 3"}]
The problem is it is not sending request to server and loading JSON data and binds. Any idea about this issue?
update you store code to
Ext.define('Mobile.store.OrganizationStore', {
extend: 'Ext.data.Store',
config:{
model: 'Mobile.model.OrganizationModel',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'login/GetOrgList',
method: 'GET',
reader: {
type: 'json'
}
}
}
});
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