All I want to do is capture an event every time an item in a Grid using CheckBoxSelectionModel is either checked or unchecked. The checked/selected part is easy using the SelectionHandler. I'm not seeing anything that fires a deselection event in a multi-select mode though. I have a grid with 1000 items or so, and I let users multi-select items to track on a map. It's not giong to perform well to scan the entire model whenever a selection changes so I'm wondering how to handle this.
You are correct. SelectionHandler will only provide checked/selected status. I had a similar requirement and I solved it by overriding the onSelectChange() method of CheckBoxSelectionModel.
Here is the sample code for your reference.
IdentityValueProvider<VO> identity = new IdentityValueProvider<VO>();
CheckBoxSelectionModel<VO> sm = new CheckBoxSelectionModel<VO>(identity) {
protected void onSelectChange(VO model, boolean select) {
super.onSelectChange(model, select);
if (select) {
// Do something on select ...
} else {
// Do something on deselect ...
}
};
};
Hope this helps.
Related
I have a checkbox on a website, and a combobox. When that checkbox is checked, I want to change the combobox into a textfield (and of course conserve any selected value and put it in the textfield). When the checkbox is unchecked I wanna go back to display the combobox (and it's previously selected value).
Any idea how I can achieve this in ExtJS4 Please?
Thank you
Well youd start by having a listener in your controller that will run when the checkbox gets checked. In that function you should be able to pull the value from the combobox, store it in a temp variable, create (or probably unhide) your textfield, and put your temp variable value in there.
Then write the opposite for a uncheck listener action
Are you working in MVC?
hope that helps
We've implemented a similar approach.
Put a combobox inside a container and add a textfield to it. Add listeners to checkbox and use combobox.hide() and textfield.show() in handler.
Ext.define('MyComboBox',{
extend:'Ext.form.field.ComboBox',
initComponent:function() {
this.originalForceSelection = this.forceSelection;
this.callParent(arguments);
if(this.textFieldMode) this.setTextfieldMode(true);
},
function setTextfieldMode(bool)
{
if(bool) {
this.forceSelection=false;
this.setHideTrigger(true);
} else {
this.setHideTrigger(false);
this.forceSelection=this.originalForceSelection;
}
}
});
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've got two form fields, one select list, and another grid panel. Changing the selection in the select list will trigger its change event and fire a custom event called datasourcechange which the grid panel listens for. These two components have to be separate because they are used across different forms and not always together.
The problem is that when I sort the grid panel, it fetches an unfiltered list of records. I would like it to reapply the filter from the select list, if it's available.
I've tried remoteSort: false, but was thinking I could do something similar to how the select list fires an event that the panel is listening for, but I need a way to determine when the column headers have been clicked, either via a sort event or click event on the headers themselves, could anyone recommend a best practice approach for this?
We are using Extjs 4.0.5, and can't upgrade to 4.1.x. Any assistance is appreciated!
That´s a common problem. What you have to do is implement something like this:
When changing the selection in the select list, save the selected value on the grid´s store.
var store = getGridStore(); // you have to implement this method
store.selectedValue = theSelectedValue;
Next, you have to subscribe to the store´s load event in order to apply the filter before perform the request. This is, something like this:
getGridStore().on('beforeload', function (store) {
store.proxy.extraParams = { filteredByValue: store.selectedValue
}, this);
I don´t know how your implementation is, however this describes the general idea.
I have a grid and when I click on a button in the toolbar of the panel I want to check if a row in the grid is selected.
If true I need de value of one cell of that row, so I can put it behind a url.
But I have no idea how I can use the selection model to get the cell value of a selected row in EXT JS 4.
Perhaps try something like:
grid.getSelectionModel().getSelection()
This will return an array of all selected records withing the grid.
Then, you can iterate over the selection, find your row and call row.get('PropName') to get the value.
Hope this helps.
You're approaching the issue backwards though. You want to register for the 'selectionchange' event from the grid.
thisController.control ({'#mygrid':
{
selectionchange:onSelectionChange}
});
function:onSelectionChange(model, selected, eOpts )
{
//do work here
}
So basically you want to create an event driven model.
Is it possible to scroll to a particular row (by object identity) in a Silverlight DataGrid that has an ItemsSource which is a PagedCollectionView.
I am loading a list of orders that are grouped by day/status etc. I need to be able to scroll to a particular order.
var pcv = new PagedCollectionView(e.Result.Orders);
gridOrders.ItemsSource = pcv;
Unfortunately, ScrollIntoView(order) doesn't work because of the PagedCollectionView.
An article on DataGrid from MSDN shows that it is possible to scroll to a group in a PagedCollectionView, but that's not really much use.
foreach (CollectionViewGroup group in pcv.Groups)
{
dataGrid1.ScrollIntoView(group, null);
dataGrid1.CollapseRowGroup(group, true);
}
Is there a way to do this ?
Yes, it is possible to scroll items into view when the item source is a PagedCollectionView. I use both the group scrolling method you describe and I scroll the currently selected item into view. To do this, I have a helper method that uses the dispatcher to invoke the operation as follows:
private void ScrollCurrentSelectionIntoView()
{
this.dataGrid.Dispatcher.BeginInvoke(() =>
{
this.dataGrid.ScrollIntoView(
this.dataGrid.SelectedItem,
this.dataGrid.CurrentColumn);
});
}
I used BeginInvoke because otherwise, the call to ScrollIntoView would fail when called directly from an event handler (presumably because the DataGrid hadn't properly updated its state for the event being handled). This approach ensures that the current event handling completes properly before invoking the scroll.