In ExtJS 6.2.0. I have a standard grid. In some of the grid cells I have text that a user is able to select (for copy-paste purposes).
However, upon selection of that text (through mousedown-mouseup), also the onclick event handler of that row is fired, causing in my case the (de-)selection of that grid row.
I am looking for a way to make these text selections, but without triggering the onclick event handler.
I was thinking along the line of killing the default single click event listener, and introducing a dedicated double click event listener, but that route hasn't led to a simple solution so far.
Any suggestions?
I suggest change selectionModel to Ext.selection.CheckboxModel and set enableTextSelection in viewConfig.
selModel: {
type: 'checkboxmodel',
checkOnly: true
},
viewConfig: {
enableTextSelection: true
}
Example : https://fiddle.sencha.com/#fiddle/35o5
Related
It appears that on calling reset event of textfield in ExtJS 4.2 the blur event is automatically called.
i have a scenario where in a form i have combo box and textfield, on select of combo box i am calling reset of textfield.
#cmbStatus : {
select : function(combo, records, eOpts){
combo.up('form').down('textfield[name=referencenumber]').reset();
}
and on blur of textfield i am calling reset of combo box.
#txtRefNumber : {
blur : function(cmp, The, eOpts){
cmp.up('form').down('combobox').reset();
}
}
here, because of the cascading effect on select of combo box, since reset is being called, the textfield blur event is automatically called and combo box reset event occurs
Is there any way i can stop the textfield blur event ?
I am aware about the suspendEvent method of textfield but no use as it will suspend the event till resumeEvent is called.
Thanks
The blur event is not fired as a direct result of calling reset but as a response to moving focus out of the text field.
You will probably need to reconsider and redesign the logic so that the event loop does not occur. Try to use a different event, for example change.
Also, calling suspendEvents might be necessary to avoid the event loop, depending on the logic you need.
I have a ExtJs 4.1 check box tree panel. When I check or uncheck any node, check change event for the tree is fired. How can I programmatically fire this event.
One way I can think of is to use following code. But this code is not firing every time :-(
this.fireEvent('checkchange', node, true, opts);
Thank you
try with this event
checkchange(node, checked, eOpts)
I am having a issues with a checkbox column in a grid.
I have a grid with multiple checkbox columns. When I check the box, the dirty tick is not there, however when I click on the cell that contains the checkbox, but not the check box and then click the checkbox, I get the dirty tick mark.
Has anyone see this before? I would like it to be a bit more consistent because after a few clicks the dirty marks for some rows disappear.
This just seems odd.
Thanks!
Indeed first you need to click on the cell to enter 'edit' mode and then you can check/unched the actual checkbox. For better user experience you can implement your checkboxes just the same way they are implemented in this code library article. (If you are not using ASP.NET MVC wrappers - no worries just open the project go under Views/Home/Index.cshtml and you can copy/paste the code - it is all JavaScript.
The code library also includes how to create checkboxe 'Select all' in the column header.
The way I solved it was to make the fields in the model to be non-editable, so it forces the click event to fire and then I just update the values and set the dirty property. The thing was if you clicked the cell, the edit event was fired vs the click and vice versa, so instead of having two things fire, I just disabled one. Some would call it a hack, but I can't see how else to prevent both events from firing.
Please try this one:
//Cell click Checkbox select
$('#grd' + gridName).on("click", "td", function (e) {
var selectedTd = $(e.target).closest("td");
var grdChkBox = selectedTd.parents('tr').find("td:first").find('input:checkbox');
grdChkBox.prop('checked', !grdChkBox.prop('checked'));
});
Yes, I see this quite often: depends on how you implemented the checkboxes. If you tick directly a checkbox you modify the input but not the model. If you tick the cell and then the checkbox then Kendo UI toggle to edit mode and (in background) it replaces the checkbox with an editable version of the checkbox that is managed (event handler) by Kendo UI that allows to modify the model.
EDIT: If you want your checkbox always clickable then you might do:
var grid = $("#stocks_tbl").kendoGrid({
dataSource: new kendo.data.DataSource({
...
schema: {
model: {
id : "id",
fields: {
active: { type: "boolean" }
}
}
}
}),
editable : "incell",
columns : [
{
field : "active",
title : "Active",
template: '<input type="checkbox" data-bind="source: active" #= active ? checked="checked" : ""# />'
},
...
]
}).data("kendoGrid");
Here, you define an input that is always clickable.
$(document).on("change", "[type='checkbox']", function(ev) {
var item = grid.dataItem($(this).closest("tr"));
item.set("active", ev.srcElement.checked);
});
with this, we define a handler for intercepting changes on the input and reflect them in the model.
This saves you having to play with editable
Why does CheckboxModel deselect all selected rows on page change when using paging toolbar? How do I stop the deselection of rows on page change?
I see there is a pruneRemoved which can be used to prevent the pruning of nodes, I set it to false, but the deselect is still fired. Not sure what else to try.
I'm assuming checkboxmodel registers with the store or maybe pagingtoolbar to be notified when the store changes...then deselects everything? Why? I need to prevent that.
Edit:
The reason I don't want the deselectAll to be fired is; I attach a handler on select and deselect. Select adds rows to another grid, deselect removes them. So when the user checks a checkbox that row is added to another grid, when they uncheck it it is removed from that grid. By the grid firing a deselectAll, when the store changes, I lose all my saved rows in the other grid.
I'm not sure if this is the correct way to do this but it's working for me.
What I did was create my own Ext.grid.View. I extended ext.view.Table and over-road the onMaskBeforeShow method. This is the method that was calling deselect all on the grids selection model. As you can see I commented it out here
Ext.define('Ext.grid.SteveView', {
extend: 'Ext.view.Table',
alias: 'widget.stevegridview',
onMaskBeforeShow: function(){
var me = this,
loadingHeight = me.loadingHeight;
//me.getSelectionModel().deselectAll();
me.all.clear();
if (loadingHeight && loadingHeight > me.getHeight()) {
me.hasLoadingHeight = true;
me.oldMinHeight = me.minHeight;
me.minHeight = loadingHeight;
me.updateLayout();
}
}
});
Include the above script, then when you create a grid, change the viewType to stevegridview, or whatever you decide to name it
{
xtype: 'grid',
viewType:'stevegridview',
store:'some store'
...
}
The new view type will be used a the new onMaskBeforeShow() will be called.
I want to prevent the default action of the combobox setting its value to the selected item in the picker. I just want to see the values in the picker and, when I click on them, nothing to happen. How can I do that?
You probably want this:
Ext.create('Ext.form.ComboBox', {
...
listeners: {
beforeselect: function() {return false;}
}
});
ExtJS still handles the DOM click internally and figures out the record that you clicked on (and you have a reference to it in beforeselect handler, see the docs), however returning false in the beforeselect event handler would prevent selecting the record and any further actions.