sencha touch carousel not removing all items - sencha-touch-2

Baffled by this and not sure where to start looking.
I have a carousel which I load when the refresh event fires on my backing store:
Ext.define('Rb.store.Items', {
extend: 'Ext.data.Store',
requires: ['Rb.model.Item', 'Ext.data.proxy.Rest'],
config: {
storeId: 'itemstore',
model: 'Rb.model.Item',
proxy: {
type: 'rest',
url: '',
reader: {
type: 'json',
rootProperty: 'items'
}
},
autoLoad: false,
listeners:{
refresh: function( me, data, eOpts ){
console.log("refresh");
var carousel = Ext.ComponentQuery.query('rbdetailcarousel')[0];
carousel.removeAll(true);
console.log(carousel.getItems().getCount());
data.each(function(rec){
console.log(rec.data);
var rdcp = Ext.create('Rb.view.RbDetailCarouselPanel',{
cur_item: rec.data,
style: 'background-image:url(resources/startup/320x460.jpg);background-repeat:no-repeat;',
});
rdcp.items.get(1).setHtml(rec.data.name);
carousel.setActiveItem(rdcp);
});
carousel.setActiveItem(0);
}
}
}
});
My carousel is super simple:
Ext.define('Rb.view.RbDetailCarousel', {
extend: 'Ext.Carousel',
xtype: 'rbdetailcarousel',
config: {
itemId: 'rbdetailcarousel',
}
});
There are two things that are happening here that are strange:
When I call carousel.getItems().getCount(), right after the carousel.removeAll(true), I always get a return value of 1. If I inspect the carousel, there is still one item left in the carousel (it looks like it's the indicator??).
When I reload the store, it clears out all the items except the first one, so that as I refresh more and more I get repeats of the first item, then the remaining items added to the end. It seems as if the removeAll(true) is not removing that first item.
Any ideas on where I can look to solve this? I have a suspicion that I'm not grabbing the reference to the carousel correctly, because I shouldn't be getting back the indicator as one of the items in it, right?
Thanks

As hinted at by OhmzTech and answered on the sencha forum, I was adding items to my carousel which had duplicate itemId's. I'm still a little fuzzy on the standing of these ids (and to what extend they are used by the framework internally), apparently you don't want to have a single container with duplicate children itemIds.

Related

Creating a StoryMap app using the rallycardboard

I'd like to put together a StoryMap app using Initiative (second level) portfolio items as the backbone (columns). To do this the app needs to query for all the second level portfolio items, and then use each PI as a column header in the rallycardboard.
I've gotten the cardboard to display the column headers correctly, but I have not been able to get it to display the cards, which should be the first level of portfolio items (PortfolioItem/Feature).
Here is my code so far:
launch: function() {
this._getInitiativeStore();
},
_getInitiativeStore: function() {
this.initiativeStore = Ext.create('Rally.data.wsapi.Store', {
model: 'PortfolioItem/Initiative',
fetch: ['Name', 'Children'],
autoLoad: true,
listeners: {
load: this._createCardBoard,
scope: this
}
});
},
_createCardBoard: function(store, records) {
var initiativeColumns = [];
Ext.each(records, function(record) {
initiativeColumns.push({
xtype: 'rallycardboardcolumn',
columnHeaderConfig: {
xtype: 'rallycardboardcolumnheader',
fieldToDisplay: 'Name',
record: record,
},
cardConfig: {
xtype: 'rallycard',
record: 'PortfolioItem/Feature'
},
fields: ['Name', 'Parent'],
valueField: 'Parent',
value: record.get('_ref') // BUG FIXED HERE. Was: record.get('Parent')
});
}, this);
var cardBoardConfig = {
xtype: 'rallycardboard',
types: ['PortfolioItem/Feature'],
columns: initiativeColumns,
attribute: 'Parent',
};
var cardBoard = this.add(cardBoardConfig);
console.log('cardboard', cardBoard);
}
I realize I am using this perhaps a bit differently than the authors have planned for, but I'm willing to extend the rallycardboard and rallycolumnheader objects with Ext.define if that's what it takes. I'm starting to look at the Rally source code but its slow going so far.
I was able to figure out the problem by using Ext.define() to override the cardboardcolumn getStoreFilter function to print out its filter value. Probably for somebody good with a browser debugger that would not have been necessary, but I'm not and it pinpointed the problem right away: The "value" field of the initiativeColumn configs should have been record.get('_ref'), not record.get('Parent'). I'll edit the code above so it works.
Now the basic board works great as a story map with portfolio items! Next step is to see if I can incorporate the concept of releases into the map.
Also, I think I found a bug in the 'rallycardboard' constructor-- if I pass it a context reference like: context: { project: 'project/XXX'} where XXX is an OID, it crashes. Instead I need to instantiate a context object and pass that. But that's inconsistent from other items like the wsapi store. Workaround is easy, but it is a bit annoying.

How to access the elements in a sencha touch 2 store

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.

How to animate dataview items in sancha touch 2

I am a newbie in sancha touch 2, Playing with kitchensink example that comes with sancha touch sdk kitchensink/index.html#demo/inlinedataview
UI for Inline Dataview
View
/* Here we are adding a dataview to a container
* which(dataview) contains images.
*/
Ext.define('Kitchensink.view.InlineDataView', {
extend: 'Ext.Container',
requires: ['Kitchensink.model.Speaker'],
config: {
layout: 'fit',
items: [{
xtype: 'dataview',
scrollable: true,
inline: true,
itemTpl: '<img src="{photo}">',
store: 'Speakers'
}]
}
});
Question
I want to animate those images while they are being added to dataview in a way that they(each one of them individually) seems to fading in at a random place before showing the upper view.
Similar to http://boedesign.com/demos/jsquares/ example1
Sancha Doc Reference or A hint or how to do, will do it, but if you can paste some reference code that would be great.
I saw that no one replied to this in 8 months, and it still comes up in google:
so thought i provide a simple solution.
in your dataview override the doRefresh function
doRefresh: function ()
{
this.callParent(arguments);
this.animateItems();
},
then in your customer after-function (this.animateItems())
call:
var viewItems = this.getViewItems();
then roll some animations on them :)
i've created a plugin that attempts to simplify this.
hope it can help someone: http://sunnyjacob.co.uk/blog/animating-items-in-a-sencha-touch-dataview/
S.

