PDA

View Full Version : itemSelector, overItemCls, selectedItem not working?



aacoro
14 Sep 2011, 10:05 AM
Hi all,

Just created a view with some items based on the example sencha provides: API Link (http://docs.sencha.com/ext-js/4-0/#%21/api/Ext.view.View)
But I just cannot get it working to select an item. I have created a reproducable JSfiddle.

Check out my wrong code on JSFiddle

(http://jsfiddle.net/PBnue/1/)Or look here:


Ext.create('Ext.view.View', {
store: Ext.data.StoreManager.lookup('imagesStore'),
tpl : imageTpl,
itemSelector : 'pblWrap',
overItemCls : 'pblOver',
trackOver : true,
selectedItemCls : 'pblSelected',
singleSelect : true,
emptyText: 'No images available',
renderTo: Ext.getBody()
});

And the CSS;


.pblWrapper {
border: 1px #5a89d1 solid;
margin : 3px;
padding : 3px;
background-color: #c4d5ef;

/* Effects */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}


.pblWrap {
border: 1px #5a89d1 solid;
margin : 3px;
padding : 3px;
background-color: #ccc;

/* Effects */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

.pblOver {
cursor: pointer;
background-color: dfe8f6;
}

.pblSelected {
cursor: pointer;
border: 1px #f40 solid;
cursor: pointer;
}

aacoro
14 Sep 2011, 1:15 PM
I do not know why but setting this did the trick for me:


items : {
xtype : 'dataview',
tpl : pblTpl,
store : secondGridStore,
itemSelector : 'div.pblWrapper',
layout : 'fit',
overItemCls : 'pblOver',
trackOver : true,
autoScroll : true,
multiSelect : false,
singleSelect : true,
selectedItemCls : 'pblSelected'
}

mberrie
14 Sep 2011, 8:31 PM
Well, in your original code your XTemplate assigns a CSS class named 'pblWrapper', but your DataView configuration refers to itemSelector: 'pblWrap': NO MATCH! :D



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

Ext.create('Ext.view.View', {
store: Ext.data.StoreManager.lookup('imagesStore'),
tpl: imageTpl,
itemSelector : 'pblWrap',
overItemCls : 'pblOver',
trackOver : true,
selectedItemCls : 'pblSelected',
singleSelect : true,
emptyText: 'No images available',
renderTo: Ext.getBody()
});