I am using sencha 2.3.1 and the following code (in app.js), to display some html content on page. But nothing is being displayed. Please tell where I am wrong.
Ext.application({
name: 'Sencha',
requires: ['Ext.tab.Panel'],
launch: function() {
//The whole app UI lives in this tab panel
Ext.Viewport.add({
xtype: 'tabpanel',
fullscreen: true,
tabBarPosition: 'bottom',
items: [
// This is the home page, just some simple html
{
title: 'Home',
iconCls: 'home',
cls: 'home',
scrollable: true,
html: [
'<img height=260 src="http://staging.sencha.com/img/sencha.png" />',
'<h1>Welcome to Sencha Touch</h1>',
"<p>Building the Getting Started app</p>",
'<h2>Sencha Touch (2.0.0)</h2>'
].join("")
}
]
})
}
});
Did a quick check in Sencha Fiddle, and your content seems to display.
https://fiddle.sencha.com/#fiddle/48m
However, I see you attached a cls property to this tabpanel, perhaps this is causing your problem.
Also, often things do not show up in Sencha because the height of the component is zero. Open up your DOM inspector and find your tabpanel and child elements and make sure they have a height of greater than zero. You may need to define a height, or use a different layout such as fit.
Related
When an application is created using Ext.application() (modern toolkit), pull-to-refresh functionality seems to be disabled on the mobile browsers. Is there any way to re-enable it?
Code:
Ext.application({
name : 'Fiddle',
launch : function() {
//Ext.Msg.alert('Fiddle', 'Welcome to Sencha Fiddle!');
Ext.Viewport.add({
xtype: 'panel',
title: 'Title',
html: 'content'
});
}
});
The problem described comes from the Ext.Viewport instance and more precisely - the modifications it makes to the styling of the body element. If i skip the 'normal' app launch process (for example - rendering the initial view directly on the body and return before Ext.application() call which creates the viewport) - it works as expected:
Ext.onReady(function () {
Ext.create({
xtype: 'panel',
renderTo: Ext.getBody(),
fullscreen: true,
title: 'Panel',
html: 'My panel text...'
});
return;
Ext.application({...});
});
How to Display two tabs inside the page/panel in Sencha mobile application, and one should be active default?
You need to provide some more detail so we understand exactly what you are looking for.
To start here is the example from ExtJS 6.2.0 modern for tabpanel.
CODE SNIPPET
Ext.create('Ext.TabPanel', {
fullscreen: true,
tabBarPosition: 'top',
defaults: {
styleHtmlContent: true
},
items: [{
title: 'Home',
iconCls: 'home',
html: 'Home Screen'
}, {
title: 'Contact',
iconCls: 'user',
html: 'Contact Screen'
}]
});
The home panel will display first as the default. Note when no xtype is defined it will default those to panels.
I have an application in ExtJS that uses a JWplayer for reproduce some videos. But i'm experiencing some weird bugs.
When the page loads it seems that the JWPlayer won't load and then I receive a black line where the player should be displayed.
I am loading the jwplayer inside a extjs panel.
Has anyone experienced this? Is there a way to solve that?
I have created a draggable floating panel with an instance of JW Player inside and it works just find.
Check it out, maybe you are doing something wrong there.
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.panel.Panel',{
title: 'Testing JW Player',
width: 480,
height: 300,
floating: true,
draggable: true,
layout: 'fit',
renderTo: Ext.getBody(),
items: [{
xtype: 'panel',
id: 'testing'
}],
listeners: {
afterrender : function(component) {
jwplayer('testing').setup({
file: "http://videos-jp.jwpsrv.com/zWLy8Jer/videos/HkauGhRi-1753142.mp4?77c801d752d5207784c49e7ed80fb953798fae0fcca03ecf79558491aa7db70fc9392eb19e958e847c3e486d709eab9f57d25c86934c4b6091bc427de8ab078578054aaba8384904c4762bd67442c3809470687047",
image: "http://demo.jwplayer.com/homepage/homepage_preroll.jpg"
});
}
}
});
}
});
You can access my fiddle here: https://fiddle.sencha.com/#fiddle/blb
JWPlayer is a nice library by the way, this was the first time I saw it, nice work.
For those whom may have the same issue that I had.
I was placing the player in a panel but I didn't set the height of the component. Since the player takes a while to load I guess that the Extjs just see it as a common div with no size.
I'm learning Sencha Touch 2, and I'm confused by a tab panel problem.
This is how I define my view.
Ext.define('NewApp.view.Main', {
extend: 'Ext.tab.Panel',
config: {
activeItem: 1,
items:
[{
title: 'info',
iconCls: 'info',
items:
[{
xtype: 'button',
text: 'button1',
}]
},
{
title: 'more',
iconCls: 'more'
}]
}
});
And in app.js:
Ext.application({
name: 'NewApp',
requires: [
'Ext.tab.Panel',
'Ext.Button'
],
views: [
'Main'
],
launch: function() {
Ext.Viewport.add(Ext.create('NewApp.view.Main'));
},
});
It's pretty simple. On one tab named 'info' there is a button ,while on the other tab 'more', nothing. The activeItem is set to 1 to make sure that the tab titled 'more' will be shown first.
However, when I launched the app I found the output different from expectation.
image link
The button, which should be shown on the first tab, now shows on not only the first tab, but also the second tab. However, when I slide to the 'info' tab and slide back to 'more' tab, the button is gone.
Can anyone tell me what should I do to get rid of the button on the second tab at first scene?
Try not to set the activeItem in the list.
Add to the launch method the following line:
Ext.Viewport.down('.tabpanel').setActiveItem(1);
That way it works.
I once had similar issues because of 'docked' property.
Try setting the tabbar docker bot or change the layout configs.
ST is not quite friendly with those property when they are not defined correctly.
This looks like basic but I am new to Sencha Touch and still have no idea how to implement this.
I want to create a welcome page where it shows only a logo in the center of the screen. Then after 5 seconds or so, It would load the main page.
Here's my code for the main view:
Ext.define('Sencha.view.Main', {
extend: 'Ext.Container',
xtype: 'mainpanel',
requires: [
'Sencha.view.Opening'
],
config: {
items: [{
xtype: 'opening'
}]
}
});
and this is the code for Opening.js:
Ext.define('Sencha.view.Opening', {
extend: 'Ext.Panel',
xtype: 'opening',
config: {
scrollable: false,
fullscreen: true,
html: '<div id="opening-logo"><img src="resources/images/logo.png"/></div>'
}
});
It should display a logo in the center of the screen. But in fact, it shows nothing. I've used Ext.Panel instead of Ext.Container but it doesn't work.
It works with Ext.navigation.View though, but for a welcome page, it shouldn't have a navigation header on the top of a screen.
What do I do wrong? Oh, and sorry for the bad English.
The common mistake when developping with Sencha Touch is to forget to set the layout of your view. The layout defines how your inner components are gonna be placed on the view. You can find more here
For a view with one component which you want to take the whole screen, you should take the layout fit like so :
Ext.define('Sencha.view.Main', {
extend: 'Ext.Container',
xtype: 'mainpanel',
requires: [
'Sencha.view.Opening'
],
config: {
layout: 'fit',
items: [{
xtype: 'opening'
}]
}
});
Hope this helped
What you need sounds more like a splash screen rather than a view... On an installed app the splash screen gets shown automatically between the start of the app and first view getting loaded...You can configure the startup screen property in your app.js file LINK
Hope it helps...