PDA

View Full Version : How to disable itemclick event to a dataview item which has a class 'x-item in extjs4



shilpay
25 Sep 2012, 9:42 AM
Hi,
I have one query with dataview.

I have to unbind(disable) the 'itemclick' event to a dataview item which has a class 'x-item-disabled' in extjs4.
In dataview tpl I am adding the 'x-item-disabled' class to a dataview item based on condition.
Here which dataview item has not having class 'x-item-disabled', its need to be clickable. remaining items are not clickable.

Please any one suggest me to get it out.

Thanks & Regards,
Shilpa

vietits
25 Sep 2012, 11:04 PM
You should listen for 'beforeitemclick' event then check to see whether or not it has class 'x-item-disabled'. If it has then return false to disable 'itemclick' event. Example:


Ext.onReady(function(){
Ext.define('Image', {
extend: 'Ext.data.Model',
fields: [
{ name:'src', type:'string' },
{ name:'caption', type:'string' },
{ name:'cls', type:'string' }
]
});


Ext.create('Ext.data.Store', {
id:'imagesStore',
model: 'Image',
data: [
{ src:'http://www.sencha.com/img/20110215-feat-drawing.png', caption:'Drawing & Charts', cls: '' },
{ src:'http://www.sencha.com/img/20110215-feat-data.png', caption:'Advanced Data', cls: 'x-item-disabled' },
{ src:'http://www.sencha.com/img/20110215-feat-html5.png', caption:'Overhauled Theme' },
{ src:'http://www.sencha.com/img/20110215-feat-perf.png', caption:'Performance Tuned' }
]
});


var imageTpl = new Ext.XTemplate(
'<tpl for=".">',
'<div style="margin-bottom: 10px;" class="thumb-wrap {cls}">',
'<img src="{src}" />',
'<br/><span>{caption}</span>',
'</div>',
'</tpl>'
);


Ext.create('Ext.view.View', {
store: Ext.data.StoreManager.lookup('imagesStore'),
tpl: imageTpl,
itemSelector: 'div.thumb-wrap',
emptyText: 'No images available',
renderTo: Ext.getBody(),
listeners: {
beforeitemclick: function(view, record, item){
return !Ext.get(item).hasCls('x-item-disabled'); // or return !item.className.match(/x-item-disabled/)
},
itemclick: function(){
console.log('item clicked')
}
}
});
});