Hi I am trying to create a chrome app.
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('sample.html', {
'bounds': {
'width': 400,
'height': 400,
'left': 0,
'top': 0
}
});
This creates a window I could not navigate to another page.Is it not possible to do it? If so Is there some other option to do it? Can some one please help me
Related
I am developing a Task pane word add-in using JavaScript API, I have used below code to create a jQuery dialogbox dynamically using a function:
function myConfirm(dialogText, okFunc, cancelFunc, dialogTitle) {
$('<div style="padding: 10px; max-width: 500px; word-wrap: break-word;">'
+ dialogText + '</div>').dialog({
draggable: true,
modal: true,
resizable: false,
width: 'auto',
title: dialogTitle || 'Confirm',
minHeight: 75,
position: {
my: "center",
at: "center",
of: window
},
buttons: {
OK: function() {
if (typeof(okFunc) == 'function') {
setTimeout(okFunc, 50);
}
$(this).dialog('destroy');
},
Cancel: function() {
if (typeof(cancelFunc) == 'function') {
setTimeout(cancelFunc, 50);
}
$(this).dialog('destroy');
}
}
});
}
But when i open it first time to call myConfirm function, the page scroll goes to top and when i scroll down to click on dialog-box it again send the scroll back to top then i need to again scroll down, now i am able to click on dialog-box buttons. it works fine after first.
I need to set dynamically text of box and function on button clicks so i am creating it dynamically. I have also test it on Internet Explorer, it's working fine.
Please advice how i can fix it for word add-in.
You can try below code when you are calling your function :-
onclick="myConfirm();return false;"
Just add "return false;" after your function name as shown above.
Edit 1:-
Or you can return false from your function as well.
Edit 2 :-
$form.show().dialog({
close: function (event) { event.preventDefault(); }
resizable: false,
etc....
});
In ExtJS 4.2, el.dom.click() triggered a click event. Moving to ExtJS 5 broke this functionality in IE 10 and PhantomJS. It is a big problem for automation testing.
Following is an example:
https://fiddle.sencha.com/#fiddle/13l3
Ext.require('Ext.panel.Panel');
Ext.onReady(function(){
var p = new Ext.panel.Panel({
width: 300,
height: 200,
renderTo: Ext.getBody(),
margin: 15,
bodyPadding: 5,
title: 'Click Panel',
listeners:{
click: {
element: 'el',
fn: function(){alert('clicked');}
}
}
});
p.el.dom.click()
});
Run the above code on chrome ExtJS 4,5,6 - you get an alert when loading.
Run the above code on IE 10 - you get an alert on ExtJS 4. No alert on 5 and 6.
Got support for this issue. It is related to changes in the event model for ExtJS 5. See following article for more details:
https://www.sencha.com/blog/delegated-events-and-gestures-in-ext-js-5/
In the click event handler 'translate: false' will solve the above problem.
Another option (global modification) is to override dom.Element:
Ext.define('DomOverride', {
override: 'Ext.dom.Element'
},
function(Element) {
var eventMap = Element.prototype.eventMap;
eventMap.click = 'click';
eventMap.dblclick = 'dblclick';
});
But the global solution may have negative effect for supporting touch.
I've found a few places that talk about trying to extend a window between screens, have enabled the unified desktop tag, which didn't work.
I've also found a few places talking about doing this in Windows that use Win32 calls to do it, which is useless for ChromeOS.
All I need is to put a second web view on the second screen. It doesn't need to be an extended window. I just need to do something like this:
chrome.app.runtime.onLaunched.addListener(function() {
var screenOne = {
'id': 'mainwin',
'bounds': {
'width': 768,
'height': 1360
}
};
var screenTwo = {
'id': 'secondwin',
'bounds': {
'left':768+768,
'width': 768,
'height': 1360
}
};
chrome.power.requestKeepAwake("display");
chrome.app.window.create('../index.html', (screenOne));
chrome.app.window.create('../screen2/index.html', (screenTwo));
});
Also, bonus points on a solution that works in the simulator.
Here's my solution, which works beautifully. It requires you to add system.display to the permissions object in manifest.json
chrome.app.runtime.onLaunched.addListener(function() {
var screenUrls = ['../index.html','../screen2/index.html'];
chrome.system.display.getInfo(function(displays){
for(var id in displays){
var display = {
id: displays[id].id,
bounds:displays[id].bounds
};
chrome.app.window.create(screenUrls[id], display);
}
});
chrome.power.requestKeepAwake("display");
});
Is it possible to change title bar style/colour on chrome packaged apps?
My app has a black menu bar of its own and the plain white chrome title bar looks bizarre above it. I'd be happy with the default OS title bar.
You should have something like this to create your main application window:
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('index.html', {
bounds: {
width: 1024,
height: 768
}
});
});
This will make a default window with a Chrome-style frame. In order to remove that frame from your window, you can use frame: none as another option of the create method, like this:
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('index.html', {
bounds: {
width: 500,
height: 309
},
frame: 'none'
});
});
I am having difficulties implementing the destroy method on my popup. Everything works fine, the below code works for having one popup that changes its contents depending what is clicked on. But I notice that my content (media) still plays when hiding the popup. I'd like to destroy it completely, and re-create on click. I've not really found anything in the forums that helps me achieve this, so I think it will help others too :-)
There are a couple of things confusing me, as there is already a click listener on the markers, which initiates the popup, where should I put the destroy code? Should I be declaring it as a separate function outside the popup, then calling it on beforehide somehow?
function addMarker(country)
{
if (true)
{
var image = new google.maps.MarkerImage(country.image48Path);
var marker = new google.maps.Marker({
map: map.map,
title: country.title,
position: country.position,
//draggable: true,
icon:image
});
var goToCountryWrapper = function (button, event)
{
goToCountry(country, this.popup);
};
google.maps.event.addListener(marker, 'click', function()
{
if (!this.popup)
{ ---> Should I be placing destroy code here?
this.popup = new Ext.Panel(
{
floating: true,
modal: true,
centered: true,
width: 800,
height: 600,
styleHtmlContent: true,
scroll: 'vertical',
items:[(new countryOverlay(country)).overlayPanel,
{
xtype:'button',
margin: 20,
ui:'action-round',
text:'Click here to view more promo videos',
handler:goToCountryWrapper,
scope : this
},],
layout: {
type: 'auto',
padding: '55',
align: 'left'
},
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
ui: 'light',
title: country.title
}],
---> Should I be placing a listener here for beforehide, destroying here?
});
};
this.popup.show('pop');
});
}
};
---> Should I be placing the destroy code after, as a seperate function?
Thanks,
Digeridoopoo
I presume you want to destroy it when you hide the popup? If so, you should listen tot he hide event and then destroy it then.
this.popup.on('hide', function() {
this.popup.destroy();
}, this);
Check this
hideOnMaskTap:true,
listeners : {
hide: function() {
this.destroy();
}
},