Is there a standard way to highlight active row in a grid like in attached screen?
I mean having a grid, with cellmodel selection type, when clicking on an item in the grid, it highlights the cell. I would like to highlight the active row at the same time.
It is very useful when gird contain a lots of data to be analysed,
when selecting cell, and entire row (maybe collumn?) needs to be highlighted.
Thanks for your help guys. We did it :) Here is the one possible solution :
selModel: Ext.create('Ext.selection.CellModel', {
listeners: {
select: function (cellModel, record, rowIndex) {
var myGrid = this.items.get('gridItemId');
myGrid.getView().addRowCls(rowIndex, 'row-style');
},
deselect: function (cellModel, record, rowIndex) {
var myGrid = this.items.get('gridItemId');
myGrid.getView().removeRowCls(rowIndex, 'row-style');
},
scope: this
}
}),
you can use addRowCls method of grid which Adds a CSS Class to a specific row.
http://docs.sencha.com/ext-js/4-0/#/api/Ext.grid.View-method-addRowCls
Even if you are using the CellSelectionModel, you could easily apply styles/classes to the row the selected cell is in. If you take a look at the events for CellSelectionModel, you'll see the cellselect actually returns the rowIndex.
cellselect : ( SelectionModel this, Number rowIndex, Number colIndex )
So, what you could so is something like the following:
// we'll say you have your Grid stored in a variable, grid
CellSelectionModel ...({
listeners: {
'cellselect': function(selModel, rowIndex) {
var cellRow = grid.getView().getRow(rowIndex);
Ext.fly(cellRow).addClass('selectedRow')
// do any other logic with the actual DOM element here
}
})
Related
I want to change row background on basis of row data in ExtReact grid, I couldn't find any option in the documentation
I think you are looking for Ext.grid.feature.RowBody. You have to override the getAdditionalData method and return an object that contains your rowBodyCls.
Ext.create('Ext.grid.Panel', {
...
features: [{
ftype: 'rowbody',
getAdditionalData: function (data, idx, record, orig) {
// Use the data/record to determine which class to apply, then
// style the row body in CSS.
return {
rowBodyCls: "my-body-class"
};
}
}],
...
Now legend in EXTJS works in such way: it shows all available legend fields and appropriate series and you can enable/disable any of them. I want to make that only one legend item can be enabled in one time. E.g. you have chart with 2 legend items (with 2 series), only first item is active on chart load and then if you want to active second item then first item becomes automatically disabled.
Here is chart fiddle with native ExtJS behaviour:
https://fiddle.sencha.com/#fiddle/1b7d
Please, post ideas how can I make it work as I described before.
If you have a look at the legend source code, freely available in your Ext directory or in the Sencha docs, you find that you can override that toggleItem method in such a way that only one selection is allowed.
The basics should be something like
toggleItem: function (index) {
var store = this.getStore(),
record = store.getAt(index);
store.query("disabled", false).each(function(record) {record.set("disabled", true) });
record.set("disabled", false);
}
but it doesn't work exactly as expected. Perhaps you can pave your way along from there.
this can be easily achieved with using legend type dom, and looping and setting every other legend (button) disabled, as followed -
legend: {
docked: 'bottom',
type: 'dom',
listeners: {
itemclick: function(obj, record, item, index) {
var i = 0,
records = obj.getStore().getRange();
for(i=0; i < records.length; i++){
i === index ? records[i].set('disabled', false) : records[i].set('disabled', true);
}
}
}
}
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 want a javascript function to be called as I click on a cell in grid .I want code for the same using extjs 3.4. How can I achieve it? can anyone help me out in it?
Set the selection model to CellSelectionModel and call your function on cell select:
var grid = new Ext.grid.GridPanel({
// ..
sm: new Ext.grid.CellSelectionModel({
listeners: {
cellselect: function(sm, row, col) {
Ext.Msg.alert('click','got a click!');
}
}
})
})
I have a grid panel i need to show / hide columns in a grid panel depending on the value of a checkbox. If the checkbox is checked i need to display column in the grid and if it is unchecked i need to hide the column in the grid.
Here is my code
var chkEnableDisplayResponsibilityForAction = '<%=Session["chkEnableDisplayResponsibilityForAction"]%>';
var flags = Boolean.parse(chkEnableDisplayResponsibilityForAction);
var flags1 = !Boolean.parse(chkEnableDisplayResponsibilityForAction)
var colModel = new Ext.grid.ColumnModel([
{ header: "PricePlanID", width: 100, sortable: true, dataIndex: 'PricePlanID', hidden: flags, hideable: flags1 },
]);
when i refresh the page i am not able to toggle the columns depending on the value of the checkbox. But when i login and log out i am able to see the changes in the grid panel. Can anyone help me in refreshing the column values in the grid panel?
if take a look at the ExtJS API, particulary the ColumModel there is a setHidden method, it would hide/show a column in a GridPanel.
myGrid.getColumnModel().setHidden(0, true);
you should also hook the onchange event of your check box so you can show or hide the column
In Ext JS 4.1, to hide a column, you use:
grid.columns[0].setVisible(false);
Looks like getColumnModel() with its setHidden() method is no longer part of the grid:
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.Panel
You can show/hide columns using column header menu - you can choose which column you want to have shown. Anyway, if you want to show/hide a column, try this
myGrid.getColumnModel().setHidden(0, true);
In ExtJS 4 gain access to your grid panel, and then access the columns attribute which is an array of Column objects.
From there you can use the array iterator methods ( http://www.diveintojavascript.com/core-javascript-reference/the-array-object ) to perform an action.
In the below example I hide and show a few of the columns based on their header names, but you can obviously perform action based on any Column attribute.
var grid = Ext.getCmp( 'my_grid_panel' );
grid.columns.forEach( function( col ) {
if( ( col.text == "Foo" ) || ( col.text == "Bar" ) ) {
col.setVisible( true );
} else if( col.text == "Baz" ) {
col.setVisible( false );
}
});
The answers above I think are pretty good.
But let me give you a advice.
1) In ExtJS 4.x it is recommended to use Ext.ComponentQuery`s methods instead of Ext.getCmp()
2) To hide/show columns of the grid you can use following code
Ext.ComponentQuery.query('grid gridcolumn[dataIndex^="service"]')[0].hide()
or to show
Ext.ComponentQuery.query('grid gridcolumn[dataIndex^="service"]')[0].show()
It should resolve hiding/showing any column in a grid.
Here grid is your grid , it maybe id or xtype etc.
setVisibleColumn : function(name, flag) {
name = Ext.Array.from(name);
var column;
for (var i = 0; i < name.length; i++) {
column = this.getColumn(name[i]);
if (column) {
flag ? column.show() : column.hide();
}
}
}