Add a “Add to Homescreen” Modal to your Sencha Touch v1 App

So you’re in Sencha 1.1.x and need a custom overlay panel like an Ext.MessageBox but with a lot more options? This one in particular is set up to pop into view whenever you’re on this particular parent panel. I used a modded version of it to create an “Add to Homescreen” panel for iOS devices.

App.Bookmark = new Ext.Panel({
  floating         : true,
  modal            : true,
  centered         : true,
  width            : Ext.is.Phone ? '95%' : 400,
  height           : Ext.is.Phone ? '85%' : '60%',
  styleHtmlContent : true,
  mask : true,
  hideOnMaskTap    : false,
  scroll           : 'vertical',
  html             : 'Some html. Whatever. Knock yourself out.',
  dockedItems: [
    {
      dock  : 'bottom',
      html  : '<div class="x-bookmark"><span class="x-bookmark-img"></span></div>',
      width : '100%',
      style : {
        'margin' : (Ext.is.Phone) ? '1em 0 0 0.25em' : '1em 0 1em 50px' // Me getting picky
      }
    },{
      dock  : 'top',
      xtype : 'toolbar',
      title : 'Add Bookmark',
      ui    : 'light',
      items : [
        {
          xtype : 'spacer'
        },{
          iconMask : true,
          ui       : 'plain',
          iconCls  : 'delete',
          handler  : function() {
            App.Bookmark.hide('fade');
            ParentPanel.getEl().unmask();  // IMPORTANT
          }
        }
      ]
    }
  ]
});


App.ParentPanel = new Ext.Panel({
  id               : 'termsPanel',
  scroll           : 'vertical',
  layout           : 'fit',
  styleHtmlContent : true,
  html             : 'blah blah blah',
  listeners        : {
    activate  : function() {
      if (Ext.is.iOS) {
        this.getEl().mask();  // IMPORTANT
        var child = App.Bookmark;
        child.show('pop'); // OMG MAGIC!!!
        var width = (this.getWidth(false) - child.getWidth(false)) / 2;
        var height = Ext.is.Phone ? // Really don't need this or the set position... I just wanted it docked at the bottom
          (this.getHeight(false) - child.getHeight(false) + 35) :
          (this.getHeight(false) - child.getHeight(false)) * 2 / 3;
        child.setPosition(width,height);
      }
    }
  }
});

©2005-2017 Blog – Epiphany Digital is proudly powered by Badgers and Web Design is by Epiphany Digital
Entries (RSS) and Comments (RSS). 35 queries. 10.734 seconds.

Thank you for visiting this site. The web fairy will visit you in your sleep... you know, I was going somewhere with this, but it really doesn't have as much innocent charm as the tooth fairy, especially when I picture the web fairy as someone much like the Simpsons' Comic Book Guy but with wings. It's just not something I want.