Is it possible to use the List Paging Plugin in a Nested List? When I place the code directly, the app won't work anymore.
My Code:
requires: ['Ext.field.Search','Ext.Toolbar','Ext.plugin.ListPaging'],
config: {
store: 'CatalogStore',
plugins: [
{
xclass: "Ext.plugin.ListPaging",
autoPaging: true
}
],
My Store :
Ext.define('Catalog_Demo.store.CatalogStore', {
extend: 'Ext.data.TreeStore',
requires: ['Catalog_Demo.model.CatalogModel'],
config :{
model: 'Catalog_Demo.model.CatalogModel',
proxy: {
type: 'ajax',
url: 'enter code hereosc_demo.php',
reader:{
type: 'json',
rootProperty: 'categories'
}
},
pageSize: 2,
autoLoad: true,
}
});
It shows the following error
Uncaught TypeError: Cannot call method 'getScroller' of undefined
ListPaging.js:114
Is there a reason?
You have to place the plugins config in the listConfig of your nestedList. So the code snippet you posted would turn into something like this:
requires: ['Ext.field.Search','Ext.Toolbar','Ext.plugin.ListPaging'],
config: {
store: 'CatalogStore',
listConfig: {
plugins: [
{
xclass: "Ext.plugin.ListPaging",
autoPaging: true
}
],
}
}
Related
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 created a very simple model in Sencha Touch inside the model folder:
Ext.define('Vegetable',{
extend:'Ext.data.Model',
config:{
fields:
[
{name:'title', type:'string'}
]
}
});
When I try to refer to the model inside my Main.js file it says the model does not exist.
items: [
{
xtype:'list',
title:'Home',
iconCls:'home',
store:{
model:'**VegetableTreeSenchaTouch.model.Vegetable**',
proxy:{
type:'ajax',
url:'http://vegetablegardening.com/vegetable/catalog/23',
reader:{
type:'json',
}
},
autoLoad:true
}
}
]
}
UPDATED: app.js
views:['Main'],
stores:['Vegetables'],
models:['Vegetable'],
UPDATED: Vegetables (store)
Ext.define('VegetableTreeSenchaTouch.store.Vegetables',{
extends:'Ext.data.Store',
config:{
model:'VegetableTreeSenchaTouch.model.Vegetable',
data:[
{ title: 'Onion' },
{ title: 'Potato' }
]
}
});
Any ideas?
Define the proxy in your store:
Ext.define('VegetableTreeSenchaTouch.store.Vegetables', {
extend: 'Ext.data.Store',
config: {
model: 'VegetableTreeSenchaTouch.model.Vegetable',
proxy: {
type: 'ajax',
url: 'http://vegetablegardening.com/vegetable/catalog/23',
reader: {
type: 'json',
}
}
},
//...
});
and use an instance of the store:
{
xtype: 'list',
title: 'Home',
iconCls: 'home',
store: 'Vegetables'
}
Try naming your store and model with an extended name.
Ext.define('VegetableTreeSenchaTouch.model.Vegetable',{
extend:'Ext.data.Model',
and:
Ext.define('VegetableTreeSenchaTouch.store.Vegetables',{
extends:'Ext.data.Store',
config:{
model:'VegetableTreeSenchaTouch.model.Vegetable',
data:[
{ title: 'Onion' },
{ title: 'Potato' }
]
}
});
Not certain that this is the issue, but this is always how I name my models/stores to be sure they are referenced correctly.
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.
I'm following the video on the Sencha website, for creating my first application.
This is the video I'm following: Video
This is the code I'm using for the Blog tab:
Ext.define('GS.view.Blog',{
extend: 'Ext.navigation.View',
xtype: 'blogpanel',
requires: [
'Ext.dataview.List',
'Ext.data.proxy.JsonP'
],
config: {
title: 'Blog',
iconCls: 'star',
items: {
xtype: 'list',
itemTpl: '{title}',
store: {
autoLoad: true,
fields: ['title', 'author', 'content'],
root: {
leaf: false
},
proxy: {
type: 'jsonp',
url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/SenchaBlog',
reader: {
type: 'json',
rootProperty: 'responseData.feed.entries'
}
}
}
}
}
});
In the Safari Console, it is giving me the following error on StoreManager.js:97:
TypeError: 'undefined' is not a valid argument for 'instanceof' (evaluating 'store instanceof Ext.data.Store')
What am I doing wrong?
add this code at line store:
store: new Ext.create('Ext.data.Store',{
autoLoad: true,
fields: ['title', 'author', 'content'],
root: {
leaf: false
},
proxy: {
type: 'jsonp',
url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/SenchaBlog',
reader: {
type: 'json',
rootProperty: 'responseData.feed.entries'
}
}
})