What I have is I have an item selector with available users and assigned users as two different columns. On clicking any user in the available users and clicking a different menu option, the selected user from the available users columns is still displayed. How do I clear the selection upon clicking a different menu ?
Here's how the screen looks with the selection under a particular menu :
And here's the selection again after opting a different menu :
I tried, accessing the store and clearValue() and setValue('') which is not right solution and I was not able to access the selecitonModel to perform clearSelections() here.
How do I clear the selections upon clicking menu?
Would greatly appreciate your help, thanks a lot.
You can use the getSelectionModel().deselectAll() method of the "Users View" (that you want to clear the selection) within the listener select from the "Roles View". This will cause all user record selections to be removed when selecting a different menu. See docs: getSelectionModel, deselectAll.
Example:
{
xtype: 'dataview',
.
.
.
listeners: {
select: function(dataview, record, index, eOpts){
dataview.view.up('viewport').down('#usersView').getSelectionModel().deselectAll();
}
}
}
Within the listener, it performs the method to deselect all records from the target view.
These methods are commonly found in components that have the selection behavior, such as the grid.
See this fiddle: Deselect DataView Items.
store.removeAll();
is this what you are looking for
Related
I am using react-dual-listbox. Here I am able to select the columns and deselect and use the selected values. But, I want to access the selected option in selected items on click of that particular item.
Ex: if 2 options are selected. If i click on second one, It should give me the value and index of the selected option. I saw something to use selectedRef for that purpose, But I am new to React.
Could anyone please help me out.
<DualListBox
canFilter
preserveSelectOrder
options={this.state.availableColumns}
selected={selectedColumns}
onClick={this.selectedRef}
onChange={this.onColumnSelected}
/>
For better overview and to use the available screen space, I want two grids next to each other, but only one toolbar with buttons. The two grids are bound to different ChainedStores, but the underlying source store of the chained stores is the same. The ChainedStores have filters to create a partition of the records in the underlying store - one half on the left, the other on the right.
Clicking the buttons in the toolbar should perform actions on the selected record in either of these grids.
Is there a way to tell the selectionModels that I want only one record selected, in either the right or the left grid, but not one in each?
You can try around here: https://fiddle.sencha.com/#view/editor&fiddle/1vs4
ExtJS does not support same selection model for two different grid.You have to handle it manually by code.
you can write select event listeners on each grid and on that event you can deselect record of another grid.
for grid1,
listeners :{
select : function(sel, record, index, eOpts){
sel.view.up('panel[name=main]').down('grid[name=grid2]').getSelectionModel().deselectAll();
}
}
for grid2,
listeners :{
select : function(sel, record, index, eOpts){
sel.view.up('panel[name=main]').down('grid[name=grid1]').getSelectionModel().deselectAll();
}
}
Please refer fiddle
I have a tree panel which has multiselect enabled (selModel:{MODE:MULTI}). If multiple nodes are selected then you right click to activate context menu, all selected nodes except for node that was right clicked on get deselected.
The outcome im looking for is the nodes stay selected, so I can click a menu item and get IDs of all selected Nodes.
There was a bug created for this issue couple years ago and Sencha introduced a new config, ignoreRightMouseSelection, which if set to true, doesnt treat a right click as a selection. But this config is for RowModel. I am using a tree Panel.
The event I'm listening for is treepanels "itemcontextmenu", to show contextmenu
any help appreciated, thanks
I fixed this problem by adding one more parameter to selModel.
selModel: (
{
mode: 'MULTI', ignoreRightMouseSelection:true
})
Try it.
I have an ExtJS grid with a store that is filtered and sorted remotely. These requests are handled serverside using PHP.
I also have a button in the grid's toolbar to remove the filters on the store that uses the entryGrid.filters.clearFilters() function.
I would like to enable/disable this button depending on if there are any filters active on the store. So that when de store is loaded for the first time (without any filters) the button is disabled.
So I thought about putting a listener on the store.load function.
What would be the cleanest way to check if there are any filters active, if indeed this is possible?
I searched the manual (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.Store) for grid, store and filters, but couldn't find any reference..
Thanks in advance
I don't know if you already tried using listeners but i'd do it like this (in the store):
listeners: {
load: function(){
if(!this.isFiltered())
{
//<add actions to disable the button>
}
}
}
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.