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...
Related
I'm quite new to Sencha Extjs6. I'm making a universal app (focusing on the mobile right now) and I'm trying to add a NestedList into a Menu. I have the Menu sliding in from the left and I can display the NestedList, but when I drill down the items in the list get mixed up? I.e. It'll show the parent item as well as its children. If I click back to the root then it'll still display all the leaf nodes etc when it should just show the root item. There's no slide animation between the items either so it makes me think it's not currently possible to use it this way?
When I create the NestedList in isolation (not added to an Ext.Menu) then it works as expected (similar to the KitchenSink example).
This is what I have thus far:
MenuList.js
Ext.define('mobile.view.menu.MenuList', {
extend: 'Ext.NestedList',
xtype: 'menulist',
store: 'mobile.store.menu.MenuListStore',
controller: 'listcontroller',
displayField: 'text',
title: 'Menu',
width: '100%',
itemId: 'menulist',
layout: 'fit',
styleHtmlContent: true,
useTitleAsBackText: false,
backText: ' ',
scrollable: true
});
NavigationMenu.js The nested list is added to this.
Ext.define('mobile.view.menu.NavigationMenu', {
extend: 'Ext.Menu',
xtype: 'navigation',
controller: 'navigation-controller',
renderTo: document.body
...
...
...
getMenuCfg: function(side) {
var me = this;
return {
items:[{
xtype: 'menulist'
}, {
text: 'Log out',
textAlign: 'left'
...
}]
}
}
MenuListStore.js
I have my own data, but I tried it with the carregions example and still didn't change the behaviour.
Ext.define('mobile.store.menu.MenuListStore', {
extend: 'Ext.data.TreeStore',
config: {
model: 'mobile.model.menu.MenuItem',
root: {},
proxy: {
type: 'ajax',
url: 'resources/carregions.json'
}
}
});
MenuItem.js
Ext.define('mobile.model.menu.MenuItem', {
extend: 'Ext.data.Model',
config: {
fields: ['text']
}
});
In a nutshell it works as a standalone component when added to the viewport, but not when I add it as a component into a menu. Any help or guidance would be fantastic. Thanks a lot guys. :)
I managed to solve it. It seems that removing layout: 'fit' got it working.
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 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.
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.
I am creating an application with Ext-JS 4.
Cards:
1.) Login card
2.) Application card
Application card has a border layout.
When I show them separately, they work but when I put them in a Viewport together, they don't work.
Here is my Viewport:
Ext.define('MyApp.view.Viewport', {
extend: 'Ext.container.Viewport',
layout: 'card',
items: [
{
xtype: 'loginform',
},
{
xtype: 'mainapp'
}
]
});
Here is a part of my Login card:
Ext.define('Sabrina.view.login.Form' ,{
extend: 'Ext.form.FormPanel',
alias : 'widget.loginform',
name: 'loginform',
frame: true,
title: 'Login',
bodyPadding: '5px 5px 0',
width: 350,
...
Here is a part of my Application card:
Ext.define('Sabrina.view.Main', {
extend: 'Ext.panel.Panel',
alias: ['widget.mainapp'],
layout: 'border',
items: [
//here I have 'west' and 'center' regions
]
I've created the same components in a different application separately and they work but here not. Do I have to put something more if I want a border layout inside card layout?
I'm getting this:
Uncaught TypeError: Cannot call method 'substring' of undefined
Thank you. :)
viewport can only handle one element, while cardlayout manages many with only one active. Make the only element of the viewport a container with cardlayout and give the viewport a fitlayout, that should work.
Your error sounds more like unknown xtypes. Anyway, try the descriped layout, maybe the error is gone.
Why don't you show a login window as modal? Using a card layout for just login and then the actual app is overkill in my opinion.