In ExtJS 4, selecting a row in a Grid Panel (by clicking it), and pressing the spacebar selects and de-selects the row. It was not like this in ExtJS 3, and I would like to disable this feature.
Any ideas? I've begin looking into Ext.util.KeyMap to see if I could override it somehow. Thanks in advance.
You have to override the onKeyPress method of the Ext.selection.RowModel. The shipped implementation is
onKeyPress: function(e, t) {
if (e.getKey() === e.SPACE) {
e.stopEvent();
var me = this,
record = me.lastFocused;
if (record) {
if (me.isSelected(record)) {
me.doDeselect(record, false);
} else {
me.doSelect(record, true);
}
}
}
}
Unfortunately there currently is no configuration switch to turn off that behavior.
Related
I have a grid with really high rows like this: https://fiddle.sencha.com/#view/editor&fiddle/2581
By default, when a grid row is clicked, the row scrolls into view. For some reason, I don't want that. It should be selected/focused, but not scrolled into view if it is already partly visible.
Take my example, and scroll such that the border between the first and the second is in the middle of the screen. Click either row, and it will be scrolled into view, and the values I have to see from the other row are no longer visible.
How can I prevent that automatism?
To stop scrolling you can give navigationModel as empty object in viewConfig of grid.
viewConfig: {
navigationModel: {}
}
But, it will also stop scrolling of grid using arrow keys.
So, as ankit chaudhary tells us, one needs to remove the navigationModel. I thought a navigationModel could be useful and decided to override the navigationModel to adapt it to my requirement:
Ext.define('MyApp.override.NavigationModel', {
override : 'Ext.grid.NavigationModel',
scrollOnFocus: true,
constructor: function(config) {
this.callParent(arguments);
if(Ext.isBoolean(config.scrollOnFocus)) this.scrollOnFocus = config.scrollOnFocus;
},
onCellMouseDown: function(view, cell, cellIndex, record, row, recordIndex, mousedownEvent) {
var actionableEl = mousedownEvent.getTarget(this.isFocusableEl, cell);
if (!this.scrollOnFocus && !view.actionableMode && mousedownEvent.pointerType !== 'touch' && mousedownEvent.position.column.cellFocusable !== false && !actionableEl) return;
this.callParent(arguments);
},
onItemMouseDown: function(view, record, item, index, mousedownEvent) {
var me = this,
scroller;
if (!mousedownEvent.position.cellElement && (mousedownEvent.pointerType !== 'touch')) {
if (!view.enableTextSelection) {
mousedownEvent.preventDefault();
}
me.attachClosestCell(mousedownEvent);
if (me.scrollOnFocus && !me.position.isEqual(mousedownEvent.position)) {
me.setPosition(mousedownEvent.position, null, mousedownEvent);
}
scroller = view.getScrollable();
if (scroller) {
scroller.restoreState();
}
}
}
});
Now I can add to my grid's viewConfig a customized navigationModel:
viewConfig: {
navigationModel:{
type:'grid',
scrollOnFocus: false
}
}
and the grid does no longer scroll on a mouse click.
For focusing set focusRow wheerever you want
grid.view.focusRow(grid.store.getAt(0));
I am new to Extjs,I am working on Extjs3.2 grid RowEditor. I want Once we click on Add Employee Button editor windows pops up and when we click on cancel editor gots close but row get added to the grid .I want if we click on cancel it get back to initial state without new row
http://dev.sencha.com/deploy/ext-4.0.0/examples/grid/row-editing.html
How to Stop This??
Thanks
Add a 'canceledit' listener for RowEditing plugin and write logic acceptable for you.
For example I have written:
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
autoCancel: false,
listeners: {
canceledit: function(editor, context) {
if(context.rowIdx == 0 && context.value == "New Guy") {
store.remove(context.record);
}
}
}
});
Working Demo: http://jsfiddle.net/3Ht5u/2/
This is one of the requirements am working on.
I have a grid with the selmodel as 'Ext.selection.CheckboxModel'. And to edit the grid rows, I can either use RowEditing or CellEditing plugins. So, here i what happens:
I select multiple checkboxes/rows.
Then I singleclick/doubeclick on one of the selected rows to edit the data in it.
This deselects all the other rows except for the one I double clicked to edit.
I don't want the other rows to be deselected. I should be able to singleclick/doubeclick on one of the selected rows and still keep the rest selected.
When all are rows are selected.
After i double click on a single row, you can see the other rows getting de-selected.
Returning false from the beforedeselect event will prevent the deselection. So, for the 1-click case, it should be easy to prevent deselection when editing. As luck gives it, it appears that the beforedeselectevent is fired after the beforeedit event (in 4.2.0 at least, that may not be stable across versions).
With row editing:
plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 1
,pluginId: 'editing'
})
]
,listeners: {
beforedeselect: function(sm, record) {
var plugin = this.getPlugin('editing');
return !plugin.editing;
}
// The checkbox selection column should probably not be editable, but
// apparently it is not accounted for... So we must prevent edition on
// this column, or you won't be able to deselect using the checkbox.
,beforeedit: function(editor, context) {
return context.colIdx !== 0;
}
}
With cell editing:
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
,pluginId: 'editing'
})
]
,listeners: {
beforedeselect: function(sm, record) {
var plugin = this.getPlugin('editing');
// In 4.2.0 there is apparently a bug that makes
// plugin.editing always true
return !plugin.getActiveEditor();
}
,beforeedit: function(editor, context) {
return context.colIdx !== 0;
}
}
For the double click, you can elaborate on this strategy by capturing the deselect event and releasing it only if editing has not started.
plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 2
,pluginId: 'editing'
})
]
,listeners: {
beforeedit: function(editor, context) {
return context.colIdx !== 0;
}
,beforedeselect: function(sm, record) {
var plugin = this.getPlugin('editing');
setTimeout(function() {
if (!plugin.editing) {
// The true prevents the event from firing again,
// and an infinite loop.
sm.deselect(record, true);
}
}, 200);
return false;
}
}
However you have to make a guess concerning the user's double click delay. Too short and you might miss some double clicks, while too long will incur a unpleasant delay on the deselection.
Try to keep selected records a variable, then edit the row. When everythings complete, try to re-select selected rows.
var selModel, selRows;
selModel = grid.getSelectionModel();
selRows = selModel.getSelection();
// after eediting, use the following
selModel.select(selRows);
You have to pass second parameter as true to select method to retain the previous selections as:
selModel.select(rowsToSelect, true);
Sencha ExtJS docs for reference:
http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.selection.Model-method-select
Hope it helps!!
I am trying to make a live search combo box and everything is working great except for one small detail. I want to call a search method as the user presses the down and up keys through the combo box. This does trigger a select event but the piker has no selection. When I select a combobox item with my mouse or by pressing enter the select event does get a selection. I want to launch queries using the value selected with the down and up keys while navigating the box.
Combo code
searchField = new Ext.form.ComboBox({
id:'searchField',
store: queryCacheStore,
pageSize:0,
width: 780,
triggerAction:'all',
typeAhead:false,
mode:'remote',
minChars:2,
forceSelection:false,
hideTrigger:true,
enableKeyEvents:true,
queryDelay:200,
queryMode:'remote',
queryParam:'query',
queryCaching:false,
displayField:'query',
autoSelect:false,
listConfig:{
loadingText: 'Searching...',
// Custom rendering template for each item
getInnerTpl: function() {
return '<div class="search-item">' +
'{query}' +
'</div>';
}
},
listeners: {
specialkey:function (field, e) {
if (e.getKey() == e.UP || e.getKey() == e.DOWN) {
}
},
select:function (combo, selection) {
var post = selection[0];
searchField.setValue(post.get('query'));
requestAccessList.runSearch();
},
focus:function (combo, event, opts) {
combo.store.proxy.extraParams = {
'lcm':true,
'type':RequestAccess.OBJECT_TYPE
}
}
}
});
So when
select:function (combo, selection) {
gets called with down arrow key or up arrow key then selection is null. When it gets called with enter key or mouse click it has the highlighted combobox selection. So the question is how can I get the value of the combo box from arrow key events?
OK I figured this out myself. You have to override the highlight event of the BoundListKeyNav
Ext.view.BoundListKeyNav.override({
highlightAt:function (index) {
// this.callOverridden(index); For some reason this does not work
var boundList = this.boundList,
item = boundList.all.item(index);
if (item) {
item = item.dom;
boundList.highlightItem(item);
boundList.getTargetEl().scrollChildIntoView(item, true);
searchField.setValue(boundList.getNode(index).textContent);
searchService.runSearch();
}
}
});
I added the following listConfig to a combobox to accomplish something similar:
listConfig: {
listeners: {
highlightitem: function(view, node, eOpts) {
combo.setValue(node.innerText);
}
}
}
It updates the combo box text field value on mouse over and key up/down.
how to show a calendar when you click on text field icon on the left of the calendar?
Use the 'render' event to listen to clicks on the datefield, then use the onTriggerClick() function to expand the date picker:
{
xtype:'datefield',
name:'date1',
fieldLabel:'Date',
listeners:{
render:function (d) {
d.el.on('click', function () {
d.onTriggerClick();
});
}
}
}
{
xtype:'datefield',
fieldLabel:'Start Date',
name:'start_date',
dataIndex:'start_date'
}
use the items[] for the field container and put above lines for datefield in items and call it
Alin Suciu's answer is not enough for extjs 5.
Because when click datepicker image, picker does not trigger.
So i changed it a little.
it's not best way but working.
listeners: {
afterrender: function (d) {
d.getEl().on('click', function (e, t, o) {
if (e.target.id.indexOf('picker') <= 0) {
d.onTriggerClick();
}
});
}
}
if there is any better solution advice, i will change my code.
Best regards.