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.
Related
Hi I have added one context menu on my grid which will perform the enable and disable functionality for selected row. I am new to ExtJs. I have added below listener for the grid. How to add enable and disable functionality for the grid row?
listeners: {
itemcontextmenu: function (grid, record, item, index, e) {
var contextMenu = Ext.create('Ext.menu.Menu', {
controller: 'grid-controller',
width: 165,
plain: true,
items: [{
text: 'Disable',
listeners: {
click: {fn: 'disable', extra: record}
},
}]
});
e.stopEvent();
contextMenu.showAt(e.getXY());
}
}
This is not a copy-paste answer, but going through the following steps with doing your own research you can solve your problem.
1. Create the context menu only once and destroy it
In you code, the context menu is created every time when the user opens up the menu on the grid. This is not good. Instead, create the context menu only once when the grid is created, and destroy it when the grid is destroyed. Something like this:
Ext.define('MyGrid', {
extend: 'Ext.grid.Panel',
initComponent : function() {
this.callParent();
this.MyMenu = Ext.create('Ext.menu.Menu', {
items: [...]
});
this.on({
scope : this,
itemcontextmenu : this.onItemContextMenu
});
},
onDestroy : function() {
if (this.MyMenu) {
this.MyMenu.destroy();
}
},
onItemContextMenu : function(view, rec, item,index, event) {
event.stopEvent();
this.MyMenu.showAt(event.getXY());
}
});
2. Store enabled / disabled state in the record
For the next step to work, records in your grid must contain whether the corresponding row is enabled or disabled. In the context menu, when user selects enabled / disabled, store this status like this, get record of the row where the context menu was displayed from:
record.set('myDisabledState', true); // or false
It is important to store the disabled state (and not enabled), because when your grid initially is rendered, these values won't be in the records, so record.get('myDisabledState') will evaluate to FALSE, and that is the desired behaviour, if you want to start with every row being able to be selected.
3. Disable selection
Now you can add a beforeselect listener to your grid, see documentation. This listeners receives record as parameter, and if you return false from this listener, the selection will be canceled. So in this listener simply add:
listeners: {
beforeselect: function ( grid, record, index, eOpts ) {
return !record.get('myDisabledState');
}
}
4. Apply formatting - OPTIONAL
It is likely that you want to add different formatting for disabled rows, for example grey colour. The easiest way to do it is to add a custom CSS style to your Application.scss file:
.my-disabled-row .x-grid-cell-inner {
color: gray;
}
Finally add getRowClass configuration to your grid, it will receive the current record being rendered, and you can return the above custom CSS style when the row is disabled:
Ext.define('MyGrid', {
// your grid definition
,
viewConfig: {
getRowClass: function (record, rowIndex, rowParams, store) {
if (record.get('myDisabledState')) {
return "my-disabled-row";
}
}
}
});
In this last part, when row is not disabled, it will return nothing, so default formatting will be used.
How to define custom tooltip for a column in extjs grid? there is a listener for grid which apply QuickTips for whole grid but I want a column has a custom tooltip and ignore global tooltip. here the listener code on grid:
listeners: {
itemmouseenter: function (view, record, item, index, e, options)
{
if (e.getTarget().textContent.length > 11)
Ext.QuickTips.register({
text: e.getTarget().textContent,
trackMouse: true,
target: e.target
});
},
}
I try to add this code to column,but still global one works.
By using renderer of grid column you can show the tooltip. something like
var myRenderer = function(value, metaData, record, rowIndex, colIndex) {
if (colIndex === 0) {
metaData.tdAttr = 'data-qtip=' + value;
}
// additional logic to apply to values in all columns
return value;
}
https://docs.sencha.com/extjs/6.0.2/classic/Ext.grid.column.Column.html#cfg-renderer
I have a ComboBox that has multiSelect as true. This ComboBox has an initial value set, which is selected when I open the ComboBox. The problem becomes when I want to use ComboBox.setValue... using this function apparently fires off the beforedeselect event, but not the select event. And the odd thing is, beforedeselect is only fired for the values that I'm setting in setValue.
Please see this example.
To reproduce the issue, you can do the following:
Click the "Set ComboBox Value" button
Click the drop down
You should then see 4 alerts: Maryland, Pennsylvania, Maryland, Pennsylvania
or
Click the drop down
You should then see 2 alerts: Colorado, Colorado
Click the "Set ComboBox Value" button
You should see 1 alert: Colorado
Click the "Set ComboBox Value" button again
You should see 2 alerts: Maryland, Pennsylvania
Maybe I'm misunderstanding the event, but why is this the behavior? Why would using setValue deselect the states (that I'm setting) from the ComboBox, but still have them selected when I open the ComboBox? And why does the first test case show 4 alerts?
Update
Looking at the syncSelection code, it looks like deselectAll is called on the selection model, which would explain why the beforedeselect event is called, but the selection model then calls select... which doesn't explain why the selection event is not called.
Ext.onReady(function() {
var store = Ext.create('Ext.data.Store', {
fields: ['state_id', 'state_name'],
data: [
{state_id: 1, state_name: 'Colorado'},
{state_id: 2, state_name: 'Maryland'},
{state_id: 3, state_name: 'Pennsylvania'}
]
});
var combo = Ext.create('Ext.form.field.ComboBox', {
valueField: 'state_id',
displayField: 'state_name',
store: store,
multiSelect: true,
value: [1],
listeners: {
beforedeselect: function(combo, record, index, eOpts) {
alert('deselected: ' + record.get('state_name'));
},
beforeselect: function() {
alert('selected');
}
},
renderTo: Ext.getBody()
});
var button = Ext.create('Ext.button.Button', {
text: 'Set ComboBox Value',
listeners: {
click: function() {
combo.setValue([2, 3]);
}
},
renderTo: Ext.getBody()
});
});
Cross-post from the Sencha forums.
I've come up with a solution, but I'm unsure of the repercussions... so far, I haven't seen any. I override the comboBox's syncSelection method with the following:
syncSelection: function() {
var me = this,
picker = me.picker,
selection, selModel,
values = me.valueModels || [],
vLen = values.length, v, value;
if (picker) {
// From the value, find the Models that are in the store's current data
selection = [];
for (v = 0; v < vLen; v++) {
value = values[v];
if (value && value.isModel && me.store.indexOf(value) >= 0) {
selection.push(value);
}
}
// Update the selection to match
me.ignoreSelection++;
selModel = picker.getSelectionModel();
selModel.deselectAll(true); // This is the key to it all... suppressing the event listener, just like what's happening in the select right below this
if (selection.length) {
selModel.select(selection, undefined, true);
}
me.ignoreSelection--;
}
}
The only change is the deselectAll call... it's now suppressing the deselect event that's fired, just like the select event that follows it... I'm curious to know why they don't suppress the event like they do in the select. Like I said, I'm not sure of the repercussions, but it's given me great mileage thus far.
I'm trying to add a button to the column header drop-down menus in my grid. However, I only want to add it to columns with certain itemId. So far I've got it working to add the button to all columns, see code below. I dont see where I could check each column's itemId though, it doesn't seem to iterate through the columns. Is there any workaround for this? Thank you!
items:[{
region:'center',
xtype:'grid',
columns:{
items: COLUMNS, //defined in index.php
},
store:'Items',
selType: 'checkboxmodel',
listeners: {
afterrender: function() {
var menu = Ext.ComponentQuery.query('grid')[0].headerCt.getMenu();
menu.add([{
text: 'edit',
handler: function() {
console.log("clicked button");
}
}]);
}
}
}],
The grid column menu exists in one instance which is shared for all columns. Because of this you can not add menu item only for one column.
However you can show/hide menu item in this menu for specific column. You can use menu beforeshow event and get information about column from menu.activeHeader property:
listeners: {
afterrender: function(c) {
var menu = c.headerCt.getMenu();
// add menu item into the menu and store its reference
var menuItem = menu.add({
text: 'edit',
handler: function() {
console.log("clicked button");
}
});
// add listener for beforeshow menu event
menu.on('beforeshow', function() {
// get data index of column for which menu will be displayed
var currentDataIndex = menu.activeHeader.dataIndex;
// show/hide menu item in the menu
if (currentDataIndex === 'name') {
menuItem.show();
} else {
menuItem.hide();
}
});
}
}
Fiddle with live example: https://fiddle.sencha.com/#fiddle/3fm
I've posted this over on the Sencha forums, wanted to also post it here just in case:
I have a GridPanel that utilizes a PagingToolbar and a CheckboxSelectionModel. I want to keep track of selections across pages. I'm nearly there, but I'm running into issues with the PagingToolbar controls (such as next page) firing a 'selectionchange' event on the my selection model.
Here's a simplified sample of my code:
Code:
var sm = Ext.create('Ext.selection.CheckboxModel', {
listeners:{
selectionchange: function(selectionModel, selectedRecords, options){
console.log("Selection Change!!");
// CODE HERE TO KEEP TRACK OF SELECTIONS/DESELECTIONS
}
}
});
var grid = Ext.create('Ext.grid.Panel', {
autoScroll:true,
store: store,
defaults: {
sortable:true
},
selModel: sm,
dockedItems: [{
xtype: 'pagingtoolbar',
store: store,
dock: 'bottom',
displayInfo: true
}],
listeners: {'beforerender' : {fn:function(){
store.load({params:params});
}}}
});
store.on('load', function() {
console.log('loading');
console.log(params);
console.log('selecting...');
var records = this.getNewRecords();
var recordsToSelect = getRecordsToSelect(records);
sm.select(recordsToSelect, true, true);
});
I assumed that I could select the records on the load event and not trigger any events.
What's happening here is that the selectionchange event is being triggered on changing the page of data and I don't want that to occur. Ideally, only user clicking would be tracked as 'selectionchange' events, not any other component's events bubbling up and triggering the event on my selection model. Looking at the source code, the only event I could see that fires on the PagingToolbar is 'change'. I was trying to follow how that is handled by the GridPanel, TablePanel, Gridview, etc, but I'm just not seeing the path of the event. Even then, I'm not sure how to suppress events from the PagingToolbar to the SelectionModel.
Thanks in advance,
Tom
I've managed to handle that. The key is to detect where page changes. Easiest solution is to set buffer for selection listener and check for Store.loading property.
Here is my implementation of selection model:
var selModel = Ext.create('Ext.selection.CheckboxModel', {
multipageSelection: {},
listeners:{
selectionchange: function(selectionModel, selectedRecords, options){
// do not change selection on page change
if (selectedRecords.length == 0 && this.store.loading == true && this.store.currentPage != this.page) {
return;
}
// remove selection on refresh
if (this.store.loading == true) {
this.multipageSelection = {};
return;
}
// remove old selection from this page
this.store.data.each(function(i) {
delete this.multipageSelection[i.id];
}, this);
// select records
Ext.each(selectedRecords, function(i) {
this.multipageSelection[i.id] = true;
}, this);
},
buffer: 5
},
restoreSelection: function() {
this.store.data.each(function(i) {
if (this.multipageSelection[i.id] == true) {
this.select(i, true, true);
}
}, this);
this.page = this.store.currentPage;
}
And additional binding to store is required:
store.on('load', grid.getSelectionModel().restoreSelection, grid.getSelectionModel());
Working sample: http://jsfiddle.net/pqVmb/
Lolo's solution is great but it seems that it doesn't work anymore with ExtJS 4.2.1.
Instead of 'selectionchange' use this:
deselect: function( selectionModel, record, index, eOpts ) {
delete this.multipageSelection[i.id];
},
select: function( selectionModel, record, index, eOpts ) {
this.multipageSelection[i.id] = true;
},
This is a solution for ExtJs5, utilizing MVVC create a local store named 'selectedObjects' in the View Model with the same model as the paged grid.
Add select and deselect listeners on the checkboxmodel. In these functions add or remove the selected or deselected record from this local store.
onCheckboxModelSelect: function(rowmodel, record, index, eOpts) {
// Add selected record to the view model store
this.getViewModel().getStore('selectedObjects').add(record);
},
onCheckboxModelDeselect: function(rowmodel, record, index, eOpts) {
// Remove selected record from the view model store
this.getViewModel().getStore('selectedObjects').remove(record);
},
On the pagingtoolbar, add a change listener to reselect previously seleted records when appear in the page.
onPagingtoolbarChange: function(pagingtoolbar, pageData, eOpts) {
// Select any records on the page that have been previously selected
var checkboxSelectionModel = this.lookupReference('grid').getSelectionModel(),
selectedObjects = this.getViewModel().getStore('selectedObjects').getRange();
// true, true params. keepselections if any and suppresses select event. Don't want infinite loop listeners.
checkboxSelectionModel.select(selectedObjects, true, true);
},
After whatever action is complete where these selections are no longer needed. Call deselectAll on the checkboxmodel and removeAll from the local store if it will not be a destroyed view. (Windows being closed, they default set to call destroy and will take care of local store data cleanup, if that is your case)