In the Sencha Touch Charts 2 beta distribution, the Drawing guide example code has an example of a Sprite listening for touch start. The code given fails to draw any sprites, because it fails to insert a canvas onto the DOM. However this can be fixed by replacing this:
//add the component to the panel
Ext.create('Ext.chart.Panel', {
fullscreen: true,
title: 'Yellow Circle',
items: drawComponent
});
with this:
//add the component to the panel
Ext.create('Ext.chart.Panel', {
fullscreen: true,
title: 'Yellow Circle',
chart: drawComponent
});
Now, I'd really like to get the event handling to work. The example code continues with:
// Add a circle sprite
var myCircle = drawComponent.surface.add({
type: 'circle',
x: 100,
y: 100,
radius: 100,
fill: '#cc5'
});
// Now do stuff with the sprite, like changing its properties:
myCircle.setAttributes({
fill: '#ccc'
}, true);
// Remember always to refresh the image
drawComponent.surface.renderFrame();
// or animate an attribute on the sprite
// no need to refresh the image when adding animations.
myCircle.fx.start({
fill: '#555'
});
// Add a touch listener to the sprite
myCircle.addListener('touchstart', function() {
alert('touchstarted!');
});
but that final alert never happens on touch. Any ideas?
drawComponent.addListener('touchstart'... works fine, but is of course not localised to the circle sprite.
--- after more investigation ---
I think the answer is simply that event handling on sprites his not implemented yet. e.g. in touch-charts/src/draw/engine/Canvas.js we have in the definition of Ext.draw.engine.Canvas,
getSpriteForEvent: function(e) {
return null; //TODO!!!
},
OK - time to change the question from 'how?' to 'when?':
'When will Sencha Touch support Sprite event handling?"
Related
How to add interactive, dynamic components on a fixed location outside of all views in a Sencha Touch application.
With the menu at the top, I would like to add controls to the bottom of the app that control audio, display other random information and rotate imagery. This pane should not hide/move/refresh/etc. when changing views via the menu, in essence it should be separated from the rest of the application. It is highly preferred to be able to use the sencha 'audio' xtypes.
Should I implement this:
Straight into index.html
Somehow add it in the view which holds the menu as well
Some other magical way
The magical way is... Docking ( outside the rest of the app, probably means you want to doc on the viewport ).
http://docs.sencha.com/touch/2-0/#!/api/Ext.Component-cfg-docked
var button = Ext.create('Ext.Button', {
text: 'Button',
id: 'rightButton'
});
Ext.create('Ext.Container', {
fullscreen: true,
items: [
{
docked: 'top',
xtype: 'titlebar',
items: [
button
]
}
]
});
Ext.create('Ext.Panel', {
html: 'Floating Panel',
left: 0,
padding: 10
}).showBy(button);
For your top view, I would use something along the lines of a Ext.TabPanel though.
http://docs.sencha.com/touch/2-0/#!/api/Ext.tab.Panel
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,
}]
I'm trying to implement a list filter in a text field in sencha touch. For example, I'd have a bunch of contacts, and when I typed in the field, it might filter by name. When I click the circular X button to clear the textfield, I'd like to reset the filter to filter none of the contacts.
The problem is, I can't seem to figure out a way to detect the click on the clear button. There doesn't appear to be any type of event, and I can't seem to hack in a workaround.
If anyone has any idea how to detect a textfield clearing in sencha touch, I'd be much obliged.
I've tried in safari and xcode simulator, and am using sencha touch 1.1.0. Am I missing something? Is this not an issue when it's actually a mobile app?
You can listen for tap events on clearIconContainerEl inside the text field or override the onClearIconTap method.
Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function() {
var searchField = new Ext.form.Search({
name : 'search',
placeHolder: 'Search',
useClearIcon: true,
onClearIconTap: function() {
if (!this.disabled) {
this.setValue('');
console.log('onClearTap: Clear button tapped!');
}
}
});
var viewport = new Ext.Panel({
fullscreen: true,
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [searchField]
}]
});
console.log(searchField.useClearIcon);
searchField.mon(searchField.clearIconContainerEl, {
scope: searchField,
tap: function() {
if (!this.disabled) {
console.log('clearIconContainerEl: Clear button tapped!');
}
}
});
}
});
For sencha touch 2.0 users:
If your using new mvc structure, you can use this in the controller init
this.control({
'#yourTextFieldId clearicon': {
tap: function(){console.log('ClearICON tapped');}
}
....
)};
The problem is the little X is not added in by sencha touch. It is a feature of the "search" input with html5. To capture this event you need to look for the search event. How I solved this was I edited sencha-touch.js
I modified -
if (this.fieldEl) {
this.mon(this.fieldEl, {
focus: this.onFocus,
blur: this.onBlur,
keyup: this.onKeyUp,
paste: this.updateClearIconVisibility,
mousedown: this.onBeforeFocus,
scope: this
});
to be -
if (this.fieldEl) {
this.mon(this.fieldEl, {
focus: this.onFocus,
blur: this.onBlur,
keyup: this.onKeyUp,
paste: this.updateClearIconVisibility,
mousedown: this.onBeforeFocus,
search: this.onSearch,
scope: this
});
inside of Ext.form.Text = Ext.extend(Ext.form.Field, { ...
Now in my implementation of the searchfield I can make a function called onSearch which will be called when the "search" event is called. Note that the "search" event is not only called for the X but for some things like the enter key. The bottom line is sencha touch 1.1 does not check for this event at all and it is the only time the X fires an event so the only solution is to modify sencha-touch.js.
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)
I have two circles, one is small (thumb) another one is big (info), and when the user hover over the small (thumb), then the small icon need to resize in to big one. I also need to show the new information in the big. I think I have to do this by width and height animation, because small is 100px X 100px, and big is 200 X 200 size.
Please advice on the best way to do this. I would like to avoid using plug-ins.
using jquery 1.4.2 or up, you can achieve this by using:
$(".smallCircle").hover(
function () {
$(this).animate({
width: '200px',
height: '200px'
}, 200, function() {
// Animation complete.
//do whatever
});
},
function () {
$(this).animate({
width: '100px',
height: '100px'
}, 200, function() {
// Animation complete.
//do whatever
});
});
put the class "smallCircle" in the small circle.
P.S. in each state of the hover, you can control what happens after the animation is done (the place where I put "//do whatever"), that's the place where you could insert the content of the big cicrle.