I am playing an audio track in sencha touch. Its working fine.. But I want two things.
1) How to hide audio player and autoplay the sound. For this I tried
autoplay:true, and
hidden:true,
But this is not working ..
2) I want to add a button for sake of playing audio i.e. It contains the text "Tap to Play"
and when it is tapped it turns Pause .. And when pause tapped it turns to Play ..
I have done this but It does not Work well at all.. i.e. first i have to tap play button at the player and then My customize button came into action ..
Kindly help me to get out of this ..
{
xtype: 'audio',
url: 'lib/touch/snd/sound.mp3',
id: 'sound1',
autoplay:true,
hidden:true
},
{
xtype: 'button',
text:'Tap to play audio',
handler: function() {
var container = this.getParent().getParent(),
// use ComponentQuery to get the audio component (using its xtype)
audio = container.down('audio');
audio.toggle();
this.setText(audio.isPlaying() ? 'Pause' : 'Play');
}
}
Please refer to documentation...
link
It should be something like this
{
xtype: 'audio',
url: 'lib/touch/snd/sound.mp3',
id: 'sound1',
autoplay:true,
hidden:true
},
{
xtype: 'button',
text:'Tap to play audio',
handler: function() {
Ext.getCmp('#sound1').play(this,erg); or
Ext.getCmp('#sound1').pause(this,0,erg);
}
}
Related
How to keep all the qtips inside a container (I have already tried position.container, position.viewport and position.adjust.method) without any luck, my best guess is that I am not using them correctly.
Update:1 I have created a sample app with more details on below url
http://secure.chiwater.com/CodeSample/Home/Qtip
Update:2 I have created jsfiddle link too. http://jsfiddle.net/Lde45mmv/2/
Please refer below screen shot for layout details.
I am calling the area shown between two lines as $container in my js code.
So far I have tried tweaking viewport, adjust method but nothing helped. I am hoping this is possible and I would greatly appreciate any help.
Below is my javascript code which creates qtip2.
//Now create tooltip for each of this Comment number
$('#cn_' + num).qtip({
id: contentElementID,
content: {
text: .....
var $control = $('<div class="qtip-parent">' +
' <div class="qtip-comment-contents">......</div>' +
' <div class="clearfix"></div>' +
' <div class="qtip-footer"><span class="qtip-commenter">...</span><span class="pull-right">...</span></div>' +
'</div>'
);
return $control;
},
button: false
},
show: 'click',
hide: {
fixed: true,
event: 'unfocus'
},
position: {
my: 'top right',
at: 'bottom right',
target: $('#cn_' + num),
container: $container,
//viewport: true,
adjust: { method: 'shift none' }
},
style: {
tip: {
corner: true,
mimic: 'center',
width: 12,
height: 12,
border: true, // Detect border from tooltip style
//offset: 25
},
classes: 'qtip-comment'
},
events: {
show: function (event, api) {
...
},
hide: function (event, api) {
...
}
}
});
Example of jalopnik page which shows what I am looking for (FWIW jalopnik example doesn't use qtip2).
I don't think qtip API supports this functionality. I ended up re-positioning the tooltip on visible event.
I have updated the demo page and jsfiddle link below is code for doing this.
events: {
visible: function (event, api) {
var $qtipControl = $(event.target);
$qtipControl.css({ 'left': contentPosition.left + "px" });
var $qtipTipControl = $qtipControl.find(".qtip-tip");
var $target = api.get("position.target");
$qtipTipControl.css({ "right": 'auto' });
//I am using jquery.ui position
$qtipTipControl.position({
my: "center top",
at: "center bottom",
of: $target
});
}
}
Problem with this approach is that there is noticeable jump when I re-position the qTip. But in lack of any other option for time being I will settle with this.
The ideal approach would be to allow callback method thru position.adjust currently it only supports static values for x and y, if a method was allowed here it would make things much smoother.
Im beginner with ExtJS and I want to create the audio player with ExtJS and I don't know how to insert Xtemplate to the gridpanel column to display audio files. Maybe someone help me with it.
Thanks for any advise.
Thanks, I solved the problem by using xtype: 'templatecolumn' and config tpl
Ext.define('PV.view.player.Playlist', {
extend: 'Ext.grid.Panel',
alias: 'widget.playlist',
title: 'Music',
store: 'Playlist',
initComponent: function() {
this.columns = [
{
xtype: 'templatecolumn',
dataIndex: 'url',
tpl: '<audio controls src={url}></audio>'
}
];
this.callParent(arguments);
}
});
You can use following code to to create mp3 player. Make sure your browser supports html 5.
Ext.create('Ext.form.Panel', {
bodyPadding: 10,
border: false ,
height:200,
width:200,
items: [{
xtype: 'label',
fieldLabel: 'Audio File',
html:'<audio controls><source src="yariyan.mp3" type="audio/mpeg">Your browser does not support the audio tag.</audio>'
}]
});
I need to load the YouTube API locally (Google Extension not allowing external scripts). So I downloaded the files into my directory:
https://www.youtube.com/player_api
https://s.ytimg.com/yts/jsbin/www-widgetapi-vfl4qCmf3.js
However, when I try to programmatically inject this via a content script, it gives the following error:
Uncaught ReferenceError: YTConfig is not defined
To the OP: You were almost there! I'd like to acknowledge Jonathan Waldman, MSDN author, for mentioning this technique during one of his training sessions...
To review, YTConfig is defined at:
http://www.youtube.com/iframe_api
And here:
http://www.youtube.com/player_api
The iframe_api is the preferred link to use.
To recap, the links you provide above each link to JS code:
https://www.youtube.com/player_api
https://s.ytimg.com/yts/jsbin/www-widgetapi-vfl4qCmf3.js
You also need a Div tag with an id of "player" and another Script tag that lets you specify which video you want to see. So there are four Script tags total:
For content in iframe_api
For content at https://s.ytimg.com/yts/jsbin/www-widgetapi-vfl4qCmf3.js
For the player Div tag:
<div id="player"></div>
For JavaScript that configures the video
This translates loosely to:
<script>...place the player Div here</script>
<script>...place code from www-widgetapi-vfl4qCmf3.js here...</script>
<script>...place code from iframe_api here...</script>
<script>...place the code below here</script>
Here is the code for the final Script tag (note that you will likely want to change the videoId property so that it points to the ID of the desired video on the YouTube site):
<script>
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
When I did the above, the page worked and I had all of the YouTube code local to my development machine.
I've got Uncaught ReferenceError: options is not defined.
Here is the code:
// Create the tooltips only when document ready
$(document).ready(function()
{
// MAKE SURE YOUR SELECTOR MATCHES SOMETHING IN YOUR HTML!!!
$('a').qtip({
content: {
title: {
text: 'text',
button: 'close'
},
text: 'asfaf'
},
hide: {
fixed: true,
delay: 300
},
position: {
my: 'left center',
at: 'right center',
target: 'event'
}
});
});
You can also visit http://jsfiddle.net/H4aTZ/2/ .
Apparently there is a problem regarding the title and position working together. Probably they are going to release a update soon.
Meanwhile, if you use nightly version it actually works :)
http://qtip2.com/v/nightly/
I'm new using Sencha Touch 2, and I've started developing a Tablet App. I'm using Sencha Architect for design and write the code, and my app has a card layout with "left-side" and "right-side". On the left I have a main menu with some buttons. This menu is all time on the left. On the right side, I want to change the views depending what menubutton was clicked and where the user want to go (It will have more than 3 levels navigation after every button click).
My problem now is "How to change the views?". Until now, I had a Navigation.View on the right, and I has using this.getPanelFrame().push(view); method. I have problems with toolbars when a load something into navegation.view, and I know how to create views and push, but after thant I dont know how to load this views again.
I Link too an image where you can the structure of my components. My main doubt is: do I have to use a navigation.view as a "frame" to load inside other views? How to change an load others? Any alternatives?
Thanks a million"
CONTROLLER
Ext.define('MyApp.controller.Main', {
extend: 'Ext.app.Controller',
config: {
refs: {
panelFrame: '#PanelFrame'
},
control: {
"button#btnclientes": {
tap: 'onBtnclientesTap'
},
"#btnpedidos": {
tap: 'onBtnpedidosTap'
}
}
},
onBtnclientesTap: function(button, e, options) {
var view = Ext.create("MyApp.view.ClientesListView");
this.getPanelFrame().push(view);
},
onBtnpedidosTap: function(button, e, options) {
var view = Ext.create("MyApp.view.ClientesNewView");
this.getPanelFrame().push(view);
}
});
why dont you create a container in the right side.
and then in the items: call each view with the xtype
{
xtype: 'container',
items: [
{
xtype: 'view1',
id: 'Cview1',
hidden:true,
},
{
xtype: 'view2',
id: 'Cview2',
hidden:true,
},
{
xtype: 'view3',
id: 'Cview3',
height:'auto',
hidden:true,
}]
and then in the handler of the button you just hide the other views and show your selected view like:
{
xtype: 'button',
handler:function(){
Ext.getCmp('Cview1').hide();
Ext.getCmp('Cview2').hide();
Ext.getCmp('Cview3').show();
}
}