Why am I Getting error on panel's content script of Firefox Addon SDK? - firefox

Getting the following error, even after making the script empty I go this error.
console.error: my-addon:
Message: SyntaxError: expected expression, got end of script
Panel code of my addon:
var { ToggleButton } = require('sdk/ui/button/toggle');
var panels = require("sdk/panel");
var self = require("sdk/self");
var ss = require("sdk/simple-storage");
var button = ToggleButton({
id: "my-addon",
label: "My Addon",
icon: {
"16": "./img/16-16.png",
"32": "./img/32-32.png",
"64": "./img/64-64.png"
},
onChange: handleChange
});
var panel = panels.Panel({
contentURL: self.data.url("popup.html"),
contentScript: self.data.url("js/pop_listener.js"),
onHide: handleHide,
width: 300,
height: 550
});

Use contentScriptFile instead of contentScript

Related

ExtJS loadMask on the form is not working?

I have a form and I am trying to apply mask when submit button is clicked but somehow mask is not displaying on form.
var objMask = new Ext.LoadMask({
target: target,
msg: 'test',
//hideMode: 'display',
listeners: {
beforedestroy: function (lmask) {
//this.hide();
},
hide: function (lmask) {
//this.hide();
}
}
});
It is working in panel but in form, we are not getting anything.
Thanks in advance.
You need to call show method on Ext.LoadMask instance.
Example on https://fiddle.sencha.com/#view/editor&fiddle/3cuq
let target = Ext.create("Ext.form.Panel", {
renderTo: Ext.getBody(),
width: 400,
height: 400
});
var objMask = new Ext.LoadMask({
target: target,
msg: 'test',
//hideMode: 'display',
listeners: {
beforedestroy: function (lmask) {
//this.hide();
},
hide: function (lmask) {
//this.hide();
}
}
});
objMask.show();

Cannot read property 'slice' of undefined on Run in Titanium

I'm writing an simple Ajax communications in Javascript in Titanium. Yesterday night this application is worked correctly, but now, it thrown for me an error:
[INFO] : JavaScript files need to be encrypted
2016-06-02T10:27:22.859Z | ERROR | An uncaught exception was thrown!
Cannot read property 'slice' of undefined 2016-06-02T10:27:22.860Z |
ERROR | Cannot read property 'slice' of undefined
Here is my code:
var valasz = "";
var ajax = Ti.Network.createHTTPClient({
onerror: function(e) {
alert('Error!');
},
onload : function(e) {
valasz = this.responseText;
if (valasz.length > 0) {
var Gyartosorok = valasz.split("\t");
var win = Titanium.UI.createWindow({
title : "Termékkereső",
backgroundColor: "#ddd",
exitOnClose: true
});
var gyartosor_picker = Titanium.UI.createPicker({
top: 4,
height: 36,
backgroundColor: "#000",
width: "75%",
selectionIndicator: true
});
var GyartosorData = [];
var GyartosorDataIndex = 0;
if (Gyartosorok.length > 1) {
GyartosorData[0] = Titanium.UI.createPickerRow({ title: "Összes sor", val: "0" });
GyartosorDataIndex++;
}
for (i = 0; i < Gyartosorok.length; i++) {
GyartosorData[GyartosorDataIndex] = Titanium.UI.createPickerRow({ title: Gyartosorok[i], val: Gyartosorok[i] });
GyartosorDataIndex++;
}
gyartosor_picker.add(GyartosorData);
var keresendoInput = Titanium.UI.createTextField({
top: 42,
height: 36,
width: "75%",
backgroundColor: "#fff",
borderColor: "#000",
color: "#000",
borderStyle: Titanium.UI.INPUT_BORDERSTYLE_ROUNDED,
hintText: "Termékkód (részlet)"
});
var keresesGomb = Titanium.UI.createButton({
title: "Keresés",
width: "60%",
top: 80
});
win.add(gyartosor_picker);
win.add(keresendoInput);
win.add(keresesGomb);
win.open();
} else {
alert("No data!");
}
},
timeout: 5000
});
ajax.open("POST", "http://xyz.hu/dir/dir/ajax.php");
ajax.send({
'mod' : 1
});
Please, help me. What is wrong!
Thanks for your help!
Ok, something was wrong in Titanium, because after I selected my all sourcecode, closed this project and opened a new project and paste my code to app.js, then this error is missed and my application is working successful!
Thanks for your patient!
Clean build : Clean the project and than build the project
in Appceletor studio go to project=>clean and than run make sure that in project drop-down menu build automatically is checked.

Firefox addon: TypeError: getBrowserForTab(...) is undefined

