I am building an ExtJS4 Web Application and I have a "page" where I have a Grid whose records come from a database. After loading the store of the grid, I want the first item to be selected.
This is what I've tried so far:
store.load({
callback: function() {
if(store.count() > 0){
grid.getSelectionModel().select(0);
//grid.getView().select(0);
}
}
});
The store loads the database records properly as they're shown in my grid. The first row is also highlighted as if it was clicked. However, my listener/controller for the itemclick event isn't firing as opposed to when I manually click the row.
I've also tried grid.getView().select(0); as well as grid.getSelectionModel().selectFirstRow(); but apparently, both those aren't functions.
My grid row appears to be selected by the itemclick function isn't being called at all.
You should use 'selectionchange' listener in 'Ext.selection.Model' instead of 'itemclick' in grid class. This listener will be fired in both cases when rows are clicked in grid and rows are selected programmatically.
Probably the code will be like this:
Ext.create('Ext.grid.Panel', {
selModel: Ext.create('Ext.selection.Model', {
...
listeners: {
selectionchange: function( this, selected, eOpts ) {
// Write your listener here or fire another event in view controller
}
}
}
store: ...
});
Related
I have an angular ui grid working with selection, I want to populate a form with the contents of the selected record. I see no way to either reference the selected record or detect that row selection has occurred. Any ideas?
With ui-grid the api is a little different than the ng-grid example Aidan posted.
Normally you'd listen to the rowSelectionChanged event, refer: http://ui-grid.info/docs/#/api/ui.grid.selection.api:PublicApi
This would look something like the following:
$scope.selectionChanged = function( rowChanged ) {
if( rowChanged.isSelected ){
$scope.targetRow = rowChanged;
}
};
gridOptions = {
// other stuff
onRegisterApi: function(gridApi) {
$scope.gridApi = gridApi;
$scope.gridApi.selection.on.rowSelectionChanged($scope, $scope.selectionChanged);
}
};
You should then be able to use $scope.targetRow as the target for your form. You'll probably need to turn off multiselect (check the selection gridOptions, or the selection tutorial), and deal with what happens when no row is selected.
In my application I tend to do the form as a popup (a modal or a separate page). When I do that it's much simpler, I just do a click event on the row itself, or (more commonly) a button on the row. Refer perhaps to http://ui-grid.info/docs/#/tutorial/305_appScope for an example. You can pass the row that was clicked upon into that click handler:
cellTemplate:'<button ng-click="grid.appScope.openModal( row.entity )">Edit</button>' }
You can then pass the entity (which would be an ngResource) into that modal, and once it edits it then it can just call save on the resource when it's done.
I did something similar to this in my (ng-grid based) tutorial series: https://technpol.wordpress.com/2013/11/09/angularjs-and-rails-4-crud-application-using-ng-boilerplate-and-twitter-bootstrap-3-tutorial-index/
It is customary to post what you have tried, please consider this in future. Here is a short sample that utilises the afterSelectionChange event for the ng-grid:
A grid with two divs to hold the selected data:
<div class='gridStyle' ng-grid='testGridOptions'></div>
<div>{{current.name}}</div>
<div>{{current.age}}</div>
some test data:
$scope.testData = [{name:'John', age:25},
{name:'Mary', age:30},
{name:'Fred', age:10},
{name:'Joan', age:20}];
configuration for the grid:
$scope.testGridOptions = {
data: 'testData',
multiSelect: false,
afterSelectionChange: function(data){
$scope.current = data.entity;
}
};
Hope this gets you started.
Aidan
I have a grid, with a selection model that does allow the selection of a row only under certain conditions.
When I click on a row, it gets focussed (it becomes darker gray). I want to add a button, that acts on the currently focussed row.
Since the selection is deactivated, I cannot use the normal way
grid.getSelectionModel().getSelection()
because there is no selection. How can I access the focussed row ?
Add this listener to your grid to get information about the focused row.
Ext.create('Ext.grid.Panel', {
...
listeners: {
afterrender: function(component){
component.getSelectionModel().on({
focuschange: function (view, oldFocused, newFocused, eOpts) {
console.log(newFocused);
}
});
}
}
});
I have a grid and I'm gonna set it's store dynamically, on the fly.
I saw this question on stackoverflow before: ExtJS 4 Change grid store on the fly
And as the best answer says, I did reconfigure method on my grid. Everything works fine and data loaded into grid but my important problem is that the grid's events doesn't work anymore after calling reconfigure method, for instance I have a actioncolumn in my grid, after that, the handler callback function doesn't work:
items: [{
icon: '/accept.png',
tooltip: "Boo",
handler: function(grid, rowIndex, colIndex) {
debugger;
}
}]
Any other solution?
I have a form bound to a grid where a user can either create a new user or select a row in the grid and edit a user. Selecting a row in a grid should change some button visibility. Anyway my main obstacle is that Ext seems not to be fully loaded on the row select event. The error I get in firebug is:
TypeError: Ext.getCmp(...) is undefined
Here is a snippet of code from my MVC controller:
....
init: function() {
this.control({
'userlist': {
selectionchange: this.gridSelectionChange,
viewready: this.onViewReady,
select: this.onRowSelect
},
'useredit button[action=update]': {
click: this.updateUser
},
'useredit button[action=create]': {
click: this.createUser
}
});
},
onRowSelect: function(model, record, index, opts) {
// Switch to the Edit/Save button
//console.log(model);
Ext.getCmp('pplmgr-user-create').hide();
Ext.getCmp('pplmgr-user-create').show();
Ext.getCmp('id=pplmgr-user-reset').show();
},
....
Is there some other method/event for accomplishing this? I've tried in both selectionchange and select events and I have also tried using the Ext.Component.Query and it just seems that Ext is not yet available in these events. I'd appreciate any assistance including informing me of a better practice to accomplish the same thing.
Ext.getCmp takes an id as its parameter. Your third call to it has id=..., the "id=" part is confusing getCmp, so it's returning undefined.
If you change the last call to just the id, you should be ok:
Ext.getCmp('pplmgr-user-reset').show();
If you have a reference to your view, you can try this:
myView.down('pplmgr-user-create').hide();
....
....
I'm trying to make functionality for deleting column from grid, but I have problem with detecting on which column user right clicked (right click > context menu with delete option).
For the moment I'm displaying the contextMenu something like that
viewConfig: {
stripeRows: true,
listeners: {
itemcontextmenu: function(view, rec, node, index, e) {
e.stopEvent();
contextMenu.showAt(e.getXY());
return false;
}
}
},
You could attach the handler to the contextmenu event for every column, that would give you access to the Column. Then you could refresh the columnmodel by using the setConfig function passing in the new array of columns (minus the one you just deleted).