In My Sencha touch 2.0 app I am having an issue with a JW javascript video player not playing when there are two overlays up at the same time and I wanted to see if anyone could better elaborate on what is going wrong or what may be causing it so I can try and look around and try to figure out what is going on (i am new to sencha and javascript). I have the project loaded up at http://www.cox7.com/sean even tho it will only be run on an iPad.
Try the steps below to better see what I am talking about and also note that a lot of the jwplayer events are being logged in the javascript console so you can see whats going on......
1) click on any of the panels on the main page which will open a overlay with the video title description and a javascript video player. You will see that you can play the video.
2) do a search for "stem" in the search bar (top right corner of the main screen) this will then display a pannel with the search results.
3) click on any of the search results which will then open that same video player pannel but this time you will not be able to click the play button. It's almost like the pannel is not the top most element but I can still scroll and the onTouchStart event fires but the video never starts.
Anyone know what might be causing this? any help is much appreciated.
Here is my controller setup for the search result overlay....
showStreamSearchPopup: function showStreamPopup(list, index, node, record) {
//alert(record.get('title'));
//var record = getData().getStore().getAt(index);
StreamVideoSearchPlayerOverlay = Ext.Viewport.add({
xtype: 'panel',
modal: true,
hideOnMaskTap: true,
showAnimation: {
type: 'popIn',
duration: 200,
easing: 'ease-out'
},
hideAnimation: {
type: 'popOut',
duration: 200,
easing: 'ease-out'
},
centered: true,
width: '78%',
height: '68%',
styleHtmlContent: true,
listeners: {
painted: function() {
console.log('StreamVideoSearchPlayerOverlay painted');
},
activeitemchange :function() {
console.log('StreamVideoSearchPlayerOverlay activeitemchange');
}
},
items: [{
style: 'padding:1em;',
html:[ "<div class=\"postTitle\">",record.get('title'),"</div><div class=\"postDate\">Added on ",
record.get('date'),"</div><div class=\"postDesc\">",record.get('content'),"</div>"
].join("")
},
{
xtype: 'panel',
layout: 'card',
cls: 'videoPlayeriPad',
items:[{
xtype: 'jwplayer',
playerOptions: {
file: record.get('ipadvideo'),
image: record.get('poster'),
width: 500,
height: 281,
plugins: {
'gapro-1': { accountid: 'UA-23363754-1', idstring: '||title||' }
},
skin: 'http://www.cox7.com/wp-content/mediaplayer/skins/beelden/beelden/glow.xml',
}
}]
}
],
scrollable: true
}
);
StreamVideoSearchPlayerOverlay.show();
StreamVideoSearchPlayerOverlay.setActiveItem(2);
},
And here is my controller setup for the normal home screen asset overlay...
showStreamPopup: function showStreamPopup(list, index, node, record) {
//alert(record.get('title'));
//var record = getData().getStore().getAt(index);
StreamVideoPlayerOverlay = Ext.Viewport.add({
xtype: 'panel',
modal: true,
hideOnMaskTap: true,
showAnimation: {
type: 'popIn',
duration: 200,
easing: 'ease-out'
},
hideAnimation: {
type: 'popOut',
duration: 200,
easing: 'ease-out'
},
centered: true,
width: '78%',
height: '68%',
styleHtmlContent: true,
listeners: {
painted: function() {
console.log('StreamVideoPlayerOverlay painted');
},
activeitemchange :function() {
console.log('StreamVideoPlayerOverlay activeitemchange');
}
},
items: [{
style: 'padding:1em;',
html:[ "<div class=\"postTitle\">",record.get('title'),"</div><div class=\"postDate\">Added on ",
record.get('date'),"</div><div class=\"postDesc\">",record.get('content'),"</div>"
].join("")
},
{
xtype: 'panel',
layout: 'card',
cls: 'videoPlayeriPad',
items:[{
xtype: 'jwplayer',
playerOptions: {
file: record.get('ipadvideo'),
image: record.get('poster'),
width: 500,
height: 281,
plugins: {
'gapro-1': { accountid: 'UA-23363754-1', idstring: '||title||' }
},
skin: 'http://www.cox7.com/wp-content/mediaplayer/skins/beelden/beelden/glow.xml',
}
}]
}
],
scrollable: true
}
);
StreamVideoPlayerOverlay.setActiveItem(2);
StreamVideoPlayerOverlay.show();
}
Related
I have a Panel and in that panel I am loading grid dynamically.
Here is code for panel
{
xtype: 'panel',
region: 'center',
frame: true,
scrollable: true,
itemId: 'MyGrid',
reference: 'MyGrid',
layout: {
type: 'vbox',
align: 'stretch'
},
items: []
}
and Sample of grid.
Ext.define("MyApp.view.MYGrid", {
extend: 'Ext.grid.Panel',
alias: 'widget.MyGrid',
requires: [
'Ext.grid.filters.Filters',
'Ext.form.field.ComboBox',
],
emptyText: 'No data available.',
disableSelection: true,
margin: '3 3 0 3',
collapsible: true,
multiSelect: false,
closable: true,
columnLines: true,
uniqueFields: [],
});
initComponent: function() {
var me = this;
me.fields = me.prepareFields(me.headersXmlDoc);
me.columns = me.prepareColumns(me.headersXmlDoc);
me.store = me.prepareGridStore(me.headersXmlDoc);
this.callParent(arguments);
},
Now when Grid have enough data then both horizental and vertical scroll is coming correctly but When grid have less data with more columns scrollbar is coming down. I supposed just beow the last record but it comming in down.
All the grid is taking same height though it have a less record.
Example pic
https://i.stack.imgur.com/RKdTb.png
I want scrollbar just below the last data. By debugging I found layout : fit
But not sure how to overcome out from that.
Can anybody help me that. Thanks for help.
You need to apply overflowY as true for grid.I don't think there is some problem with fit layout.If above config doesn't work share some fiddle.
My aim is simple, for some needs, I have to test the "pop-up function" in ExtJS via the widget.window.
I've created a button in HTML and a pop-u in a JS file, when I click it, everything works fine, the pop-up is well displayed.
The HTML button is coded this way :
<input type="button" id="popup-map" value="Pop Up"/>
And the JS refers to the button this way :
Ext.application({
name: 'popup',
launch: function() {
var popup,
button = Ext.get('popup-map');
button.on('click', function(){
if (!popup) {
popup = Ext.create('widget.window', {
title: 'Pop-Up',
header: {
titlePosition: 2,
titleAlign: 'center'
},
border: false,
closable: true,
closeAction: 'hide',
width: 800,
minWidth: 400,
maxWidth: 1200,
height: 500,
minHeight: 550,
maxHeight: 800,
tools: [{type: 'help'}],
layout: {
type: 'border',
padding: 2
},
items: [
{
region: 'center',
xtype: 'tabpanel',
items: [
mappanel,
{
title: 'Description',
html: 'Attributs de l\'objet sous forme de tableau'
}
]
}
]
});
}
button.dom.disabled = true;
if (popup.isVisible()) {
popup.hide(this, function() {
button.dom.disabled = false;
});
} else {
popup.show(this, function() {
button.dom.disabled = false;
});
}
});
Problem, if I have two buttons that contains the id "popup-map", only the first one declared is working. I guess it's pretty normal the way I've coded it.
How can I call the popup contains in the JS file by clicking several buttons in HTML ?
Thanks :-)
Use a CSS class instead of a duplicated id. Duplicated ids are bad, you know that... Then use Ext.query instead of Ext.get. Your code should look something like this:
Ext.onReady(function() {
var popup;
function handler(button) {
if (!popup) {
// ...
}
// you've got button and popup, do your things
}
// adds the handler to every button with class 'popup-map' on the page
Ext.query('button.popup-map', function(button) {
button.on('click', handler);
});
});
I'm using Ext.onReady to wait for the DOM to be ready before searching for buttons on the page. That also gives us a closure for our local variables popup and handler.
Thanks to #rixo, here's the code working.
I've created a empty css class called customizer.
Ext.onReady(function() {
var popup, popup_visible;
function popup_constructor() {
//alert(this.getAttribute('pwet'));
if (!popup) {
popup = Ext.create('widget.window', {
title: 'Pop-Up',
id: 'popup',
header: {
titlePosition: 2,
titleAlign: 'center',
height: 30
},
border: false,
closable: true,
closeAction: 'hide',
width: 800,
minWidth: 400,
maxWidth: 1200,
height: 500,
minHeight: 550,
maxHeight: 800,
tools: [{type: 'help'}],
layout: {
type: 'border',
padding: 10
},
items: [
{
region: 'center',
xtype: 'tabpanel',
plain: true,
items: [
{
title: 'Carte',
html: 'On mettra la carte ici',
border: false,
},
{
title: 'Description',
html: 'Attributs de l\'objet sous forme de tableau',
border: false,
}
]
}
]
});
}
popup_visible = true;
if (popup.isVisible())
{
popup.hide(this, function() {
popup_visible = false;
});
}
else
{
popup.show(this, function() {
popup_visible = false;
});
}
}
var popup_show = Ext.query('.customizer');
Ext.each(popup_show, function (item) {
item = Ext.get(item);
item.on('click', popup_constructor);
}, this);
});
I'm attempting to render a simple carousel in Sencha Touch, however, it's not showing up. The only thing I see are the indicator dots for the items. Inspecting in Chrome shows that the tags are being added, but I can't see them.
Carousel View:
Ext.define('Project.view.ChartCarousel', {
extend : 'Ext.Carousel',
xtype : 'chartCarousel',
config : {
title : 'Title',
fullscreen: 'true',
width: '100',
height: '100',
jumpToIndex: 0,
defaults : {
padding: '10 10 10 10'
},
items : [{
html:'<div style="text-align:center">test 1</div>'
}, {
html:'<div style="text-align:center">test 2</div>'
}, {
html:'<div style="text-align:center">test 3</div>'
}]
}
});
Containing View:
Ext.define('Project.view.SummaryChart',{
extend: 'Ext.form.Panel',
xtype: 'summaryChart',
requires: [
'Ext.Toolbar'
],
config: {
items: [
{
xtype: 'chartCarousel'
}
]
},
initialize: function() {
this.callParent(arguments);
}
});
I found the answer. I needed to add flex: '1' to the carousel's config.
I'm struggling mightily to get the height of an ExtJS panel and the only reason I can think it's any different is that it's the panel defined as a border region, because I've not had this problem otherwise (maybe I need to report a bug to them). I'll begin with some code that demonstrates how I'm trying to get the height, with results demonstrating what the height really is, what ExtJS says it is, and how it's not an issue with a panel using a different layout (one of the panels inside the border region):
'cmBuildTab #cmProductExplorer': {
afterrender: function(productExplorer) {
var domNode = Ext.getDom(productExplorer.el),
savedSearchesPanel = productExplorer.down('#savedSearchesPanel');
console.log('productExplorer.getHeight(): ' + productExplorer.getHeight());
console.log(productExplorer.componentLayout);
console.log(productExplorer.componentLayout.lastComponentSize);
console.log(domNode);
console.log('domNode.style.height: ' + domNode.style.height);
console.log('savedSearchesPanel.getHeight(): ' + savedSearchesPanel.getHeight());
}
},
I was initally encouraged I might have a couple of alternate ways to get the height, via the dom node, or via componentLayout.lastComponentSize but neither of these are accessible to Javascript code, only the chrome console. My final try then would be to parse the returned dom string but that is a horrible hack. Suggestions appreciated; below the console.log results is the pertinent portion of my view config.
console.log results:
productExplorer.getHeight(): 2
Ext.Class.newClass
autoSized: Object
borders: Object
calculateDockBoxes_running: false
childrenChanged: true
frameSize: Object
id: "dock-1155"
info: Object
initialized: true
initializedBorders: true
lastComponentSize: Object
height: 787
width: 254
__proto__: Object
layoutBusy: false
layoutCancelled: false
onLayout_running: false
owner: Ext.Class.newClass
previousComponentSize: undefined
targetInfo: Object
__proto__: Class.registerPreprocessor.prototype
undefined
<div id="panel-1049" class="x-panel x-box-item x-panel-default" role="presentation" aria-labelledby="component-1198" style="margin: 0px; width: 254px; height: 787px; left: 0px; top: 0px; ">…</div>
domNode.style.height:
savedSearchesPanel.getHeight(): 151
View config (partial):
},{
region: 'west',
collapsible: true,
title: 'Product Explorer',
itemId: 'cmProductExplorer',
split: true,
width: '20%',
minWidth: 100,
layout: {
type: 'vbox',
pack : 'start',
},
items: [{
collapsible: true,
width: '100%',
border: false,
title: 'Search',
itemId: 'savedSearchesPanel',
items: [{
border: false,
xtype: 'cmSearchTermAccordionPanel'
},{
border: false,
margin: '5 20 0 20',
html: 'Saved Searches:<hr>'
}]
},{
afterrender is not the event you want to use to determine the heights of components, it fires when the elements have been rendered not after they have been sized. If you are using 4.1 you can use the boxready event which fires only once the the container is intially sized http://docs.sencha.com/ext-js/4-1/#!/api/Ext.AbstractComponent-event-boxready . If not you can use the afterlayout event to determine size but that event fires every layout.
Also fyi widths as percentages are not documented as supported in 4.0, I've seen them work and I've seen them fail.
Here is some code I hijacked from the Viewport example thanks to a court ruling this is ok.
4.1
Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [{
region: 'north',
html: '<h1 class="x-panel-header">Page Title</h1>',
border: false,
margins: '0 0 5 0'
}, {
region: 'west',
collapsible: true,
title: 'Navigation',
width: 150,
//ADD LISTENERS
listeners: {
afterrender:function(){console.log( 'afterrender ' +this.getHeight())},
boxready:function(){console.log( 'boxready ' +this.getHeight())}
}
// could use a TreePanel or AccordionLayout for navigational items
}, {
region: 'south',
title: 'South Panel',
collapsible: true,
html: 'Information goes here',
split: true,
height: 100,
minHeight: 100
}, {
region: 'east',
title: 'East Panel',
collapsible: true,
split: true,
width: 150
}, {
region: 'center',
xtype: 'tabpanel', // TabPanel itself has no title
activeTab: 0, // First tab active by default
items: {
title: 'Default Tab',
html: 'The first tab\'s content. Others may be added dynamically'
}
}]
});
Output :
afterrender 2
boxready 276
I've been learning sencha touch 2.0 over the last 2 weeks and i've stumbled onto two problems. What i would like to do is have a static top bar and bottom bar on my page and let the dynamic content be controlled by buttons placed at the bottom dock. I've spent 4 hours on trying to get this to work the way i want to, i'm almost there but i need a little guidance.
My first problem is that i want to add an image to the static top dock. The code that was suggested in another form does not work.
var topBar = new Ext.BoxComponent(
{
xtype: 'box',
autoEl: {tag: 'img', src:'/resources/icons/icon.png'}
}
)
This code doesnt give any errors but it also doesnt show the required image. The image is 60px by 30px
The second problem i'm having is that i would like to add icons to my bottom dock so that when the user click on them, the page would change to show a new page. I have a form with 3 fields that i would like to link to one of the icons on the bottom dock so when the icon is clicked, the form would show. Here is the full code:
Ext.setup({
phoneStartupScreen : 'resources/images/icon.png',
icon : 'resources/images/Homescreen.png',
glossOnIcon : false,
onReady : function() {
var topBar = new Ext.BoxComponent(
{
xtype: 'box',
autoEl: {tag: 'img', src:'/resources/icons/icon.png'}
}
)
var tapHandler = function (btn, evt) {
alert("Button '" + btn.text + "' tapped.");
}
var form = new Ext.form.FormPanel({
items:
[
{
xtype: "textfield",
name: "name",
label: "Name",
placeHolder: "your name here"
},
{
xtype: "emailfield",
name: "email",
label: "Email",
placeHolder: "you#example.com"
},
{
xtype: "urlfield",
name: "url",
label: "Url",
placeHolder: "http://www.example.com"
}
]
})
var searchPageContent ={
html:'This is a test for search page'
}
var userPageContent ={
html:'This is a test for user page'
}
var dockedItems = [
{
xtype : 'toolbar',
dock : 'top',
items : topBar
},
{
xtype: "toolbar",
dock: "bottom",
items: [
{
xtype: 'spacer'
},
{
iconMask: true,
iconCls: "favorites",
items: form
},
{
xtype: 'spacer'
},
{
iconMask: true,
iconCls: "search",
items: searchPageContent
},
{
xtype: 'spacer'
},
{
iconMask: true,
iconCls: "user",
items: userPageContent
},
{
xtype: 'spacer'
},
]
}
]
new Ext.Panel({
id : 'buttonsPanel',
fullscreen : true,
dockedItems : dockedItems
});
}
});
as mentioned before, i have been able to create the static top and bottom bars but my image does not work in my top bar, which is my first problem, and when i click one of the 3 buttons, nothing happens; i would like my form to be displayed when i click my favorites button but nothing happens. Where have i gone wrong?
Thank you
After a few days of wrestling with sencha, i found an example that almost had what i wanted so modified it and it worked out exactly the way i wanted. I now have a static top bar and a static bottom bar with page icons such that when i click the page icons, the main content scrolls and the new page is displayed.
Ext.setup({
onReady: function() {
var topBar = new Ext.BoxComponent({
layout: 'hbox',
html:
'<img src="resources/icons/icon.png" height="30", width="48"/>',
flex: 1,
style:{
textAlign: 'center'
}
})
var dockedItems = [
{
//this creates the top bar, places it at the top of the page and gives it a background image
xtype : 'toolbar',
dock : 'top',
style: 'background-image:url("resources/images/backgroundSmall.png"); background-repeat: repeat-x;',
items : topBar
}
]
// Sub-page sections
// Main portion of the page, which includes top toolbar and content
var welcome = new Ext.Panel({
items: [{
html: 'this is the welcome screen'
}],
title: "Welcome",
iconCls: "welcome",
});
var search = new Ext.Panel({
items: [{
html: 'this is the search screen'
}],
title: "Search",
iconCls: "search",
});
// This is the outer panel with the bottom toolbar
var wrapper = new Ext.TabPanel({
fullscreen: true,
tabBar: {
dock: 'bottom',
style: 'background:#8a9cB2;',
layout: {
pack: 'center'
}
},
items: [
welcome,
search,
{
iconMask: true,
iconCls: "search"
},
{
iconMask: true,
iconCls: "user"
}
],
dockedItems: dockedItems
});
}
});