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;
Related
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)
});
Maybe someone can give some ideas, how to add item to the end of combobox dropdown, and make it "different" for example put separator before it or make it bold. Combobox uses sorted (by name) store, and on load there is added item which I want to make different.
Ext.define('Plugin.workspace.store.FavouriteCarStore', {
extend : 'Plugin.workspace.store.CarStore',
alias : 'store.favouritecar',
filters : [{
property : 'favorite',
value : true
}],
listeners : {
load : function(store) {
var rec = {
id : 'showAll',
name : 'Show All',
favorite : true
};
store.add(rec);
}
}
});
combo uses this store:
tbar : [{
xtype : 'combo',
width : 200,
editable: false,
store : {
type : 'favouritecar'
},
bind : {
value : '{workspace}'
},
tpl : '<ul class="x-list-plain"><tpl for="."><li role="option" class="x-boundlist-item">{name}</li></tpl></ul>',
displayTpl : '<tpl for=".">{name}</tpl>',
listeners : {
'select' : 'onSelectWorkspace'
}
}].
This code adds item, which looks like others, and places it depending on sort.
I use 5.1 ExtJS.
EDIT: solution to add item to list end.
sorters : [{
sorterFn : function(rec1, rec2) {
if (rec1.id != 'showAll' && rec2.id != 'showAll') {
return ((rec1.get('name') > rec2.get('name')) ? 1 : (rec1.get('name') === rec2.get('name') ? 0 : -1));
} else {
return ((rec1.id == 'showAll') ? 1 : -1);
}
}
}],
Method 1
Use a custom cls on the combo's listConfig:
listConfig: {
cls: 'thisComboMakesLastItemDifferent'
},
And then use CSS to make the last item different:
.thisComboMakesLastItemDifferent li:last-child {
color: red;
font-weight: bold;
}
Method 2
Since you are marking your "different" item with favorite: true, you can code it in the template:
tpl: '<tpl for="."><li role="option" class="x-boundlist-item favorite-{favorite}">{name}</li></tpl>',
And then, again, use CSS:
.favorite-true:before {
content: 'FAV: '
}
Note that the first method focuses on making the last item different regardless of what item it is. The second method makes specific item different (you need extra logic to make sure it is the last; you have one already).
See both methods in action: https://fiddle.sencha.com/#fiddle/sdj
Maybe you can use store.insert(store.indexOf(store.last()) index, rec) or store.insert(store.count() - 1, rec)?
load : function(store) {
somewhere.static.setShowAllAsLastRecordOfStore(store);
}
filterchange(store, filters, eOpts) {
somewhere.static.setShowAllAsLastRecordOfStore(store);
}
sort(store, eOpts) {
somewhere.static.setShowAllAsLastRecordOfStore(store);
}
setShowAllAsLastRecordOfStore: function(store) {
var rec = {
id : 'showAll',
name : 'Show All',
favorite : true
};
store.remove(store.findRecord('id', 'showAll'));
store.insert(store.indexOf(store.last()) index, rec);
// or
store.insert(store.count() - 1, rec);
}
I have weird problem with Extjs 5.0.
I have a window :
Ext.define('xxx', {
extend : 'Ext.window.Window',
// ...... //
items : [ {
xtype : 'grid',
reference : 'maingrid',
bind : {
store : '{users}'
},
flex : 1,
selModel : Ext.create('Ext.selection.CheckboxModel', {
mode : 'SIMPLE'
}),
listeners : {
selectionchange : 'onSelectionChange'
},
} ]
});
The selectionChange event handler work perfectly for the first time.
But when I close the window and open again - this event handler stop working. What am I doing wrong?
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.
I have a Parent and Child view. The Child view extends the Parent events with:
initialize : function() {
// don't overwrite parent's events
this.events = _.extend( {}, ExerciseRowView.prototype.events, this.events);
},
However, the Parent expects a ParentModel and the Child expects a ChildModel, so when an event is passed to the Parent, the model is the ChildModel. How can I set the Parent model to be different from the Child model?
Thanks!
Here's the source, as requested.
ParentView aka ExerciseRowView:
var ExerciseRowView = Parse.View.extend( {
tagName : 'div',
className : 'exerciseWrapper',
template : _.template(exerciseElement),
events : {
'click .icon_delete' : 'confirmDelete',
'click .name' : 'showDetailsPopup'
},
confirmDelete : function() {
var that = this;
if(confirm("Are you sure you want to delete this exercise?")) {
this.destroy({
success: function(exercise) {
// log the action
Log.add(Log.ACTION_EXERCISE_DELETED, exercise.get("name"));
that.$el.fadeOut();
}
});
}
},
showDetailsPopup : function() {
(new ExerciseDetailsView({model: (this.model.constructor == Exercise ? this.model : this.model.get("exercise"))})).render();
},
// accept data as a parameter for workoutexercises
render : function(data) {
_.defaults(data, {
exercise: this.model,
Muscle : Muscle,
Equipment : Equipment,
Exercise : Exercise,
Break : Break,
HTMLHelper : HTMLHelper,
User : User
});
$(this.el).html(this.template(data));
return this;
}
});
ChildView aka WorkoutExerciseRowView:
var WorkoutExerciseRowView = ExerciseRowView.extend( {
events : {
"click .icon_randomize" : "changeToRandomExercise"
},
initialize : function() {
// don't overwrite parent's events
this.events = _.extend( {}, ExerciseRowView.prototype.events, this.events);
},
render: function() {
// override the template data with workout exercise template data
return ExerciseRowView.prototype.render.call(this, {
workoutExercise : this.model,
exercise : this.model.get("exercise"),
workoutSection : this.model.get("section"),
isEditable : true,
number : this.options.number,
WorkoutExercise : WorkoutExercise,
WorkoutSection : WorkoutSection
});
},
changeToRandomExercise : function(e) {
// pick a random alternative exercise
var newExerciseId;
do {
newExerciseId = _.keys(this.model.get("alternativeExercises"))[ Math.floor(Math.random() * _.keys(this.model.get("alternativeExercises")).length) ];
} while(newExerciseId == this.model.get("exercise").id);
// grab it
var that = this;
(new Parse.Query(Exercise)).get(newExerciseId, {
success: function(exercise) {
// update the workout exercise
that.model.set("exercise", exercise);
// render it
that.render();
}
});
}
});
Currently (as you can see), I test to see if this.model.constructor == Exercise inside ExerciseRowView. If it is not, I know that I have a WorkoutExercise, inside which is an Exercise, so I use this.model.get("exercise"):
showDetailsPopup : function() {
(new ExerciseDetailsView({model: (this.model.constructor == Exercise ? this.model : this.model.get("exercise"))})).render();
},
This doesn't seem like the cleanest possible solution, though.
what I could think of is that you define function for each view
ParentView
getExercise: function() {
return this.model;
}
ChildView
getExercise: function() {
return this.model.get('exercise');
}
And then change the function
showDetailsPopup: function() {
(new ExerciseDetailsView({model: this.getExercise()})).render();
}
How about that?