In extjs 4.1 i wish to have a button in my grid.
I've seen a few approaches such as using a renderer or a action column. I've got this far.
The next step is that i need to catch this event in my controller.
I've tried adding the following but it didn't get called
'#cutterGrid .editRow':{
click:this.onCutterSelect
},
I'll need to get the selected record.
-- Update
{
xtype:'actioncolumn',
width:20,
cls: 'rowEdit',
items: [{
icon: '/images/icons/layout_edit.png',
tooltip: 'Edit'
}]
},
and in my controller
'#cutterGrid actioncolumn':{
click:this.onCutterSelect
},
and the function called
onCutterSelect : function(gridview, el, rowIndex, colIndex, e, rec, rowEl) {}
Have a look at Mitchell Simoens' Blog:
ActionColumn and MVC
...So we chose to fire a custom event call ‘itemclick’, first we need
to decide what kind of arguments we want to fire this event with. The
scope of the handler is that of the ActionColumn which is where we are
going to fire the event on. We would maybe want the ActionColumn,
grid, rowIndex, colIndex, record, eventObject, the node clicked on and
since we are firing the event, we can make it easy on ourselves and
put a custom argument to tell the action we should take. Let’s look at
the code...
Related
Ive got a working grid, using in-line editing thanks to this example
https://www.telerik.com/kendo-angular-ui/components/grid/editing/editing-row-click/
What I need to do now, is force the saving upon a user hitting the enter key, instead of clicking away onto another row or away from the current row. I suppose I could add a "save" button in the header?
You could probably use cellClose event in your html (cellClose)="cellCloseHandler($event)" - API Documentation
You could then write your own code (in typescript) in cellCloseHandler() to modify and save the updated items accordingly.
From Kendo UI for Angular Documentation:
In-Cell Editing
You could capture the Enter key hits and force executing cellCloseHandler() like that:
#HostListener('keydown', ['$event'])
public keydown(event: any): void {
console.log("keydown event", event);
if (event.keyCode === 13) {
this.cellCloseHandler();
}
}
Similar to Giannis answer but with small modifications:
Add keydown event to kendo-grid tag.
Call grid.closeCell() instead of calling the closeHander directly.
Template
<kendo-grid #grid
[data]="data$ | async"
(cellClose)="cellCloseHandler($event)"
(keydown)="onKeydown(grid, $event)"
>
Class
onKeydown(grid: GridComponent, e: KeyboardEvent) {
if (e.key === 'Enter') {
grid.closeCell();
}
}
cellCloseHandler(args: CellCloseEvent) {
const { formGroup, dataItem } = args;
// save to backend etc
}
Calling grid.closeCell(); will make the grid to call cellCloseHandler
You dont have to implement a HostListener for Keydown by yourself. If you set the input navigable to true, the cellClose event will get triggered when pressing Enter while editing a cell or row. This way you get the data of the row in your cellCloseHandler aswell for saving it.
<kendo-grid [navigable]="true" (cellClose)="cellCloseHandler($event)"></kendo-grid>
I previously wrote this question Stacking of Context Menus in Electron and created this issue in the context menu module for electron.
Even though my question above is quite detailed, it got no replies. Then, #sindresorhus recommended I ask this question on StackOverflow:
How do I de-register context menu's in electron? I have a program in which, depending on where you click, a different context menu will show up:
handleContextMenu() {
this.props.contextMenu({
prepend: (params, browserWindow) => [{
label: `Summary ${this.state.msn}`,
click: () => this.createSummary()
},{
label: `Library Compare ${this.state.msn}`,
click: () => this.runLibCompare()
},{
label: `Visualize ${this.state.msn}`,
click: () => dialog.showMessageBox({
type: 'question',
buttons: this.vizButtons,
defaultId: 0,
title: `Choose your visualization`,
message: `Choose your visualization for ${this.state.msn}.`,
}, res => this.visualize(res))
}]
});
};
However, when I right-click on another area, the first context menu pops up, then the second, all the way till the current context menu shows up.
I basically want to de-register a context menu after it has been dismissed. How do I do that?
Update:
Got rid of the context menu and simply fed this to handleContextMenu function:
handleContextMenu = menuItems => {
const menu = new electron.remote.Menu();
menu.append(new electron.remote.MenuItem(menuItems));
menu.popup(electron.remote.getCurrentWindow());
}
And it works! That's that, got rid of the electron-context-menu as well.
This is possible with standard Electron Menu API without additional modules, perhaps using electron-context-menu is just complicating things since that seems to be designed to simplify things for the specific use-case of a standard context menu. With the standard Menu API, you can create and pop-up a menu on each click, so there is no need to "de-register" a menu.
Here's a simplified example, creating a different new context menu with each click:
let menuCount = 1;
window.addEventListener('contextmenu', (e) => {
e.preventDefault();
let menu = new electron.remote.Menu();
menu.append(new electron.remote.MenuItem({label : "Context Menu "+menuCount++}))
menu.popup(electron.remote.getCurrentWindow());
});
On the first right-click you will see a menu with an item "Context Menu 1", on the second right-click, "Context Menu 2", and so on.
I have a flash movie I am making that has a search box and a search button. The button has this code:
on (release, keyPress "<Enter>") {
searchbox.execute();
/*the function above processes searches*/
}
Clicking on the button works just fine. Pressing Enter doesn't do a bean! Does anyone know why this is, and any ways I can work around it? I'd prefer not to use listeners if I can possibly avoid it at all.
Using on() is a deprecated AS1 practice, so maybe you should just stop using it. Thanks to the onKeyDown event handler of the MovieClip class, it is possible to use proper code to do it without listeners, so you don't have to worry about them. ;)
Anyway, on with the code. Type this into the timeline which contains the button:
//Enable focus for and set focus to your button
searchButton.focusEnabled = true;
Selection.setFocus(searchButton);
//The onRelease handler for the button
searchButton.onRelease = function(){
//You need this._parent this code belongs to the button
this._parent.searchbox.execute();
}
//The onKeyDown handler for the button
searchButton.onKeyDown = function(){
//Key.getCode() returns the key code of the last key press
//Key.ENTER is a constant equal to the key code of the enter key
if(Key.getCode() == Key.ENTER){
this._parent.searchbox.execute();
}
}
I want to be able to add an onBlur/onkeypress/onChange events to all TypeAhead fields on the form rather than have a developer select every one in the Designer client. The only thing I cannot get a handle on is the onChange event.
When the user selects something in the TypeAhead the onChange event is triggered when adding the code directly to the event in the Domino Designer - so I should be able to replicate that capability with code.
If my typeAhead field is called inputText2 I thought I would be able to do the following
var widget = dojo.byId("#{id:inputText2}")
dojo.connect(widget, 'onChange', function (){
alert('1')
});
However this doesn't appear to work...
I tried lowercase onchange
var widget = dojo.byId("#{id:inputText2}")
dojo.connect(widget, 'onchange', function (){
alert('1')
});
no luck there either
I tried
var widget = dijit.byId("#{id:inputText2}");
but that failed to event select the element entirely
So what do I need to do to trigger the onchange event when selecting an option in the typeAhead?
I found a solution.....not ideal but it worked for the moment - not generic though, but a start
Copying the way XPages does it....add this to the page
function view__id1__id2__id31__id50_clientSide_onchange(thisEvent) {
alert('me')
}
and then
dojo.addOnLoad(function(){
XSP.addOnLoad(function() {
XSP.attachEvent("X1","view:_id1:_id2:_id31:inputText2", "onchange", view__id1__id2__id31__id50_clientSide_onchange, false, 2);
});
});
});
X1 must be unique but everything else can be calculated
Thanks to Serdar Basegmez
Okay, so I have the following class definition:
MyApp.views.ItemAction = Ext.extend(Ext.ActionSheet, {
items: [{
text: 'cancel',
handler: function(){
this.hide();
}
}]
});
When I create an instance of ItemAction and show() it, an action sheet appears. Brilliant.
Now my problem: pushing the cancel button will hide the button itself, and not the parent sheet.
How do I solve this?
Cheers
You can also try
handler: function(){
this.up().hide();
}
up will navigate up the owner chain. Calling it without any variables will get the immediate owner. But calling destroy is also a good idea since it will remove the sheet from the dom.
Okay, so I amended my code to look like this:
MyApp.views.ItemAction = Ext.extend(Ext.ActionSheet, {
id: 'itemaction',
items: [{
text: 'cancel',
handler: function(){
Ext.getCmp('itemaction').destroy();
//do other stuff here...
}
}]
});
And it works; I will use that for now, but of course I will appreciate a less kludgy solution (and no, setting the item scope to this does not work -- I get a DomWindow object if I do this).
Cheers