PDA

View Full Version : Disable-ling hovering and selection in a nested Grid.



dragem
14 Nov 2011, 1:31 AM
I have a gridpanel with an expander with contains 2 gridpanels. how can i disable the 2 nested grids so that it can't be selected.
it have something like this:


var expander = new Ext.grid.RowExpander({ tpl: new Ext.XTemplate('<div class="detailDataNotes" style="width:50%; float:left">','','</div><div class="detailDataRegels" style="width:50%; float:left">','','</div>'),
actAsTree : true,
listeners:
{
expand: function(expander, record, body, rowIndex){
if(currentRow != ''){
this.collapseRow(currentRow);
}
currentRow = rowIndex;
processRowExpander(record, body, rowIndex);
rowSelect(record, rowIndex);
},
collapse: function(expander, record, body, rowIndex){
//collapse functie
}
}
});


function processRowExpander(record, body, rowIndex){
if(Ext.DomQuery.select("div.x-panel-bwrap", body).length == 0){
var innerRowDivNotes=Ext.DomQuery.select("div.detailDataNotes", body)[0];
var innerRowDivRegels=Ext.DomQuery.select("div.detailDataRegels", body)[0];
var pendingOrdersNotesGrid = new Ext.grid.GridPanel({
sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
xtype: 'grid',
ds: pendingOrdersNotesDS,
cm: pendingOrdersNotesCM,
autoHeight: true,
autoScroll: true,
loadMask:true,
viewConfig: {
forceFit:true
},
renderTo: innerRowDivNotes,
listeners : {
afterrender: function() {
pending_order = record.data.order_number;
pendingOrdersNotesDS.proxy.conn.url = 'res/data/notes.php?notetype=pending_order&pending_order_id='+pending_order;
pendingOrdersNotesDS.reload({params:{start:0, limit: 20}});
},
cellclick: function(grid, rowIndex, columnIndex, e){
e.stopEvent();
},
headerclick: function(grid, columnIndex, e){
e.stopEvent();
}
}
});
var pendingOrdersRegelsGrid = new Ext.grid.GridPanel({
sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
xtype: 'grid',
ds: pendingOrdersRegelsDS,
cm: pendingOrdersRegelsCM,
selectable: false,
autoHeight: true,
autoScroll: false,
loadMask:true,
viewConfig: {
forceFit:true
},
renderTo: innerRowDivRegels,
listeners : {
afterrender: function() {
pending_order = record.data.order_number;
pendingOrdersRegelsDS.proxy.conn.url = 'res/data/orderlines.php?ordernr='+pending_order;
pendingOrdersRegelsDS.reload({params:{start:0, limit: 20}});
}
}
});
NotesGrid.getSelectionModel().on('beforerowselect', function(sm, rowIdx, r) {
return false;
});
}
}
function rowSelect(record){
currentrecord = record;
}

App.PendingOrdersGrid = Ext.extend(Ext.grid.GridPanel, {
initComponent : function() {
Ext.apply(this, {
sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
xtype: 'grid',
ds: pendingOrdersDS,
cm: pendingOrdersCM,
plugins: [new Ext.ux.grid.CellSelect()],
loadMask:true,
split: true,
layout: 'column',
viewConfig: {
forceFit:true
},
plugins: expander,
collapsible: false,
animCollapse: true
});
},
initEvents: function() {
var pendingGridSm = this.getSelectionModel();
pendingGridSm.on('rowselect', this.onRowSelect, this);
},
onRowSelect: function(sm, rowIdx, r) {
nestedGrid = false;
rowSelect(r);
}
});

mitchellsimoens
18 Nov 2011, 12:30 PM
To disable selection, on the GridPanel set the disableSelection config to true and make sure selModel is undefined (nothing set). To disable the mouse over CSS, well, you're not really gonna disable it just change the CSS rule that gets applied. On the GridView, set the rowOverCls to an empty string, that should make it not apply the CSS, or change the default CSS rule to do what you want.

castitas
12 Mar 2012, 1:28 PM
I found disableSelection on the gridview, so I assume it was changed.

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.View-cfg-disableSelection
(http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.View-cfg-disableSelection)
Edit: You can use disableSelection as a config on a grid, too.