How to have a bootstrap popover always contained in the screen?
Below a popover that lying outside of the screen
http://s.codepen.io/juavenel/debug/LkjPYL
add this to solve the problem:
constraints: [ { to: 'scrollParent', pin: true } ]
Related
I came across a situation in sencha touch where i need to change from one view to another on click of a button .
My view 1 is a dashboard which displays around 8 icons and on click of each icon different views are shown . So, i placed an home button in the header of those 8 different views and i am trying to get back to the dashboard which is not hapenning .Instead it is showing a blank screen and there was no error displayed in the console for me to check .
My code for changing the view on button click was :
{
xtype:'button',
cls:'clsHome',
text:'Home',
style: 'background:#4A4245;color:white;',
handler: function() {
console.log("Home Clicked");
var dashboardPanel = Ext.create('AppSupport.view.DashBoard');
Ext.Viewport.add(dashboardPanel);
//Ext.Viewport.setActiveItem(dashboardPanel,{type: 'slide', direction: 'left'});
}
}
Help me Guys ... Thanks in Advance ...!!!
You should try the Using Navigation View tutorial in sencha architect documentation... It gives a simple step by step guide for view navigation for an app. The navigation view also provides in built history support from sencha touch 2 onwards which also makes going back simple and easy
http://docs.sencha.com/architect/2/#!/guide/navigationview
In Sencha Touch 2, the TabPanel is really great when you've got 5 or less tabs. Any more than that, and it doesn't fit on a phone in portrait mode (see this fiddle).
What are my options? Is there any way to make the last button pop up a sub-TabBar? or can I put an arrow on the right end of the TabBar that makes the bar slide over for a new one? or can I make the TabBar scrollable?
You can make the tab bar scrollable using the following config:
tabBar: {
scrollable: {
direction: 'horizontal'
}
},
Here's the updated fiddle.
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.
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 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.