This paragraph is translated from French.
I'm really stuck. my problem in my application is as follows:
I am currently developing an implementation Ext js. I would like to disable rows in a grouped grid. I use Ext.Fly function (() getNodes grid.getView () [index Store].) mask ().;
except that when the group in my inner gate is closed (collapsed). Ext.fly the statement returns a error (Ext.fly is null).
I wonder if there is a way to disable a row in a grouped grid other than Ext.fly.
Thank you in advance for the answer.
If it helps please try
Use grid beforeselect event to disable selection, view getRowClass method to style row .
viewConfig: {
getRowClass: function (record, index) {
// disabled-row - custom css class for disabled (you must declare it)
if (record.get('name') == disabled_name) return 'disabled-row';
}
},
listeners: {
beforeselect: function (sm, record) {
if (record.get('name') == disabled_name) return false;
}
},
Hope this helps you.
Below link might help you as well
http://www.sencha.com/forum/showthread.php?208836-Gridpanel-Row-Disable
Related
When we have multiple parent-child grid and want to re config the grid after load call like this:
listeners: {
'afterrender': function (grid) {
var state =grid.getState();
state.columns[1].hidden= true;
grid.applyState(state);
}
}
This behaviour is even still reproducable on ExtJS 6.5.1.
For Example
https://www.sencha.com/forum/showthread.php?306941-Apply-state-after-grid-reconfigure
Here's an override I've been using to fix the hidden columns issue. I am using 6.6 so not sure if this will work in 4.4, though. Also, you may not need to suspend/resume layouts but not sure on that either.
Ext.define('MyApp.overrides.Grid', {
override: 'Ext.grid.Panel',
applyState: function () {
this.callParent(arguments);
Ext.suspendLayouts();
Ext.each(this.getColumns(), function (column) {
if (column.hidden) {
column.show();
column.hide();
}
});
Ext.resumeLayouts(true);
}
});
Well it's still an issue with applyState. When grid is having multiple hidden columns and we use applyState function it crash our grid. So we have skip the hidden property part although it's working smooth for width change , filters etc.
listeners: {
'afterrender': function (grid) {
var state =grid.getState();
state.columns[1].hidden= false;
grid.applyState(state);
grid.columns[3].hidden = true;
}
}
if you manually set hidden property of column it'll hide it.
In ExtJs 6.2, there is a bug described here in the Sencha Forum.
Since 6.2+ Ext.grid.Panel ignores flex when using column items.
Steps to reproduce the problem: Create a grid in fiddle with 6.2+ Add
columns without items and flex:1 klick run in fiddle and it looks just
fine Add a item to the column with flex:1 klick again run in fiddle an
flex wil get ignored!
The result that was expected: I would expect the column to flex.
The result that occurs instead: The column will render in the minimum
size.
The thread says this be corrected in the nightly build, but ExtJs 6.2.1 is not yet available in the GPL version. Is there a workaround for this issue ?
Or would id be possible for someone to publish an override with the bugfix ?
Edit: Additional insight
Looking at the events bound to the columns and the grid I can assert that the bug is happening between the afterrender event (column.flex = 1) and the afterlayout event (column.flex = null). I don't know much of the layout run details of ExtJs, so I'm short of ideas on how to further narrow down where the offending code might be locaded. If anyone can give hints in this direction instead of a complete answer, they are also welcome.
I found as a workaround to resize the columns once the grid is laid out. This works as it should.
The only drawback is that it lays out the columns twice.
Ext.define('App.override.grid.Panel', {
override: 'Ext.grid.Panel',
initComponent: function() {
this.callParent(arguments);
this.on('afterlayout', this.resizeColumns);
},
resizeColumns: function () {
var me = this,
width = this.getWidth(),
flex = 0;
Ext.batchLayouts(function(){
me.columns.each(function (col) {
if (col.config.flex) flex += col.config.flex
else if (col.config.width) width -= col.config.width
else width -= col.getWidth()
})
if (flex) {
me.columns.each(function (col) {
if (col.config.flex) {
newWidth = Math.round(width * col.config.flex / flex)
if (col.getWidth() != newWidth) col.setWidth(newWidth)
}
})
}
})
}
})
Problem: A column whose width is set this way is no longer user resizeable.
There is an easier workaround (according to https://fiddle.sencha.com/#view/editor&fiddle/2kgh):
Just duplicate the flex property of the column in its child items.
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name', flex: 1,
items: [
{
xtype: 'textfield',
flex: 1
}
]
},
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 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();
....
....
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
}
})