PDA

View Full Version : How to remove some default event from a grid



Fent2
19 Mar 2014, 8:04 PM
Hi ,
I use a grid to show some para ,so i don't want the effect of the mouse over, and item click ,and so on
how to forbidden the mouse over or item click effect?
thank you !

scottmartin
20 Mar 2014, 8:14 AM
How are you displaying the paragraph, on the same line of below? In the following example, if you remove the ftype: 'rowwrap' feature, your will not see hover/select.



Ext.define('Animal', {
extend: 'Ext.data.Model',
fields: ['name', 'latin', 'desc']
});

Ext.application({
name: 'Fiddle',

launch: function() {

Ext.create('Ext.grid.Panel', {
width: 400,
height: 400,
renderTo: Ext.getBody(),
store: {
model: 'Animal',
data: [{
name: 'Tiger',
latin: 'Panthera tigris',
desc: 'The largest cat species, weighing up to 306 kg (670 lb).'
}, {
name: 'Roman snail',
latin: 'Helix pomatia',
desc: 'A species of large, edible, air-breathing land snail.'
}, {
name: 'Yellow-winged darter',
latin: 'Sympetrum flaveolum',
desc: 'A dragonfly found in Europe and mid and Northern China.'
}, {
name: 'Superb Fairy-wren',
latin: 'Malurus cyaneus',
desc: 'Common and familiar across south-eastern Australia.'
}]
},
columns: [{
dataIndex: 'name',
text: 'Common name',
width: 125
}, {
dataIndex: 'latin',
text: 'Scientific name',
flex: 1
}],
features: [{
ftype: 'rowwrap' // required to make all selectable / hover
}, {
ftype: 'rowbody',
setupRowData: function(record, rowIndex, rowValues) {
var headerCt = this.view.headerCt,
colspan = headerCt.getColumnCount();
// Usually you would style the my-body-class in CSS file


// apply the changes to rowValues, the entire rowbody should be selectable.
return Ext.apply(rowValues, {
rowBody: '<div style="padding: 1em">' + record.get("desc") + '</div>',
rowBodyCls: "my-body-class",
rowBodyColspan: colspan
});
}
}]
});

}
});

Fent2
20 Mar 2014, 6:36 PM
Thank you 1
I want to show the para in a grid like the picture below, in the grid ,i don't want show the effect of the mouse over and item select ,it only a simply grid table !
i want to disable all the operate on the grid ,how to config it?ths!


48391
How are you displaying the paragraph, on the same line of below? In the following example, if you remove the ftype: 'rowwrap' feature, your will not see hover/select.



Ext.define('Animal', {
extend: 'Ext.data.Model',
fields: ['name', 'latin', 'desc']
});

Ext.application({
name: 'Fiddle',

launch: function() {

Ext.create('Ext.grid.Panel', {
width: 400,
height: 400,
renderTo: Ext.getBody(),
store: {
model: 'Animal',
data: [{
name: 'Tiger',
latin: 'Panthera tigris',
desc: 'The largest cat species, weighing up to 306 kg (670 lb).'
}, {
name: 'Roman snail',
latin: 'Helix pomatia',
desc: 'A species of large, edible, air-breathing land snail.'
}, {
name: 'Yellow-winged darter',
latin: 'Sympetrum flaveolum',
desc: 'A dragonfly found in Europe and mid and Northern China.'
}, {
name: 'Superb Fairy-wren',
latin: 'Malurus cyaneus',
desc: 'Common and familiar across south-eastern Australia.'
}]
},
columns: [{
dataIndex: 'name',
text: 'Common name',
width: 125
}, {
dataIndex: 'latin',
text: 'Scientific name',
flex: 1
}],
features: [{
ftype: 'rowwrap' // required to make all selectable / hover
}, {
ftype: 'rowbody',
setupRowData: function(record, rowIndex, rowValues) {
var headerCt = this.view.headerCt,
colspan = headerCt.getColumnCount();
// Usually you would style the my-body-class in CSS file


// apply the changes to rowValues, the entire rowbody should be selectable.
return Ext.apply(rowValues, {
rowBody: '<div style="padding: 1em">' + record.get("desc") + '</div>',
rowBodyCls: "my-body-class",
rowBodyColspan: colspan
});
}
}]
});

}
});

scottmartin
21 Mar 2014, 5:33 AM
You can add the following to your grid config:



viewConfig: {
trackOver: false,
},

listeners : {
beforeselect : function() {
return false;
}
}

Fent2
23 Mar 2014, 11:16 PM
Thank you very mush!
this OK!


You can add the following to your grid config:



viewConfig: {
trackOver: false,
},

listeners : {
beforeselect : function() {
return false;
}
}