1

I'm trying to build a dataview to display some pictures. These pictures I want to select (should be highlighted) and then interact with them (delete e.g.)

xtype: 'dataview',
        id:'fotodataview',
        scrollable: true,
        inline: true,
        mode: 'MULTI',           
        cls:'dataview-inline',
        itemTpl: '<div class="img" style="background-image:url({image}); "> </div><div class="name">{name}<br/>{date}</div>',          
        store: dataViewStore,
        listeners:{
            //itemtap:'onItemTap'
        }

What do I have to add to have a highlighted item? Do I have the toggle the selection on my own when tapping a item? Do I have to add a cls to simulate a selection? (e.g. like list?)

/e I'm developing a modern app only!

Offset
  • 609
  • 1
  • 5
  • 22
  • Ok got it. Problem was the amount of tap functions in dataview. used itemtap which wont select even if I used the select mehtod. changed to select only event . seems like I deselected my records every time.. – Offset Feb 18 '16 at 08:10

1 Answers1

1

You need to add your own css to achieve this:

.dataview-inline .x-item-selected
{
//your selection style
}

OR

you can created your your select class & mention it in selectedCls property:

selectedCls:'<yourSelectClass>'  // property in your dataview
.<yourSelectClass>{             // css class
//your selection style
}
Ankit Chaudhary
  • 4,059
  • 1
  • 11
  • 23
  • When using selectAll() all my views get selected ,except the one I clicked..the method select and selectrange wont select anything at all. Select event gets fired every time. /ot how can I use enter in this editbox. ? – Offset Feb 18 '16 at 07:51
  • `code` onSelect:function( me, record, eOpts ){ console.log("on select"); var dataview = Ext.getCmp('fotodataview'); var bool = dataview.isSelected(record); console.log(bool); var count = dataview.getSelectionCount(); console.log("Amount of records selcted: " + count); var mode = dataview.getMode(); console.log("Selction Mode is: " + mode); } `code` thats the function in controller nothing fancy. VIew adds select() to listeners. – Offset Feb 18 '16 at 10:41
  • `code`.dataview-inline .x-item-selected{ background-color: #00B8CE; opacity: 0.3; } `code` – Offset Feb 18 '16 at 10:42