I am using sencha touch 2 PR1 .when I click on alert button the alert box which gets open does not have 'Ok' button and its height covers entire page.
here is my view
Ext.define('MyTask.view.Main', {
extend: 'Ext.Container',
alias: 'widget.main',
config: {
items: [
{
xtype : 'button',
cls : 'demobtn',
ui : 'round',
margin: '10 0',
text: 'Alert',
handler: function() {
Ext.Viewport.add(Ext.Msg);
Ext.Msg.alert('Title', 'The quick brown fox jumped over the lazy dog.', Ext.emptyFn);
}
}
]
}
});
and controller
Ext.define('MyTask.controller.TestController', {
extend: 'Ext.app.Controller',
views: ['Main'],
refs: [
{
ref : 'main',
selector: 'main',
autoCreate: true,
xtype : 'main'
},
],
init: function() {
mainPanel=this.getMain();
Ext.Viewport.add(mainPanel);
}
});
and app.js
Ext.Loader.setConfig({ enabled: true });
Ext.require([
'Ext.XTemplate',
'Ext.Panel',
'Ext.Button',
'Ext.List',
'Ext.MessageBox'
]);
Ext.application({
name: 'MyTask',
controllers: ['TestController'],
});
Why it is not getting displayed properly?
I tested on crome and ipad.
thanks in advance.
Why are you adding the Ext.Msg to the viewport. Change the handler function as follows
handler: function() {
Ext.Msg.alert('Title', 'The quick brown fox jumped over the lazy dog.', Ext.emptyFn);
}
ie remove Ext.Viewport.add(Ext.Msg);
Note : I tested it on Sencha 1.1.0
Hope it will help...
Hey guys below code would help you to solve your problem:-
The code tested on sencha touch 2.0 final.
Ext.Msg.show({
title: 'Title',
message: 'The quick brown fox jumped over the lazy dog.',
buttons: [{
id: 'alertCancelBtn',
iconCls: 'user',
iconMask: true,
text: 'Ok',
ui: 'round decline'
}], // buttons
height: 200,
width: 150,
// Ext.emptyFn
}); // show()
I got the same issue, even with Sencha Touch version 2.0.0.
At the first time, I thought it is a bug of Sencha Touch.
After spending couple days to research, I've just found out the root cause of this bug.
I've put an extra tag before the HTML5 <!DOCTYPE html> declaration in my html page.
I corrected it by put the HTML5 declaration <!DOCTYPE html> on the very top of my page and it fixed my problem.
Related
I am new to sencha and I am trying to add audio player to my app, where the url for audio is an external link. here is the code I used
{
xtype:'audio',
url:'http://dl.enjoypur.vc/upload_file/5570/6757/%20Bollywood%20Hindi%20Mp3%20Songs%202015/Prem%20Ratan%20Dhan%20Payo%20(2015)%20Mp3%20Songs/02%20Prem%20Ratan%20Dhan%20Payo%20%28Title%20Song%29%20Palak%20Muchhal%20-%20190Kbps.mp3',
title:'Sample MP3',
thumb:'media/sample.jpg'
},
App shows me a audio player in view, but that is just unresponsive and doesn't play. is there a way to insert audio from external link?
Thanks in advance
It would be really helpfull if you share more of your code in matter to find the bug. Well this works for me:
Ext.create('Ext.Container', {
fullscreen: true,
layout: {
type: 'vbox',
pack: 'center'
},
items: [
{
xtype : 'toolbar',
docked: 'top',
title : 'Ext.Audio'
},
{
xtype: 'toolbar',
docked: 'bottom',
defaults: {
xtype: 'button',
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');
}
},
items: [
{ text: 'Play', flex: 1 }
]
},
{
html: 'Hidden audio!',
styleHtmlContent: true
},
{
xtype : 'audio',
hidden: true,
url : 'http://dl.enjoypur.vc/upload_file/5570/6757/%20Bollywood%20Hindi%20Mp3%20Songs%202015/Prem%20Ratan%20Dhan%20Payo%20(2015)%20Mp3%20Songs/02%20Prem%20Ratan%20Dhan%20Payo%20%28Title%20Song%29%20Palak%20Muchhal%20-%20190Kbps.mp3'
}]
});
Also I highly recommend the Touch documentation with examples
Tested within fiddle. Pretty nice music. I like this Oriental type of music. I hope it helps you :-)
I need to be able to hide the grid(what's under the Food titlebar) when the food title bar is tapped.
From what I have found I had to use Event Delegation, but for some reason my testing with an Alert() didnt do anything when I had click on Food TitleBar.
Can someone help me? (Using architect, so it would be easier for me to have the solution using architect since most of the code generated is ReadOnly -_-')
I've only used architect once. But Im pretty sure there is an interface to edit the code that it is generated. Here is the demo to implement a click on the titlebar.
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
name: ('SF' || 'SenchaFiddle'),
launch: function () {
Ext.define('MyApp.view.home', {
extend: 'Ext.Container',
xtype: 'homecontainer',
config: {
items: [{
xtype: 'toolbar',
title: 'test',
dock: 'top',
listeners: {
painted: function (element, opt) {
element.on('tap', function () {
alert('Test');
});
}
}
}]
}
});
Ext.Viewport.add(Ext.create('MyApp.view.home'));
}
});
I'm usign Sencha Touch 2.1 so this code should work (link I used for inspiration):
defaultBackButtonText: null,
useTitleForBackButtonText: false,
backButton: {
// ui: 'toolbar-back',
// align : 'left',
iconCls: 'back',
iconMask: true
},
But I can still see icon and text as well.
Thanks a lot.
I use an empty string instead of null for defaultBackButtonText, and it removes the text (also using ST 2.1):
defaultBackButtonText: '',
EDIT: To clarify, this is an example of the full config for a nav view with a back button using an icon with no text:
Ext.define('MyApp.view.GroupNavView', {
extend: 'Ext.navigation.View',
xtype: 'groupnavview',
config: {
defaultBackButtonText: '',
navigationBar: {
backButton: {
iconCls:'arrow_left',
iconMask: true,
ui: 'dark',
cls: 'backButton'
}
},
items: [
{
xtype: 'mylist'
}
]
}
});
I think there is no "back" iconCls available in the default theme. Try using some other icon like "home". Also, you missed the navigationBar config. It should be like this:
defaultBackButtonText : null,
navigationBar: {
backButton : {
align : 'left',
iconCls: 'home',
iconMask: true,
ui : 'plain'
}
},
As I tested, I see only home icon there - nothing else.
I've got an Container (which layout is HBox) and want to dynamically slide-in a panel on the left side of it (the panel shall not use the full screen width, but e.g. 1/3 of it).
I can't get it to work.
Here is what I tried:
Ext.define('MegatheriumProject.view.MainContainer', {
extend: 'Ext.Container',
alias: 'widget.maincontainerview',
requires: ['Ext.Container', 'Ext.TitleBar'],
config: {
layout: {
type: 'hbox',
animation: {
type: 'slide',
direction: 'right'
}
},
items: [
{
flex: 3,
xtype: 'titlebar',
title: 'Megatherium',
docked: 'top',
items: [
// some items
]
}
],
// some other configuration, listeners aso
This is my NavigationPanel that shall be slided into the container:
Ext.define('MegatheriumProject.view.NavigationPanel', {
extend: 'Ext.form.Panel',
alias: 'widget.navigationpanelview',
requires: ['Ext.form.Panel'],
config: {
flex: 1,
// some other config
And this is the method with which I try to add it:
showNavigation: function() {
this.getMainContainerView().add(this.getNavigationPanelView());
},
... but it turned out that it appears but doesn't get animated and doesn't use flex.
Any help?
Best greetings,
Martin
Here's a way of doing it :
http://www.senchafiddle.com/#Qh35F
Hope this helped
Thanks to TDeBailleul, it works that way but does not the exact thing that I want ;).
I wanted the title bar to get animated and scrolled away, too.
The navigation sidebar by wnielson did it for me :).
Title of the Toolbar gets cut when too long text in it, see the picture:
Here is the code:
launch: function () {
var myTabPanel = Ext.create('Ext.Toolbar', {
fullscreen: true,
title: {
title: 'BLA BLA BLA BLA BLA',
style: {
'text-align': 'left'
}
},
docked: 'top',
defaults: {
iconMask: true,
ui: 'plain'
}
});
[...]
myTabPanel.add([ start, ...]);
The code for 'start':
Ext.define('MyApp.view.Start', {
extend: 'Ext.Button',
config: {
html: 'Start',
iconCls: 'home'
}
});
No worry!
It's a Chrome issue and also bug registered for Sencha to rectify it. It will soon be fixed in the upcoming releases.
This is a bug, read this post and view my comment for a temporary fix: SenchaTouch2 - NestedList - Title "cut off"