Blurred background in list sencha touch - background

Question

I have a list which contains main menu of my mobile app and is visible when user swipes to right or clicks on menu icon. I want to have the background of this list and hence main menu to be blurred.
I checked out the css filter:blur property and it can be done using that but you need to have an extra div under the div which has your content and apply filter:blur to it as shown in this Codepen
Below is my list code for sencha touch
Ext.define('MobileApp.view.SlideList', {
extend: 'Ext.List',
xtype: 'slidelist',
config: {
cls: 'slide1',
variableHeights: true,
onItemDisclosure: true,
store: 'SlideListStore',
itemTpl: ['<div class="slideImg" style="background-image:url(resources/images/{img});"></div>',
'{title}',
'<div class="settingImg" id="settingImg" style="background-image:url(resources/icons/nw-icons/settings.png);"></div>'].join(''),
listeners: {
initialize: function (comp, eOpts) {
comp.element.on(
'swipe',
function (event, node, options, eOpts)
{
/*send event as a argument to get direction of swipe*/
this.fireEvent('swipe', event);
},
comp
);
}
}
}
});
I cant figure out where to place the extra div and apply filter:blur to it. Any pointers will be helpful.

Answer 1

Is this what you were trying to achieve https://fiddle.sencha.com/#fiddle/4tb
Here is how you can accomplish this
Add an empty div as html property of the list
remove the background of the list
add css to blur the image
.setMyBackground {
position: fixed;
left: 0;
right: 0;
display: block;
background-image: url('http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_527bf56961712_1.JPG');
width:100%;
height: 100%;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
z-index:-1;
}
.slide1{ background:none;}