Extjs4 - Reloading store inside itemselector

I have an itemselecor inside a grid, and i have an combobox that should reload only the store inside the itemselector( the value fields should remain intact)
Here is the itemselector
var grid = Ext.widget('form', {
id: 'grid',
title: '',
width: 600,
bodyPadding: 10,
renderTo: 'itemselectorproduto',
items: [{
xtype: 'itemselector',
name: 'itemselector',
id: 'itemsel',
anchor: '100%',
imagePath: '/ux/images/',
store: store,
displayField: 'Nome',
valueField: 'ID',
value: vitrine,
allowBlank: true,
msgTarget: 'side'
}]
});
I tried to call the normal store.load(), but it have no effect and it shows no error on the console
If needed i will post more of the code, but i think just this should be enough
Thanks,
Looking through the code if ItemSelector it doesn't look like it supports any changes in the store once it's been binded. It basically creates local copies of the data. And if you call bindStore method to assign different store - it will erase your selection.
You can always improve code in ItemSelector to allow such behavior. It should not be a problem. You can subscribe to datachanged or load event of the store when binding to it, and then handle situation when store data is changed.
Actually i think the best way to do such thing is using ItemSelector`s "populateFromStore". Sure except of extending item selector. In case of extending you should look on the "onBindStore" function of the ItemSelector.
onBindStore: function(store, initial) {
var me = this;
if (me.fromField) {
me.fromField.store.removeAll()
me.toField.store.removeAll();
// Add everything to the from field as soon as the Store is loaded
if (store.getCount()) {
me.populateFromStore(store);
} else {
me.store.on('load', me.populateFromStore, me);
}
}
}
So as you see in case of the empty store it hooks to the load event. And it should be like this:
onBindStore: function(store, initial) {
var me = this;
if (me.fromField) {
me.fromField.store.removeAll()
me.toField.store.removeAll();
me.store.on('load', me.populateFromStore, me);
// Add everything to the from field as soon as the Store is loaded
if (store.getCount()) {
me.populateFromStore(store);
}
}
}

sencha touch - nestedlist - store all the fields' values of "activeItem of nestedlist"

i have a panel which should show the "description" field of "currently activeitem of nestedlist". nestedlist uses the model having fields:
id
text
description
when user taps on any item of nestedList [on selectionchange OR itemtap&backtap], i want to change description in the panel with description of "currently activeItem of nestedList".
Is this possible?
thanks for any help/solution/pointer.
The same problem I had today, and no solution had been found with a nested list, because no single field can be taken from a Ext.data.TreeStore. One solution could be that you have lots of "if-function 'do with all the ID's and then you give each ID a text. But that's not good.
I've decided to make a simple list.
if you want I can show you my solution for the simple list
ps.: I use Sencha Touch 1.1
Update:
NotesApp.views.NaviList = new Ext.List({
fullscreen: true,
flex: 1,
layout: 'card',
scroll: false,
useToolbar: false,
itemTpl: '{text}',
store: store,
listeners: {
itemtap: function (obj, idx, el, e) {
var record = this.store.getAt(idx);
var tle = record.get('text');
index = record.get('index');
NotesApp.views.notesListContainer.setActiveItem(index, { type: 'slide', direction: 'left' });
}
}
}
});
description:
My App has the name: "NotesApp".
"notesListContainer" is a Container where all my List are displayed. "index" is an ID that I get from the store and the calls list.
Now when you tap on my NaviList you set a new ActiveItem in this Container.
thanks a lot for the reply. I also tried using simple list with one Ext.button(back button in case of nestedlist). On itemtap and buttonclink, i change list's content by
var t = new Ext.data.Store and list.setStore(t).
Please let me know if there is any other better option to do it.