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.
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({...});
});
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 was wondering how I should start making a custom composite component. One that has a border layout, but for which its items show in the center region of the border layout. The following image shows what I'm trying to achieve:
In pseudo-code this would be:
Ext.define('App.custom.ContentView', {
extend: 'Ext.container.Container',
xtype: 'contentview',
layout: 'border',
northCmp: ..., // Custom north region component.
westCmp: ..., // Custom west region component.
centerCmp: ..., // Placeholder for the items it will have.
items: [] // Filled in by each implementation, shown in the center region.
});
Ext.create('App.custom.ContentView', {
layout: 'vbox', // Applies to center region of 'contentview'.
items: [
// Items that go into the center region of the 'contentview'.
]
});
I have looked through the ExtJS source code, and viewed a couple of examples at the Sencha Market; but I have not found an obvious example that does not include a lot of duplicate code.
Any help, or nudge in the right direction, would be greatly appreciated! :)
You should not do that. Please, don't let me be misunderstood, your intentions are good but the implementation you describe will grip in some point in the future. I know because I did something similar when I debuted with Ext. The idea of tuning the component declaration to your tastes/need/whatever may seem like a pleasant simplification... Unfortunately, in practice what you want to do is to give another meaning to an existing construct (items in your case). Here's what it will really bring you:
All code external to your application (that includes Ext, and Ext future releases!) will expect components/container to behave the classic way. That is, that the items of a container are really the items it contains, not the items of one of its children. Unexpected behaviour is to be expected.
You'll inevitably want to customize this component in some ways. You've already started, with the layout of the center region. If you rewrite the way the component work, you'll have to write some kind of config proxy to any feature you want to use. Big burden instead of a little saving. Doesn't worth it.
And finally, in some time you'll have forgotten all about what you've done with this component. And you'll have to debug your code just to understand what it is supposed to do (that is, before debugging the real issues).
Sorry for lecturing... All that being said, that doesn't mean there's not a way to come close to what you want without falling prey to reframing the framework.
Here's how I would do it (fiddle):
Ext.define('My.custom.BorderContainer', {
extend: 'Ext.container.Container'
// xtype is used in Ext3 and Touch... Ext4 uses aliases
,alias: 'widget.contentview'
,layout: 'border'
,items: [{
region: 'north'
,xtype: 'container'
,html: "<h1>Some header</h1>"
,style: 'background-color: lightblue;'
},{
region: 'west'
,xtype: 'container'
,split: true
,html: "<h1>Some menu</h1>"
,style: 'background-color: purple;'
},{
region: 'center'
,xtype: 'container'
}]
/**
* Configuration of the center panel.
*
* #cfg {Object/Ext.Component}
*/
,center: null
,initComponent: function() {
var center = this.center;
if (center) {
if (center instanceof Ext.Component) {
center.region = 'center';
} else {
// never modify a passed config object, that could
// break the expectations of the using code
center = Ext.clone(center);
// apply default config, including the region
center = Ext.applyIf(center, this.items[2]);
}
this.items[2] = center;
}
// else use default config, already in place
this.callParent(arguments);
}
});
Notice how I added a new center config option instead of trying to recycle existing ones (items, layout, etc.). That allows me to put anything I want, customized to the bone, and with usual syntax, in that. Future me and coworkers will probably send me chocolates for that! For example:
Ext.widget('contentview', {
renderTo: Ext.getBody()
,height: 300
,center: {
layout: {
type: 'vbox'
,align: 'center'
}
,defaults: {
xtype: 'component'
,margin: 10
,padding: 10
}
,items: [{
html: 'Red'
,style: 'background-color: green;'
},{
html: 'Green'
,style: 'background-color: blue;'
},{
html: 'Blue'
,style: 'background-color: red;'
}]
}
});
Ext.widget('contentview', {
renderTo: Ext.getBody()
,height: 300
,center: {
xtype: 'tabpanel'
,tabPosition: 'bottom'
,items: [{
title: 'First Tab'
,html: "I'm empty!"
},{
title: 'Second Tab'
}]
}
});
Ext.widget('contentview', {
renderTo: Ext.getBody()
,height: 300
// passing a component instance instead of a config object
,center: Ext.widget('button', {
text: "Foo"
})
});
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...
I'm following examples in the "ExtJS in Action" book and I ran into a problem with one of them. The code intends to add new panels to a window, unfortunately when the panels being added are collapsed by default, they are not rendered correctly.
Here is the code in question:
var childPnl1 = {
frame: true,
height: 50,
html: 'My First Child Panel',
title: 'First children are fun'
};
var myWin = new Ext.Window({
height: 300,
width: 300,
title: 'A window with a container layout',
autoScroll: true,
items: [
childPnl1
],
tbar: [
{
text: 'Add child',
handler: function() {
var numItems = myWin.items.getCount() + 1;
myWin.add({
title: 'Child number ' + numItems,
height: 60,
frame: true,
collapsible: true,
collapsed: true,
html: 'Yay, another child!'
});
myWin.doLayout();
}}
]
});
myWin.show();
When I run it, I get the result presented in this fiddle:
http://jsfiddle.net/PHaP4/
When I hit the 'Add child' button, the collapsed panels are rendered as very narrow elements, as if width was not properly set.
Is this a bug in Ext or is there a new way of doing this properly in ExtJS4?
The new public 4.0.7 release seems no to have this bug fixed yet.
Looks like a bug in ExtJS 4.0.2, and appears to be fixed in ExtJS 4.0.5. Here is what I found in the release notes:
[EXTJSIV-2547] - Child components not rendered.sized in initially
collapsed, uncontained Panel.
My job has a premium account, so I was able to download and check 4.0.5. You'll have to wait for the general release, though.