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.
Related
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 have an infragistics ultragrid control in a windows form. There is an 'Add New' button outside to insert new rows to the grid.
The problem I faced is, when I click the button outside the grid, while I'm editing a cell inside the grid, the cell doesn't lose focus. Because of this the edited new value is not updated to its underlying data source.
I need this cell to lose focus and update it's underlying data source, because the 'Add New' button creates a new row with this particular column having a default value which is calculated based on the previous row's edited value.
So any ideas on how to unfocus the ultragrid cell? This situation may apply to normal GridView also.
If your button is on a Toolbar, then the behavior you are seeing is expected because toolbars don't take focus. If this is the case before performing your logic you can use the PerformAction method of the grid and pass in UltraGridAction.CommitRow to force the row that was being editor to commit its updates.
For example:
this.ultraGrid1.PerformAction(UltraGridAction.CommitRow);
I used myUltraGrid.ActiveRow.Cells[0].Activate(); which also works. But the solution by #alhalama is better one I guess.
I am using EditorGridPanel with cellEditor which acts nearly like Excel. We implemented Arrow Keys to move among rows and
columns. We do row validation when user moves from one row to another (specifically in rowdeselect event) and then save the
record. There is some issues are:
For the last row of the grid, rowdeselect event does not fire, as we do not have any other control after the grid.
rowdeselect event fires if we move from row to row using Tab, Enter & Arrow keys. But when user clicks on another row using mouse - events do not come in correct sequence, so focus moves to the new row, but earlier row not saved. Currently we solved this by calling stopEditing at the beginning of rowdeselect event.
We would like to know how we can solve these two issues and whether there are more robust ways to handle automatic grid saving.
You can fill free to check the problem in our site. -> http://www.softworksbd.com/swazilandlmis/yyyy_stockdata.php
1 ) First of all the event is not firing on the blur of the whole grid and not just the last row. try changing a row and clicking anywhere on the screen but the grid and you will see that no validation takes place (which means your rowdselect does not fire).
You should try and add a blue event to the whole grid that runs your validation scripts.
2) As far as I have checked the event is fired even on another row click so please explain exactly what you mean...
ps
I have viewed only this page in your application:
I have a problem with extjs gridpanel dragdrop.
the scenario is as follows:
The gridpanel is initially rendered by loading a remote store.
Then, the rows are added, updated dynamically.
Drag drop feature is implemented on "render" event of gridpanel.
Drag drop works fine for the originally retrieved rows from the remote store.
but when i try to use drag drop for the newly added or edited rows, it doesn't work.
I am getting the following error on firebug:
Index or size is negative or greater than the allowed amount" code: "1
This is may be because , the newly added rows are not taken as a part of the store . I tried changing the event to "click" but it doesnt work that way..
Please please suggest a solution for this fast.. Its needed urgently.
Thanks,
Shreya.
I know 2 methods for drag and drop in ext, one of them is only for grid rows, the other one that I'm using is with setting dragzones and dropzones. With that method, the only thing you have to do is catch an event which is fired when you add new rows to the grid. In that event, set every new row to be a dragzone (so it can be dragged). That's what I did in a similar situation. Hope this helps..
By the way grid rows don't have a .el (DOM element attached to the Ext component, which is the row in this case). So you'll have to create a div for each row component and then use the initializeDropZone(row[x]), where row[x] is the new added row.
I have a parent view model, that contains a collection of other view models (of same type) (children). On Initialization the number of children will be decided (varying).
The child View consists of a button and a list box. Initially the listbox is hidden. On click of button the list box appears and on clicking outside (outside of the control or any other child button).
On init only buttons will be shown. I want these buttons to be spaced across the available width. The requirement is that once the button is clicked (when listbox is shown) the width of the whole child will increase (lets say 350) and when it is hidden it reverts back to the original size.
In the parent i am using a ItemsControl to show the children views. I have tried all controls but not able to figure ou a appropriate solution for this. I have two issues:
On Button click i am able to show current listbox. If i click another button teh first one goes off. Till here it works fine. But i also need that the currentopen listbox closes on click anywhere outside of the control (child control)
How to automatically size and resize based on what is clicked . First all should be propotionately sized and then when one is clicked it's size increases (here other childs resize with the rest available space). When the one (open control) is collapsed, all of them come back to normal proptionate sizes.
Any ideas ?
BTW, i am using MVVM pattern for this.
how about using a flag to direct the view to perform calc and refresh/readjust the sizing as when needed.
like on-click routine, set the flag on
whenever the view (pre-)painting/drawing event is kicked in, check if the flag is on, do the calc and sizing, then off the flag.