Search code examples
backgroundsencha-touch-2css-filters

Blurred background in list sencha touch

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.

Solution

  • Is this what you were trying to achieve https://fiddle.sencha.com/#fiddle/4tb

    Here is how you can accomplish this

    1. Add an empty div as html property of the list
    2. remove the background of the list

    3. 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;}