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.
Related
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
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
Team,
I am having one problem where I donot want to expand combo box on certain flag and want to display the alert message.
there is no event like onClick in EXTJS so I tried with focus event but still combo box is expanding.
code
focus:function() {
if(this.store.baseParams.donotExpandFlag) {
alert("I should not expand this combo");
// What to do here and out side of IF block so that there is conditional expansion
}
}
You need to specifiy your ExtJS version and please format your code.
Here is what you can do for ExtJS4.x
Manually set/unset the isExpanded property. That should work (untested)
for ExtJS3.x you will have to override the the isExpanded() method and in additon apply a custom flag which indicates blocked/auto and get checked before the default code gets executed.
You may try this (untested)
_isExpanded: true, // true means block, false auto
isExpanded: function(){
return this._isExpanded || (this.list && this.list.isVisible());
},
No, this works. See the JSFiddle for ExtJS3.4
Second JSFiddle for ExtJS3.4 with a form
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.
Trying to get the previous value of the combo box. I tried 'change' event, but it does not work. 'beforeselect' does not exist for the new extjs 4.0 if i am not wrong. Any ideas on how i can do this?
I understand we can use the change event, but that only happens when the user types something. I want to check if there is an previous value on each new select?
It's kind of weird that there is no beforeselect event. However, combobox extends picker and every picker has selectionModel with beforeselect event. So you may assign handler to picker selModel's beforeselect event:
MyCombo.getPicker().getSelectionModel()
.on('beforeselect',function(sm, selections, i) {
console.log(sm.lastSelected, selections, i);
});
You can also get the previous value of the combo from valueModels of the combo object in beforeselect event.
beforeselect: function(combo, record, index, eOpts){
me.prevCountry = combo.valueModels[0].data.COUNTRY_ID;
}
you can use change event handler that pass this params to your listener ( combo, newValue, oldValue )