This is how I set up my selection model for my grid :
var selM = Ext.create('Ext.selection.Model', {
mode: 'SINGLE',
toggleOnClick: true,
allowDeselect:true
});
And then in my table I add this as a configuration paramater :
var packageGrid = Ext.create('js.grid.MyGrid', {
selModel: selM
});
The MULTI selection is disabled, which is great. However now nothing remains selected. If I click on a row the highlighting disappears as soon as I move the mouse away.
This could be an extjs bug. I have tried the other parameter 'SIMPLE' as well.
Here is a fiddle which shows my problem :
http://jsfiddle.net/fgkb8yw5/1/
RowModel is the default so you can simply use:
selModel: {
mode: 'SINGLE'
}
Example: http://jsfiddle.net/8mra2het/1/
It's not a bug, Ext.selection.Model is the abstract class - which shouldn't be instantiated directly. Normally - when you specify the selModel declaratively, the grid component will implement one of the grid-context appropriate sub-classes:
Ext.selection.CellModel
Ext.selection.RowModel
I updated your fiddle using RowModel to demonstrate.
Related
Please refer to the following fiddle: Binding HTML Issue
When you select a row from the combobox on the left panel, it prints the bound value, along with some HTML in the form on right. When you then click on the button labeled as 'Test Update' it first clears the bound value in the drop down, and then is supposed to update the HTML to clear it, as well.
Problem is, that the update for the displayfield referenced in the Ext.ComponentQuery.query does not work in this order. If I do the update first in the fiddle it works, but if I try this in my actual app, it does not (in my app the setValue on the combobox DOES work though, but then leaves the HTML label - which I want to clear).
An ideas as to why this behavior is occurring would be most welcome.
You probably would want to use a formula for that, it simplifies the logic behind it.
viewModel: {
formulas: {
foo: function(get) {
var sel = get('peopleComboRef.selection');
return sel ? ('HTML Label: ' + sel.get('name')) : '';
}
}
},
then bind this formula to your displayfield.
{
xtype: 'displayfield',
itemId: 'displayTest',
bind: {
html: '{foo}'
}
}
fiddle: https://fiddle.sencha.com/#fiddle/24f5&view/editor
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
First of all, I am using Extjs 4.1.
I have a grid with property grid and I want to add a column of checkbox into the grid. The property grid code is as follows:
var grid = Ext.create('Ext.grid.property.Grid', {
tbars:[],
selModel: Ext.create('Ext.selection.CheckboxModel',{mode: 'MULTI'}),
columnLines: true,
renderTo: Ext.getBody(),
source: {
"grouping": false,
"autoFitColumns": true,
"productionQuality": false,
"created": Ext.Date.parse('10/15/2006', 'm/d/Y'),
}
});
However the checkbox selection model does not show up in the grid.
anyone can point me to the correct direction or property grid does not work with checkbox ?
Although the selModel property is documented in Ext.grid.property.Grid, this is only because Ext.grid.property.Grid extends Ext.grid.Panel. The problem is that this type of grid only has a fixed selModel and namely of type cellmodel. You can see its behaviour by clicking on a property (the property editor gets the focus and e.g a date proeprty shows a date picker). The cellmodel selModel is hard coded in the source code in the initComponent() method, so if you want to change that, you should write your own subclass in which you overwrite that.
I have a simple nesded list like
var treestore = Ext.create("Ext.NestedList", {
fullscreen: true,
updateTitleText: false,
useTitleAsBackText: false,
defaultBackButtonText: null,}
The problem is when i tap on an item it changes its own style only after a second holding, though there is need to pass that immediately
Any help will be perfect). thanks
The answer is very simple
i just had to write active atribute for the class displaing items ie :
.nav-element:active{
background:red;
}
I cannot see to get the buttons from an Ext.FormPanel defined like this:
Ext.apply({
....
buttons: [
{
text: 'Save',
itemId: 'btnSave'
}
]
});
I've tried getComponent on the FormPanel instance, but that doesn't return btnSave. Is btnSave on a different element than the rest of the form?
You can't use getComponent() because the buttons are not part of the items config.
getComponent() - "Examines this container's items property and gets a direct child component of this container."
You could give the button an id and then use Ext.getCmp() or use component query as #limscoder shows.
You should be able to use the container's "query" method to retrieve descendant components:
panel.query("#btnSave")
In Extjs 4.2, I had similar code to yours with buttons at the bottom of a window.
This worked for me:
var bbar = this.getDockedItems('toolbar[dock="bottom"]')[0];
var button = bbar.getComponent('btnSave');
The toolbar and items are not in your code but they are implied with buttons:[{}]