While attaching an object to window of the active tab in main.js, I get following error:
Message: TypeError: getBrowserForTab(...) is undefined
Here is the code that I've used to attach the object:
var { getTabs, getTabContentWindow } = require('sdk/tabs/utils');
tabs.on('load', function(tab) {
var window = getTabContentWindow(tab);
window.myObject = {
data: "sample"
}
});
The problem is that the tabs.on('load', function(tab) {}) is a part of the high-level API, whereas getTabContentWindow from require('sdk/tabs/utils') works on low-level XUL tabs. Use viewFor from sdk/view/core to transform:
var { viewFor } = require("sdk/view/core");
var window = getTabContentWindow(viewFor(tab))

Extjs4 drag and drop zones error with IE,FF and Safari

I have multiple grids in a panel. The base grids have data in them and can be dragged and dropped between each other. All the grids in the panel should be able to drag and drop between each other. This works perfectly in chrome but not Firefox, IE, or Safari.
In IE,FF and Safari the grids with data in them will drag and drop between each other w/o problem. They will not between the empty grids. I tried adding data to the empty grids but that wasn't the problem. Firebug also errors when using it with Extjs so any bugs i get are from a different dev tool. I have reinstalled all of those browsers and that is not the answer either. Im stuck...
edit I found out in chrome the viewconfig for my dragdrop groups are set but it doesnt set in the other browsers
This is my base grid with data in it.
var rround = "panel-game-"+round;
var ss = Ext.create('Ext.grid.Panel', {
stateful: true,
id: "panel-game-"+round,
stateId: 'stateGrid',
autoScroll: false,
store: store,
columns: [
{
text : 'Teams',
flex : 1,
sortable : true,
dataIndex: 'team_name'
}
],
height: 100,
width: 150,
title: 'Game ' + round,
viewConfig: {
stripeRows: true,
plugins: {
ptype: 'gridviewdragdrop',
dragGroup: [groups],
dropGroup: [groups]
},
listeners: {
drop: function(node, data, dropRec, dropPosition,record,store) {
var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('name') : ' on empty view';
var data = this.store.data.items;
var sdata = new Array();
data.each(function(e){
var bleh = {team_id: e.data.team_id, team_name:e.data.team_name};
sdata.push(bleh);
})
removeDupe(sdata,this.store);
}
}
}
});
This is my empty grid that should accept drops and should also drag when there is data in it.
var rCell = Ext.create('Ext.grid.Panel', {
stateful: true,
id: "panel-game-"+i+'-'+a,
stateId: 'stateGrid',
autoScroll: false,
store: rCellStore,
columns: [
{
text : 'Teams',
flex : 1,
sortable : true,
dataIndex: 'team_name'
}
],
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
dragGroup: [groups],
dropGroup: [groups]
},
listeners: {
beforedrop: function(node,data,overModel,dropPosition,eOpts){
console.log(node);
},
drop: function(node, data, dropRec, dropPosition, record) {
console.log("drop");
var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('title') : ' on empty view';
var f = node.id.replace('-body','');
var newval = data.records[0].data;
if(f != undefined && f != ''){
var fstore = Ext.getCmp(f).getStore();
fstore.add(newval);
}
var data = this.store.data.items;
var sdata = new Array();
data.each(function(e){
var bleh = {team_id: e.data.team_id, team_name:e.data.team_name};
sdata.push(bleh);
})
removeDupe(sdata,this.store);
}
}
},
height: 100,
width: 150,
title: 'Game ',
viewConfig: {
stripeRows: true
}
});
It does not give a dropzone avaliable when i and trying to drag something over. It could be that but im not sure how to fix it.
The problem was the second viewConfig{stripeRows:true}. Chrome could figure it out but the other browsers were overwriting the first viewConfig with the second.

In Sencha Touch 2 binding data to tpl with Panel not working

I am new to Sencha Touch and trying Sencha Touch version 2 for a demo of xtemplates. This is what I have code.
Ext.application({
name: 'Templates',
launch: function(){
var content, planetInfo, planetEarth;
planetEarth = { name: "Earth", mass: 1.00 };
planetInfo = new Ext.XTemplate(
"<h2>{name}</h2>mass: {mass}"
);
content = new Ext.Panel({
fullscreen: true,
scroll: 'vertical',
tpl: planetInfo
});
content.update(planetEarth);
}
});
output for this code should be in HTML format in the panel. But I just get [object Object]. Please help.
Don't use content.update(planetEarth) method, because it is deprecated in sencha-touch-2.
Here is an example of the correct code:
Ext.application({
name: 'Templates',
launch: function() {
var content, planetInfo, planetEarth;
planetEarth = { name: "Earth", mass: 1.00 };
planetInfo = new Ext.XTemplate(
"<h2>{name}</h2>mass: {mass}"
);
content = Ext.create("Ext.Panel", {
fullscreen: true,
scroll: 'vertical',
tpl: planetInfo,
data: planetEarth
});
}
});
To update display values (Sencha Touch 2), use "setRecord(with new model instance)".
me.getSomeComponentWithTpl().setRecord(someModelInstance);

Resources