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
Related
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
I have a grid with one column, which when the user selects, is used to display information in various textfields, checkboxes which are embedded in a panel on the right. I have implemented a delete feature at the row level in the grid. Now I wish either of these two things to happen.
1) Either the default selection is such that the first row is by default selected after deletion of any row.
OR
2)The information in the various components in the panel on the right is cleared.
Currently what happens is that the information which corresponds to the deleted row stays after deletion since nothing is selected in the grid so the previous selected option is used to display information on the right.
As removing the record from the grid implies deselecting it, you really just need to listen for changes to the selection in your grid and implement the desired behaviour when no selection exists.
I'd recommend the selectionchange event, as you can cover both selection and deselection by inspecting the new selection state:
grid.on({
'selectionchange': function(sm, selectedRecords) {
if (selectedRecords.length === 0) {
// no selection -> clear fields or select the first row
} else {
// selection exists -> load data into fields
}
}
});
(assuming you're using single selection, i.e. either one or no row can be selected)
How can I dynamically click rows in my grid?
E.g.: I am using border layout.
I have a grid in the west with a list of Companies.
When I click on a Company, the information of the company which has an Id, is displayed in a form in my center area.
Now, when I want to add a company ( I am doing this with a button which opens a "Add window"), and type all information in the form and then press "save", I reload the grid.
How could I make it, that the company which is newly added, is clicked on and its information is displayed in the center area.
NOTE: The companies are listed with an ajax request, and the information is called with a "onCompanyGridHandler".
You can make the new campany created added in the top of the grid by sorting the grid's store with, for example, the date of campany creation. You can so add this line in the grid's store:
sorters: { property: 'datecreate', direction : 'DESC' },
Then, after the campany creation, you select the first row of the grid, using this code:
Ext.getCmp('your_grid_id').getView().select(0);
There are a couple of approaches you can take here:
In the function where you add the data from the Add Window to the grid panel's store, you can also get the form and use the form's loadData() method to load the data into the form, populating both the Grid and Form at the same time.
As is mentioned in a comment, after adding the data to the grid's
store, make fire the click event on the row in the grid that is
displaying the new data. I prefer the first approach because you do
not have to find the correct row in the grid and fire its click
event. In the first approach both the grid and form are loaded
with the data directly.
David
I am designing an extjs application where I have couple of panels. and one of them of has a grid. I know I can either do selectionChange on the grid listener or itemClick.
Which one should I use? Or moreover which one is better. I obviously load data on the right panel once the grid item is clicked
The first one get fired only when the selection changes (as you might has guessed) and give you a array of selected record (which might be just one) while the second one get called for each click and give you only the one record you clicked on.
For your case I would tend to use the second event and save the last last clicked record internally. I would then only load the second grid if it was not already loaded for this record.
your grid is displayed as table on page at runtime so you can add onClick() event on grid or table cell during onrowdatabount event of grid.
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.