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.
Related
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.
I am trying to create a universal titlebar with a back button for my application. I am including it in the various views by using {xclass:mUserStories.view.titlebar}.
Here is the code for the titlebar:
Ext.define('mUserStories.view.titlebar', {
extend: 'Ext.TitleBar',
id: 'narwhal',
config: {
docked: 'top',
// id: 'narwhal',
title: 'CHW Module',
items: [{
ui: 'back',
text: 'Back',
id: 'backButton'
// hidden: true
}]
}
})
However, when I try to dynamically change the toolbar when switching to different pages, the console.log of the titlebar says the _title has changed but the text on the titlebar and the "hidden" property of the button does not change.
Here is the code for the logic that occurs when the button is pressed to switch the page:
toPage: function (arg) {
var t = Ext.getCmp('narwhal');
var b = Ext.getCmp('backButton');
console.log(t,b)
if (arg === PAGES.PATIENT_LIST) {
t.setTitle('Patient List');
b.setHidden(true)
}
Ext.getCmp('viewPort').setActiveItem(arg);
}
I have also tried to include a ref at the top for Narwhal : '#narwhal' and use var t = this.getNarwhal(), but this does not work either.
I am not sure if the problem lies with where the id is being kept, how the id is being called, or because the page is not refreshing properly. Any advice would help!
Thank you for your time :)
I have had the same situation in my project.
I managed to get everything to work like you want it by having a controller owning a reference to the title bar and listening to activeItemChange on my tabPanel.
I have a dataview and when scrolling it vertically, after releasing thumb it automatically scrolls back to the top. Whereas with a list it would stay where you release the thumb.
Is this something inherent within a dataview component that cannot be avoided or is there some kind of configuration parameter I can tweak?
My current definition:
informationdataview = new Ext.DataView({
id: 'informationdataview',
itemSelector: 'div.thumb-wrap',
tpl: informationtpl,
autoHeight: true,
layout: 'fit',
store: myapp.stores.information,
scroll: 'vertical'
});
And it's the only item inside an Ext.Panel.
Thanks for any help.
Adding this code to my app.js file solved my similar problem:
Ext.define('Override.util.PaintMonitor', {
override: 'Ext.util.PaintMonitor',
constructor: function (config) {
return new Ext.util.paintmonitor.CssAnimation(config);
}});
Ext.define('Override.util.SizeMonitor', {
override: 'Ext.util.SizeMonitor',
constructor: function (config) {
var namespace = Ext.util.sizemonitor;
if (Ext.browser.is.Firefox) {
return new namespace.OverflowChange(config);
} else if (Ext.browser.is.WebKit || Ext.browser.is.IE11) {
return new namespace.Scroll(config);
} else {
return new namespace.Default(config);
}
}});
I had the same problem, which was fixed by putting the layout value for main Panel to hbox. This is already covered in a separate question, here.
I am sure that, there is scroll view configuration mistake. Refer here for a better solution.
UIScrollView Controller not scrolling fully
I am also faced same issue i got the solution. U have set snapboundary for dataview (i.e) set top and bottom as 0, and sibling component should be docked top if u have any. Important thing make height: 100% not in pixels
items: [{
xtype: 'selectfield',
docked: 'top'
}, {
xtype: 'dataview',
width: '100%',
bottom: 0,
top: 0,
}]
We are developing a tablet oriented application in Sencha Touch with multiple List objects side by side surrounding each one by a panel, all of this inside a big panel in our Viewport view (consider we are follow MVC strategies recommended by Sencha Staff).
Our problem is we are trying to trigger an event or method after each surrounding panel is created (we called it EVENT_NAME_TO_TRIGGER for reference) to update its child list/contents, this code snippet maybe is helpful:
// i iterate from 0 to n to create multiples panels
var i = new Ext.Panel({
dockedItems : {
cls: 'toolbar',
xtype : 'toolbar',
title : rec.data.title
},
width: 250,
style: "margin-right:5px;" +
"margin-top:10px;" +
"margin-left:5px;" +
"background-color:#FFFFFF;",
"EVENT_NAME_TO_TRIGGER": function(){
Ext.apply(this, {
items: aux
});
}
});
if it's a Panel rendering issue you can solve this issue by adding .doLayout() function
I've only got so far trying to achieve what i've mocked in the screenshot.
Basically, i have a fullscreen reports panel that has 6 panels nested within it. Each of these panels (i'll call them tiles, as that makes more sense) need to be shown at the same time (used the layout:'fix') for the main panel.
Each tile will have a carousel within it that gets it's items populated by means of a single ajax call, if the ajax call returns 3 items then the carousel will have 3 items etc.
I'm having trouble getting the tiles arranged properly, so that they are all shown neatly, and more importantly in a way that will work when the device goes from landscape to portrait mode.
Without worrying about the carousel part too much, trying to get the tiles arranged properly within the panel is a pain. I can pretty much get there with css, by floating... but the first panel always looks messed up. I've since done some some reading trying to achieve a more "sencha" way of doing this.
var rep1 = new PortalDashboard.views.Reportimagetile;
var rep2 = new PortalDashboard.views.Reportimagetile;
var rep3 = new PortalDashboard.views.Reportsinglefigtile
var rep4 = new PortalDashboard.views.Reportimagetile;
var rep5 = new PortalDashboard.views.Reportimagetile;
var rep6 = new PortalDashboard.views.Reportimagetile;
PortalDashboard.views.Dashboardcard = Ext.extend(Ext.Panel, {
title: 'Dashboard',
html: '',
cls: 'card5',
layout: 'fit',
iconCls: 'team',
styleHtmlContent: true,
initComponent: function () {
Ext.apply(this, {
items: [
rep1, rep2, rep3, rep4, rep5, rep6]
});
PortalDashboard.views.Dashboardcard.superclass.initComponent.apply(this, arguments);
}
});
Ext.reg('dashboardcard', PortalDashboard.views.Dashboardcard);
--
PortalDashboard.views.Reportsinglefigtile = Ext.extend(Ext.Panel, {
html: '',
cls: 'dashtilecontent',
initComponent: function () {
Ext.apply(this, {
html: '<h1>99.99%</h1>'
});
PortalDashboard.views.Reportsinglefigtile.superclass.initComponent.apply(this, arguments);
}
});
Ext.reg('reportimagetile', PortalDashboard.views.Reportsinglefigtile);
Fit layout is used to show a single item at a time so using it as the layout for your dashboard panel won't work. Besides writing a custom layout to achieve the 3x2 tile effect in your mock up I would set the layout of the dashboard to
layout: {
type: 'vbox',
align: 'center',
pack: 'center'
}
so now any items you add will be in the center of the panel body and stack vertically.. so add 2 panels for each of the rows and on those panels use an hbox layout and add 3 cards to each of those panels
layout: {
type: 'hbox',
align: 'center',
pack: 'center'
}
(those align or pack settings might not suit your needs if you plan to have different sizes on different boxes, in which case you'll need to use the flex property to give the boxes the proportions you want)