I am fetching the contact data from PhoneGap and displaying into the Sencha Touch listview. I am using ListPagination plugin to load the data when the scrollbar reaches to end.
But the issue is ListPagination only works with remote data and hence pageSize property works in that case.
But here i am storing the data of PhoneGap into an array and loading it using
Ext.getStore('ContactStore').setData(arr).
So is there any way in Sencha Touch to perform pagination locally using ListPagination ?
Try to override the load method of the store, calling its setData() only with a subset of the entire array.
In your derived store class:
Ext.define('App.store.XXX', {
extend: 'Ext.data.Store',
config: {
storeId: 'xxx',
mypage: 0, // use this as 'cursor' in your array
pageSize: 10,
model: 'App.model.XXX',
...
},
load: function() {
this.mypage += 1;
// maybe add some sanity check on array dimension
this.setData(Ext.Array.slice(arr, 0, this.mypage*this.getPageSize()));
}
});
I've not test the code above. Get it as an 'idea' of resolution.
I found an solution to get a paged list from an array in Sencha Touch 2.4.
The trick is to hook in the beforeload - Event of the store and set the peace of data from an array.
Here you find the code: http://www.soft4tec.de/development/sencha-touch/list-paging-with-array-store.html
Related
I was trying to asynchronously update a Select field via Memory and ObjectStore. This doesn't work. Setting the data to the Memory object before creating the Select element works fine. Updating the Memory object after creating the Select element doesn't work anymore.
Example code:
require([
"dojo/ready",
"dijit/form/Select",
"dojo/store/Memory",
"dojo/store/Observable",
"dojo/data/ObjectStore",
'dojo/domReady!'
], function(ready, Select, Memory, Observable, ObjectStore, dom){
ready(function() {
var mymem = new Memory();
var myobs = new Observable(mymem);
var mystore = new ObjectStore({ objectStore: myobs });
/* updating memory here works :) */
//mymem.setData([ { id: 2, label: 'qwertz2' }, { id: 3, label: 'qwertz3' } ]);
var s = new Select({
store: mystore
}, 'appsAdminQueueContainer');
s.startup();
/* updating memory here doesn't work :( */
mymem.setData([ { id: 2, label: 'qwertz2' }, { id: 3, label: 'qwertz3' } ]);
});
}
);
Real working example: https://jsfiddle.net/mirQ/ra0dqb63/5/
Is this a bug or is there a solution to be able to update the content of the Select field after creating it - without having to access the Select field directly?
UPDATE
Thank you for your response.
The use of dojo/ready was just a missed leftover while simplifying my code, sorry.
That the use of the ObjectStore is not necessary was not clear to me. Thanks for clearing up.
Okay, the real problem seems to be indeed the last point. I think I have to extend my description.
Updated/extended problem description:
I'm using a grid. At first I was using dojox/grid/DataGrid, but then I switched to dgrid. Everything works well, but I want to use dijit.form.Select as editor for one column. This works also well if the data is static. But in one column I have to read dynamic data from the server. This data comes in JSON format.
First I tried to solve this with the use of dojo/data/ItemFileReadStore - that worked. But it's deprecated and I need to implement a formatter for that column that has to have access to the same JSON data read from the server. I don't have the code for that solution anymore, but it didn't work. I wasn't able to successfully query the data from within the formatter function.
Then I switched to Memory and xhr. The response from the server comes after the Memory object is created (and, as it seems, after creating the Select), so I had to use setData to bring my loaded data in the store. And because the Select is only an editor of a grid, I don't have access to the object itself to be able to re-set the store after updating the data.
I hope my extended description makes my real problem a bit clearer. Thanks in advance for your help!
Mirko
This works for me:
require([
'dijit/form/Select',
'dojo/store/Memory',
'dojo/store/Observable',
], function (Select, Memory, Observable) {
var mymem = new Memory({
data: [{
id: 2,
label: 'qwertz2'
}, {
id: 3,
label: 'qwertz3'
}]
});
var myobs = new Observable(mymem);
var s = new Select({
labelAttr: 'label',
store: myobs
}, 'appsAdminQueueContainer');
s.startup();
myobs.add({ id: 4, label: 'qwerty' });
});
Notable changes:
There's no reason to use dojo/ready in this code. The require callback already waits for modules to load, and as long as this script is at the bottom of the body, there's no need to wait for the DOM to load, either.
There's no need to use a dojo/data store adapter. dijit/form/Select supports dojo/store as well (as of 1.8 if I recall correctly). This might also have been why observation wasn't working. The only difference is labelAttr must be specified on the Select since dojo/store has no concept of a label property.
(Edit) now that I re-read the question, I notice you are calling setData. setData does not fire observers. setData completely resets the store's data, and to reflect that, you would need to actually reset the store on the select entirely (which requires calling setStore, not set('store', ...), if you are using 1.9 or earlier, because Select was never updated properly to support the set API until 1.10).
(Edit #2) Given that the primary reason you are calling setData is due to creating the store before actually having data for it, your case would probably be greatly simplified by using the RequestMemory store implementation from dojo-smore. It basically re-adds the url support that dojo/data/ItemFileReadStore had but dojo/store/Memory didn't.
I am new to Sencha Touch so I am still struggling with the usage of stores.
I have created this store which I am successfully using to populate a list:
Ext.define('EventApp.store.events',{
extend: 'Ext.data.Store',
config: {
model: 'EventApp.model.event',
autoLoad: true,
storeId: 'events',
proxy:{
type:'ajax',
url: './resources/EventData.json',
reader: {
type: 'json',
rootProperty: 'events'
}
}
}
});
As I mentiones this store works correctly when referenced from a list and I can display the contents of it. Therefore I am assuming the store is correctly defined.
Unfortunately when I try to access the store from a controller for one of my views (which will be used to populate the items of a carousel) I don't seem to get any data back from the store. The code I am using is the following:
onEventCarouselInitialize : function(compon, eOptions) {
var past = compon.getPast();
var eventsStore = Ext.getStore('events');
eventsStore.each(function(record){
console.log('Record =',record); //<-- this never gets executed.
},this);
}
I have tried executing an eventsStore.load() on an eventsStore.sync() but I never seem to get any elements available in the store.
What am I missing?
Thanks
Oriol
What i have understand is, perhaps your store data has not been loaded when you are accessing it. So put you each() function on store inside this for delaying 500ms:
Ext.Function.defer(function(){
// Put each() here
}, 500);
Have a try by delaying more or less.
Best I can tell, sorting any column in one of my grids (which is configured with a store calling the LBAPI) re-executes all of my App code from the store's definition onward. Is this expected behavior? I would not think we would need to re-query the data used in the grid to sort it.
I defined the store as follows:
// fetch the snapshot of all leaf level stories for the PI
var ssPiLeafStories = Ext.create('Rally.data.lookback.SnapshotStore', {
context: {
workspace: this.context.getWorkspace(),
project: this.context.getProject()
},
pageSize: 10000000,
fetch: find,
rawFind: query,
hydrate: ["ScheduleState", "c_" + this.gKanbanStateFieldName],
autoLoad: true,
listeners: {
scope: this,
load: this._processPiLeafStories
}
});
...sorting any column in the grid drives all of the App's logic from the function _processPiLeafStories and beyond (I think!). Any suggestions on how to just sort the grid instead of re-running the bulk of the App would be appreciated.
Thanks!
The Sencha store is automatically adding a ajax loader mask when populating the store, but I want to hide it since I have made a more generic mask which is shown every time the app does a ajax request.
How can I hide the store load mask? Tried to look in the documentation, but didnt find any appropriate field/method there:
See attachement:
The property exists: loadingText, which you have set to null.
{
xtype: 'list',
store: 'Store',
loadingText: null, // for ST 2.3.0 set it to false
....
}
Cheers, Oleg
Olegtaranenko: Your solution does remove the loadmask, but setting the
loadingText to 'null' also seems to break the "PullToRefresh" plugin
functionality for a list.
By 'break', I mean that after pulling the arrow down to refresh, the
ui remains in this state, and does not hide the PullToRefresh section
at the top.
Is there a way to hide the additional loadmask, while retaining the
ability to pull to refresh?
For anyone that is reading this in future and is trying to achieve what I have described above, I worked around the issue with PullToRefresh by changing the original Sencha touch 1.1.1 code (line 45346 of sencha-touch-debug-with-comments.js). This is not ideal, but provides a quick workaround.
Original (PullToRefresh breaks)
onBeforeLoad: function() {
if (this.isLoading && this.list.store.getCount() > 0) {
this.list.loadMask.disable();
return false;
}
},
Workaround
onBeforeLoad: function() {
if (this.isLoading && this.list.store.getCount() > 0) {
try{ this.list.loadMask.disable(); }
catch(err) { }
return false;
}
},
Just add on your View
viewConfig: {
loadMask: false
}
Previous attempt at this app was done in jqtouch and this effect worked perfectly. Im having a really hard time wrapping my head on how best to do this with sencha touch.
My situation is best described in this image
This is just one item that should populate a carousel so reusing it with different data is paramount (no hard coded html).
thank you
Finally solved it thought I should update it here
Ext.define('mobuy.view.myCarousel', {
extend: 'Ext.carousel.Carousel',
alias: 'widget.myCarousel',
config: {
myitems: 0,
},
updateMyItems: function(newItem) {
var localCarouselItems = [];
Ext.each(newItems, function(item){
localCarouselItems.push({
xtype:'localItem',
data:item.data
});
});
this.setItems(localCarouselItems);
this.setActiveItem(0);
}
})
what this does is basically create an array of new items of type localItem from the store when one calls setMyItems and sets the data (to be used with xtemplate or whatever) for each of those items.
If anybody needs more details please ask and I'll update my answer.