I'm trying to build a flashcard app with sencha touch 2.
I have a label showing the question, which takes up the entire screen, I want it so that when the user taps on the label the answer shows.
Does the label have a 'tap' event? It works when I use a button, but not when I use a label.
Another way around is if I can get the button to be transparent on top of a label.
Any suggestions?
You can do this :
label.element.on({
tap : function(e, t) { ... }
});
Hope this helps
one more way to bind the tap event to the 'label' control using sencha touch.
{
xtype : 'label',
html : 'my name is abc',
listeners :
{
element : 'element',
tap : function(e, t)
{
alert('1 pressed');
}
}
}
Ext.Label is not designed to have a tap event. However, you can still achieve it through the tap event on your label HTML element, for example:
label.getContentEl().on{'tap', handler_function,this}
But Sencha Touch does not provide tap event on Ext.Label, which is a child of Ext.Component, so when you try to use tap event on a label, it's not the best practice.
A better approach is to use Ext.Button with the following 2 configs:
{
ui: 'plain',
cls: 'btnCls',
}
and in your CSS, style its background to transparent.
Related
I have designed a tool bar where buttons are there,. My requirement is initially it should display one icon and on mouse over the icon should change. For this i have given a class to the button and applied css for this and for hover property applied cssclass:hover with different image. For Example
.cssclass {
background-image: someimage.jpg
}
.cssclass:hover {
background-image: someotherimage.jpg
}
By this in all browser (chrome and IE) it is working but in Firefox the image is not changing.
Can anybody have any idea how to achieve this?
Thanks
Tapaswini
If this is related to ExtJS 4, then you should be adding a overCls like so:
Ext.create('Ext.Button', {
text: 'Click me',
cls: 'normalcls',
overCls: 'someovercls', // right here!
renderTo: Ext.getBody(),
handler: function() {
alert('You clicked the button!');
}
});
Depending on the ExtJS version, it may apply a prefix of 'x-' to the class name.
I have a selectfield in a view and when I am navigating to that view I want keypad opens automatically when I am moving to that view. I am trying to call focus method but it is not working,
Any one help me in this.
You have to call focus on the textfield as soon as it is initialized something like below,
listeners: {
initialize: function(view, eOpts) {
Ext.getCmp('_phoneNumberId').focus();
}
}
I would like to use an actionsheet but am unclear where to place it. I have tried adding it to a button event function but it doesn't show (the modal screen does however). I get a message about ActionSheet#show showing a component that currently doesn't have any container. Please use Ext.Viewport.add() to add this component to the viewport. Not sure how to do that - using Ext.Viewport.add() doesn't work for me - i may be because of my layout which is:
I have a viewport controller/view which is a card layout. When I click a button I have a function in the viewport controller that loads a new controller/view card in the viewport. The actionsheet is in one of these cards. The app is to big to post so hopefully it makes sense.
I have tried adding the actionsheet in my view items array but do not know how to make it show - making a reference to the xtype actionsheet doesn't return an object with a show() method it seems.
Edit: after more experiments it seems the issue is that I am placing it inside of a card - the card layout container has a relative position and the actionsheet absolute - somehow this is causing the actionsheet to go off screen. Setting card container to absolute fixes it but now I have problems with navbar positions. Suggestions?
So a bit stuck...
This is what you need to do to show your action sheet :
var actionSheet = Ext.create('Ext.ActionSheet', {
items: [
{
text: 'Delete draft',
ui : 'decline'
},
{
text: 'Save draft'
},
{
text: 'Cancel',
ui : 'confirm'
}
]
});
Ext.Viewport.add(actionSheet);
actionSheet.show();
I am using sencha to create an application.
In this i am using button which for which i have defined the icons.
ex:
Sencha
{
xtype:'button',
height:30,
width:30,
cls:'btn'
}
CSS
.btn
{
background:"../../resources/img/hosrse.png";
}
But when i am clicking on the button the image is disappearing. What to do to keep the image appear even after pressing the button.
You need to overload the .x-button-pressed rule, i.e.
.btn.x-button.x-button-plain,
.btn.x-button.x-button-plain.x-button-pressed {
background:"../../resources/img/hosrse.png";
}
I want to update the toolbar's content of the main view from a subview (HotelApp.views.hotelDetail)
This is my toolbar from HotelApp.views.mainView
this.topBar = new Ext.Toolbar({
dock:'top',
id:'main_page_topbar',
title:'H10 Sencha Demo',
items:[this.back,
{xtype: 'spacer'}
]
});
The toolbar already have a back button. The problem is i can see the shape of a button, but no text either ID. What i'm doing wrong??
I use this code:
var toolbar = HotelApp.views.mainView.getDockedItems()[1];
var images = new Ext.Button({
text:'Images',
id:'images',
ui:'drastic'
})
toolbar.setTitle(record.get('nombre'));
toolbar.add({items: images});
toolbar.doLayout();
Thanks!!!
I think that your problem is only that you have to add your button calling
toolbar.add(images);
instead of
toolbar.add({items: images});
I even suggest you to don't use 'id' config for your components but 'itemId'.
In this way you can always get your views components by calling
myView.getComponent('myComponentItemId');
or
myView.getDockedComponent('myComponentItemId');
for DockedComponents like toolbars.
Hope this helps.