I am able to access the onclick properties function for the printButton property at the end of the block. Although I am unable to initiate the onclick functions under the exportButton property.I have the following code.
B.exporting = {
type : "image/png",
url : "http://export.highcharts.com/",
width : 800,
enableImages : false,
buttons : {
exportButton : {
symbol : "exportIcon",
x : -10,
symbolFill : "#A8BF77",
hoverSymbolFill : "#768F3E",
_titleKey : "exportButtonTitle",
menuItems : [{
textKey : "downloadPNG",
onclick : function() {
this.exportChart()
}
}, {
textKey : "downloadJPEG",
**onclick : function() {
this.exportChart({
type : "image/jpeg"
})**
}
}, {
textKey : "downloadPDF",
onclick : function() {
this.exportChart({
type : "application/pdf"
})
}
}, {
textKey : "downloadSVG",
onclick : function() {
this.exportChart({
type : "image/svg+xml"
})
}
}
}]
},
printButton : {
symbol : "printIcon",
x : -36,
symbolFill : "#B5C9DF",
hoverSymbolFill : "#779ABF",
_titleKey : "printButtonTitle",
onclick : function() {
this.print()
}
}
}
};
I am binding keyboard controls to the click events using the jquery plugin this is what I used to print. This Works!:
Mousetrap.bind('ctrl+s', function(e) { B.exporting.buttons.printButton.onclick(this.print());
});
This code is what I tried to access an individual onclick function under the exportButton property in the json above
Mousetrap.bind('*', function(e) {B.exporting.buttons.exportButton.menuItems[0].onclick;});
The result i get is the value but i want to run the function as the onclick property does.Does anyone know how to run a function under a json property?I Appreciate any help here thanks folks.
Mousetrap.bind('click', B.exporting.buttons.exportButton.menuItems[0].onclick);
Your ctrl-s binding also looks wrong, it should be:
Mousetrap.bind('ctrl+s', B.exporting.buttons.printButton.onclick);
The printButton.onclick function doesn't take an argument. Your binding calls this.print before calling the printButton.onclick function, and then the printButton.onclick function
does it again.
Related
For some reason, the blur event doesn't get fired when the below floating panel loses focus. However, when I listen to the 'el' of the panel for the blur event, it gets registered as shown in the listeners config. What I want to do is hide the panel when the blur event occurs. How do I get access to the parent panel ?
Ext.define('NoteKeeper.view.tabs.AttachmentPanel',{
extend : 'Ext.panel.Panel',
alias : 'widget.attachmentPanel',
itemId : 'attachmentPanel',
floating : true,
focusable : true,
width : 200,
height : 150,
layout : {
type : 'vbox'
},
items : [
{
xtype : 'grid',
store : null,
columns : [
{
text : 'File Name',
dataIndex : 'fileName'
},
{
dataIndex : 'remove'
}
]
},
{
xtype : 'button',
text : '+'
}
],
listeners : {
el: {
blur: {
fn: function()
{
console.log( this );
//how do I access the 'attachmentPanel' from here
//so I can hide it ?
}
}
}
},
noteId : null,
initComponent : function()
{
this.callParent(arguments);
}
});
Please note that there can be multiple instances of these 'attachmentPanel's.
The following appears to work fine:
listeners : {
el: {
blur: {
fn: function()
{
console.log(this);
var elId = this.id;
var attachmentPanels = Ext.ComponentQuery.query('#attachmentPanel');
Ext.Array.forEach( attachmentPanels, function(cmp){
if(cmp.id == elId)
{
cmp.hide();
return false;
}
});
}
}
}
Please let me know if there is better/more efficient solution. Thanks!
There is a reference from the element to the owning component, in form of the component property, so from the scope of the element, you can access the panel like so:
var attachmentPanel = this.component;
i have a control as below
i need to fire the event closed when i click on the close icon press
sap.ui.define(["sap/ui/core/Control",
"sap/m/Carousel",
"sap/m/Panel",
"sap/m/Toolbar",
"sap/ui/core/Icon",
"sap/m/Label",
"sap/m/Button",
"sap/m/ToolbarSpacer"], function (Control,Carousel,Panel,Toolbar,Icon,Label,Button,ToolbarSpacer) {
"use strict";
return Control.extend("com.example.Control", {
metadata : {
aggregations : {
_panel : {
type : "sap.m.Panel",
multiple: false,
visibility:'hiddden'
}
},
events : {
closed : {
}
}
},
renderer : function (oRM, oControl) {
oRM.write("<div");
oRM.writeControlData(oControl);
oRM.addClass("sapUiSizeCompact");
oRM.writeClasses();
oRM.write(">");
oRM.renderControl(oControl.getAggregation("_panel"));
oRM.write("</div>");
},
init : function () {
var that = this;
var _carousel = new Carousel({
pages : [new Label({
text : "Test"
}),
new Label({
text : "Test"
})]
});
var _closeIcon = new Icon({
src : "sap-icon://decline",
press :jQuery.proxy(this.onCloseInfoWindow,this)
});
var _toolBar = new Toolbar({
content : [
new Label({
text :"Information"
}),
new ToolbarSpacer(),
_closeIcon,
]
});
var _panel = new Panel({
headerToolbar : _toolBar
});
_panel.addContent(_carousel);
this.setAggregation('_panel',_panel);
},
onCloseInfoWindow : function(oEvent){
}
});
});
The onCloseInfoWindow is not triggering the press event when click on close icon
do i need to do some add the icon also as aggregation and need to render?
Do you want to fire the closed event that you have created in your custom control ?
Use the below code for calling the closed event from your custom control:
onCloseInfoWindow : function(oEvent){
//console.log('Called');
this.fireClosed(oEvent);
}
View XML: here, Control is my name for your control.
<c:Control closed='onClose'/>
Controller:
onClose:function(oEvent) {
console.log('Closed Called!');
}
Why are you using press :jQuery.proxy(this.onCloseInfoWindow,this) ? I've never used that jQuery.proxy in ui5.
For triggering the close function, you could do
var _closeIcon = new Icon({
src : "sap-icon://decline",
press : function(oEvent){
this.fireClosed(oEvent);
}.bind(this)
});
I'm using durandal/requirejs/knockout here.
I'm also using the coderenaissance plugin for mapping (ko.viewmodel.updateFromModel(zitem, data).)
I'm getting the following data from my ajax call which I'm mapping into my zitem observable.
{
"itemNumber" : "ABATAH000",
"effectiveDate" : "2015-11-03T15:30:05.7118023-05:00",
"expiryDate" : "2015-05-03T15:30:05.7118023-04:00",
"minimumPremium" : 25,
"zSubItems" : [{
"zSubItemName" : "Mine",
"unitDistance" : 100000,
"zSubSubItems" : [{
"zSubSubItemName" : "CoverageA",
"zSubSubItemPremium" : 100.0,
"id" : 0
}
],
"id" : 1
}
],
"id" : 0
}
And here is the viewmodel I'm using:
define(['plugins/http', 'durandal/app', 'knockout', 'services/datacontext'],
function (http, app, ko, datacontext) {
var zitem = ko.observable();
var activate = function () {
//This is just a wrapper around an ajax call.
return datacontext.getPolicy("value")
.then(function(data) {
ko.viewmodel.updateFromModel(zitem, data);
});
};
var updateMinimumPremium = function (thisItem) {
//This doesn't work
zitem.minimumPremium(thisItem.minimumPremium + 1);
};
return {
displayName: 'zitem example',
zitem: zitem,
updateMinimumPremium: updateMinimumPremium,
activate: activate
};
});
I'm binding the updateMinimumPremium to a click on a button at the same level as the minimumPremium element.
<button data-bind="click: $parent.updateMinimumPremium">Add 1</button>
How can I update [minimumPremium] or [zSubSubItemPremium] programatically?
"minimumPremium" would be observable
zitem.minimumPremium(thisItem.minimumPremium() + 1);
Your zitem is observable as well, so try this:
zitem().minimumPremium(thisItem.minimumPremium + 1);
In real application don't forget to check the value of zitem() call - it can be uninitialized.
I am trying to unit test this service using jasmine:-
my unit test is :-
describe('initial configuration for the test user', function () {
beforeEach(function(){
var config = {
'Apache 404' : {
content : {
type : 'tip',
template : 'yesNo',
text : 'Are you searching for status code 404?',
yesText : 'Try our more accurate field search',
attachTo : '#inputBox right',
yesActions : {
0 : {
type : 'replaceSubstring',
target : '#inputBox',
value : 'apache.status:404',
match : '404'
}
}
},
conditions : {
0 : {
type : 'valueChange',
target : '#inputBox',
textMatch : '(^|([\\s]+))404(([\\s]+)|$)',
preventSubmit : true
},
1 : {
type : 'contentPropertyLessThan',
propertyName : 'timesShown',
compareVal : 3
}
}
}
};
var clientName = 'testClient';
var fireRef = new Firebase('https://luminous-inferno-1740.firebaseio.com/' + clientName);
var fireSync = $firebase(fireRef);
fireSync.$set({'config' : config});
log.message = 'Resetting user data';
$log.debug(log);
userData.init(function(done) {
done();
});
});
it('should have a valid config', function () {
expect(Object.keys(userData.getConfig()).length > 1);
});
});
I am receiving an error :-
ReferenceError: $firebase is not defined
at Object.
Can somebody help me providing working example of my code with some explanation?
I also had the problem. I solved my problem by adding $firebaseArray in the parameter of the controller
.controller('ChatsCtrl', ['$scope','$firebaseArray','$rootScope',......
One thing should be noted that firebase has been updated that $firebase is no longer supported. You can only use $firebaseArray or $firebaseObject for retrieving the data.
I have a problem with JsTree's contextmenu, how can I remove the default elements from the contextmenu like Create, Delete, Rename? I want to provide elements of my own, but the default elements are still at the contextmenu.
"contextmenu" : {
"items" : {
"IsimVer" : {
"label" : "İsim Değiştir",
"action" : function (obj) { this.rename(obj); }
},
"Ekle" : {
"label" : "Ekle",
"action" : function (obj) { this.create(obj); }
},
"Sil" : {
"label" : "Sil",
"action" : function (obj) { this.remove(obj); }
}
}
I had this issue a couple of days ago but haven't yet decided if this is a bug or a feature. It may be related to the order in which the plugins are loaded.
What worked for me was returning the items from a function:
"contextmenu" : {
"items" : function ($node) {
return {
"IsimVer" : {
"label" : "İsim Değiştir",
"action" : function (obj) { this.rename(obj); }
},
"Ekle" : {
"label" : "Ekle",
"action" : function (obj) { this.create(obj); }
},
"Sil" : {
"label" : "Sil",
"action" : function (obj) { this.remove(obj); }
}
};
}
}
After some searching it seems that the default behaviour is for your menu items to extend the defaults, so this is a feature. Unfortunately the documentation currently lacks the detail on this point.
If you like to modify labels of existing items or remove a few, a simple solution like below will work
"contextmenu": {
"items": function(node) {
var defaultItems = $.jstree.defaults.contextmenu.items();
defaultItems.create.label = "Ekle";
delete defaultItems.ccp;
return defaultItems;
}
}
This will set "Create" items label as "Ekle" and remove cut copy paste from default items.
Just set value to false in items object. For example, to disable edit (cut, copy, paste) menu try this:
contextmenu : {
items : {
"ccp" : false
}
}
Set ccp, create, rename, remove to false like this :
plugins : ["themes","json_data","ui","crrm", "hotkeys", "types", "contextmenu"],
contextmenu : {
items : {
"IsimVer" : {
"label" : "IsimVer",
"action" : function (obj) { alert("IsimVer"); }
},
"Ekle" : {
"label" : "Ekle",
"action" : function (obj) { alert("Ekle"); }
},
"Sil" : {
"label" : "Sil",
"action" : function (obj) { alert("tiga"); }
},
"ccp" : false,
"create" : false,
"rename" : false,
"remove" : false
}
}