I'm developping with extjs4.
I have two grids as shown in the image, I want when I click on the line of Grid Panel 1 that contanis Number 1, the Grid Panel 2 will show only lines that contains Number 1.
That is pretty much straightforward; subscribe to the select event of the first grid and within that handler filter the store of the second grid. That's it.
grid1.on('select', function(grid,record) {
grid2.store.clearFilter(true); // see http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.Store-method-clearFilter
grid2.store.filter('Number', record.get('Number');
},this);
Related
I am using codedUI to test a windows application. In one of the screen there is third party grid (code Jock control). I am able to retrieve the Grid as WinTable. I am able to traverse through all the rows and cells inside Grid. I am able to retrieve the text in cell inside the Grid.
Issue : For one particular grid there is 3 Columns out of which 1 Contains Check Boxes entirely and remaining 2 Columns Filled with text. I am not able to select that chekbox inside the Grid with coded UI.
I have tried with checked, TryGetClickablePoint properties but not working.
I have very simple grid which contains a lot of data - so my scroll ball is quite narrow. I edit data in cells. Left to my grid there is picture with coordinates points. I wish this behavior: when I click on coordinate point I want to go to corresponding grid row. They are related by id(id row = id point div). How can it be made?
Also when I edit grid in the middle and bind coordinates of new point to row(by using store) - the grid gets automatically reloaded after store is updated - and scroll gets to the top. How can I track last edited row in the middle of the list so I can auotmatically focus on it? Thanx in advance.
use the focusRow method (http://docs.sencha.com/extjs/4.2.3/#!/api/Ext.view.Table-method-focusRow) to scroll where you want, for example :
yourGrid.getView().focusRow(10);
To disable the 'scroll to the top" effect when you reload the grid, set preserveScrollOnRefresh to true on the viewConfig of your grid (http://docs.sencha.com/extjs/4.2.3/#!/api/Ext.view.Table-cfg-preserveScrollOnRefresh).
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
Please point me to an Ext JS 4 code sample of a grid with records editable via a popup form. It seems to be a common use case, but I can only find editable grids with editing in place.
My approach:
Each row in the grid has an Edit button, which shows Ext.window.Window with an item Ext.form.Panel.
When the form is submitted I have all the fields, which correspond to a record in the grid store.
I get record using:
var storeRecord = grid.getStore().getAt(index);
But when I modify properties of this record, and hide the form window, the grid does not show updated values.
Am I missing some step? Do I need to force refresh? Or maybe there is a standard way to configure the grid with an editor as a form panel?
After two days of searches, trials and errors, I found the solution:
grid.getView().refresh();
I wish there was a faster way for Ext learning curve. :(
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.