I want to create an iPad-like pop-over with a login form in Sencha touch. How can I do this?
You may try making a normal Ext.Panel to look like a popover
var gkpopover = new Ext.Panel({
id :'gkpopoverpanel',
floating:true,
modal:true,
width:'100px',
height:'100px', });
Note: Never forget to set height and width.
and to Show
gkpopover.show('pop');
hope this makes sense.
On sencha touch 2, floating is depreciated. I've modified #geekay code to;
//show info popover?
var popoverpanel = new Ext.Panel({
modal:true,
left:'10%',
top:'10%',
width:'80%',
height:'80%',
hideOnMaskTap: true,
html:data.info
});
Ext.Viewport.add(popoverpanel);
popoverpanel.show('pop');
Credits go to him!
As this post points out, sencha have very exactly what you need.
Try this :
new Ext.Panel({
fullscreen : true,
items : [
{
xtype : 'toolbar',
docked : 'top',
items : [
{
text : 'Open',
handler : function (button) {
var panel = new Ext.Panel({
height : 200,
width : 200,
html : 'Hello'
});
panel.showBy(button, 'tr-bc?');
}
}
]
}
]});
Related
I want to disable touchEnabled property of SliderDrawer1. But this is not working when I write this code. How can I do this? My codes as follows.
function Page1_Self_OnShow() {
var timeoutID = setTimeout(function () {
setHello();
}, 200);
function setHello() {
Pages.Page1.SliderDrawer1.touchEnabled=false;
Pages.Page1.SliderDrawer1.show();
cancelHello();
}
function cancelHello() {
clearTimeout(timeoutID);
}
}
It is native behaviour for SliderDrawer.So, yo can use Container or Rectangle, place it like sliderdrawer and add objects in Container as below:
var myContainerLayout = new SMF.UI.Container({
top : "0%",
left : "0%",
width : "40%",
height : "100%",
backgroundTransparent : false,
fillColor : SMF.UI.Color.black,
});
var myButton = new SMF.UI.TextButton({
top : "10%",
left : "5%",
height : "15%",
text : "button"
});
Pages.Page1.add(myContainerLayout);
myContainerLayout.add(myButton);
}
I'm playing a video in titanium-iphone and I created the videoPlayer like this:
var activeMovie = Titanium.Media.createVideoPlayer({
url: contentURL,
backgroundColor:'#111',
scalingMode : Titanium.Media.VIDEO_SCALING_ASPECT_FILL
});
And it looks like this:
The problem is that I have no control on the bottom time bar of the movie. It appears instantly and dismisses after a few seconds. Is there a way to make it not appear when the video opens and appear only when I click on the video and dissappear at the next click???!???
Thank you!
You didn't set mediaControlStyle : Titanium.Media.VIDEO_CONTROL_DEFAULT
Use below code : -
var contentURL = "http://dts.podtrac.com/redirect.mp4/twit.cachefly.net/video/aaa/aaa0033/aaa0033_h264b_640x368_256.mp4";
var win = Titanium.UI.createWindow({
title:'Test',
backgroundColor:'#fff',
layout: 'vertical'
});
var movie = Titanium.Media.createVideoPlayer
({
url:contentURL,
top : 2,
autoplay : true,
height : 300,
width : 300,
mediaControlStyle : Titanium.Media.VIDEO_CONTROL_DEFAULT,
scalingMode : Titanium.Media.VIDEO_SCALING_ASPECT_FIT
});
win.add(movie);
I am having difficulties implementing the destroy method on my popup. Everything works fine, the below code works for having one popup that changes its contents depending what is clicked on. But I notice that my content (media) still plays when hiding the popup. I'd like to destroy it completely, and re-create on click. I've not really found anything in the forums that helps me achieve this, so I think it will help others too :-)
There are a couple of things confusing me, as there is already a click listener on the markers, which initiates the popup, where should I put the destroy code? Should I be declaring it as a separate function outside the popup, then calling it on beforehide somehow?
function addMarker(country)
{
if (true)
{
var image = new google.maps.MarkerImage(country.image48Path);
var marker = new google.maps.Marker({
map: map.map,
title: country.title,
position: country.position,
//draggable: true,
icon:image
});
var goToCountryWrapper = function (button, event)
{
goToCountry(country, this.popup);
};
google.maps.event.addListener(marker, 'click', function()
{
if (!this.popup)
{ ---> Should I be placing destroy code here?
this.popup = new Ext.Panel(
{
floating: true,
modal: true,
centered: true,
width: 800,
height: 600,
styleHtmlContent: true,
scroll: 'vertical',
items:[(new countryOverlay(country)).overlayPanel,
{
xtype:'button',
margin: 20,
ui:'action-round',
text:'Click here to view more promo videos',
handler:goToCountryWrapper,
scope : this
},],
layout: {
type: 'auto',
padding: '55',
align: 'left'
},
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
ui: 'light',
title: country.title
}],
---> Should I be placing a listener here for beforehide, destroying here?
});
};
this.popup.show('pop');
});
}
};
---> Should I be placing the destroy code after, as a seperate function?
Thanks,
Digeridoopoo
I presume you want to destroy it when you hide the popup? If so, you should listen tot he hide event and then destroy it then.
this.popup.on('hide', function() {
this.popup.destroy();
}, this);
Check this
hideOnMaskTap:true,
listeners : {
hide: function() {
this.destroy();
}
},
I am creating an Application that consist of a Panel,
This panel contains a Tab-Panel and a Form-Panel. (Initially, Form-Panel is Hidden)
The Tab-Panel has a Tab, which contains a List.
When Tapped on a List-Item it dose the following
Shows the Form-Panel
Hides the Tab-Panel
My Problem is When it does so , The form do not show any scroll bars, How ever when i change the orientation of the device(iPhone) and then it allows me to scroll.
Can anyone explain me if i am doing it correctly, or is there any better way to achieve this functionality, or can the Main Panle be changed with a view Port ?
A small example will be really great.
Below is my Code (i will try to keep it simple)
Decleration of List and Event Listener
var lstRequestTracker = new Ext.List({
itemTpl : '{emplFirstName} {emplLastName}'
,store : storeRequestTracker
,fullscreen: true
});
lstRequestTracker.on('itemtap', function( oThis, index, item, event) {
var rec = oThis.getStore().getAt(index);
tpnlMyForms.hide();
fpnlOnBoard.show();
//pnlMain.doComponentLayout();
fpnlOnBoard.doComponentLayout();
});
Code for declaring the Main-Panel, Tab-Panel and The Form-Panel
var tpnlMyForms = new Ext.TabPanel({
tabBar : {dock : 'bottom', layout:'hbox'}
,fullscreen : true
,defaults : {scroll: 'vertical', layout:'fit'}
,items : [ {
title : 'Request Tracker'
,items : [lstRequestTracker]
,iconCls: 'time'
}
]
});
var fpnlOnBoard = new Ext.form.FormPanel({Contains form Fields});
Ext.setup({
onReady: function() {
var pnlMain = new Ext.Panel({
fullscreen : true
,dockedItems: [{dock:'top', xtype:'toolbar',title:'STARS'}]
,layout: 'fit'
,items : [tpnlMyForms,fpnlOnBoard]
});
fpnlOnBoard.hide();
}// eo onReady Function
});
Have you tried giving your formPanel a scroll option (scoll: 'horizontal') ? I really don't know wether this will help, but I remember I also had a form a few days ago and this was the solution. That had nothing to do with the device orientation by the way, but who knows..
I am using a fancy box which displays images, youtube video link and other videos. The user can navigate in the fancy box to go to next display or previous display. My problem is the fancy box doesn't get re-sized based on the displayed content. My code is as below:
$.fancybox(href,{
'autoScale': true,
'autoDimensions': true,
'padding': 30,
'transitionIn': 'none',
'transitionOut': 'none',
'type': 'iframe', //'iframe', //'image',
'changeFade': 300,
'cyclic': false,
});
I have tried solving this issue by calling a function in "onComplete" but no success till now. Please provide few inputs on this.
Thanks
setting "autoScale" to false should work...
I'm not a web developer by any means, but the documentation says:
$.fancybox.resize Auto-resizes FancyBox height to match height of content
Is that what you want?
You need to call a new fancybox within the old one. If you "open" a new fancybox from within the first one, it will resize itself. Try:
<script type="text/javascript">
$(document).ready(function() {
var content = '
<div id="nextbox">Box 1</div>
<script type="text/javascript">
$("#nextbox").click(function() {
$.fancybox('Box2',{
'autoDimensions': false,
'height' : 400,
'width' :400
});
});
</script>
';
$.fancybox(content,{
'autoDimensions': false,
'height' : 200,
'width' : 200
});
</script>
This will open up a fancybox that says "Box 1". When you click on "Box 1" it will resize from 200px by 200px to 400px by 400px and change text to "Box 2". And you can keep on doing this for as many boxes as you want.
I see the question is old, but hope someone can use this as I struggled a long time myself finding out how to resize fancybox once it was initiated.
In my case while using Fancybox 2 the setting was called fitToView
set it to true
here is what I use to launch fancybox, you do not need to put it in ready
(function($){
$(document).on('click','.fancybox',function(e){
//don't follow link
e.preventDefault();
//update fancybox image registry for gallery and open it
var fbox = $('.fancybox');
//this always opens the first image first
$.fancybox(fbox,{
index: fbox.index(this),
padding: 5,
live: false,
helpers : {
overlay : {
css : {
'background-color' : 'rgba(17, 17, 17, 0.3)',
},
closeClick: true,
showEarly : true,
locked : false //if true, causes background to jump
},
thumbs : {
width : 140,
height : 100,
source : function(item) {
var href = $(item.element).data('thumb');
if(typeof href === 'undefined'){
if (item.element) {
href = $(item.element).find('img').attr('src');
}
if (!href && item.type === 'image' && item.href) {
href = item.href;
}
}
return href;
}
}
},
scrolling: 'visible',
fitToView: true,
iframe:{
scrolling : 'auto',
preload : false
}
});
});
})(jQuery);