Archive for the ‘Web Development’ Category

Use a label tag instead of a div on Sencha Forms

Tuesday, November 15th, 2011

Here’s how to override the default template for an input label and make it an actual label, in semantic traditional 508 compliant markup.

Ext.override(Ext.form.TextArea, {
    renderTpl: [
        '<tpl if="label"><label for="{inputId}"><span>{label}</span></label></tpl>',
        '<tpl if="fieldEl"><div>',
            '<textarea id="{inputId}" type="{type}" name="{name}"',
            '<tpl if="tabIndex">tabIndex="{tabIndex}" </tpl>',
            '<tpl if="placeHolder">placeholder="{placeHolder}" </tpl>',
            '<tpl if="style">style="{style}" </tpl>',
            '<tpl if="maxRows != undefined">rows="{maxRows}" </tpl>',
            '<tpl if="maxlength">maxlength="{maxlength}" </tpl>',
            '<tpl if="autoComplete">autocomplete="{autoComplete}" </tpl>',
            '<tpl if="autoCapitalize">autocapitalize="{autoCapitalize}" </tpl>',
            '<tpl if="autoFocus">autofocus="{autoFocus}" </tpl>',
            '></textarea>',
            '<tpl if="useMask"><div></div></tpl>',
        '</div></tpl>'
    ]
});

(more…)

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

Tuesday, November 8th, 2011

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);
      }
    }
  }
});

Remove Sencha Gradient on Form Labels for Selectfields

Tuesday, November 8th, 2011

The gradient really shouldn’t be there. It doesn’t show up on the desktop. It does on the phone. Here’s a simple fix to add to your CSS:

.x-field-select:before {
    background: inherit !important;
}

If that doesn’t get rid of it you may have to set it to a specific color such as this:

.x-field-select:before {
    background: #F0EEDF !important;
}

Sencha Touch Numberfield is too Short

Tuesday, November 8th, 2011

In Sencha 1.1.0 and 1.1.1 the numberfield is pretty useful, but on the iPhone it shows up a bit too short. A simple fix to this:

.x-field.x-field-number {
    background-color: white!important;
}

Sencha Touch: Scroll To Top After Leaving a Panel

Monday, October 17th, 2011

This doesn’t seem to work on Ext.List, but you can add a List with “scroll:false” as a child of an Ext.Panel with “scroll:true” and add this listener to the Ext.Panel.  Now the next time the user goes back to that panel, they are at the top of the list, form, content, etc.

listeners          : {
  hide : function() {
    this.scroller.scrollTo({ x: 0, y: 0 })
  }
}

©2005-2012 Blog – Epiphany Digital is proudly powered by Badgers and Web Design is by Epiphany Digital
Entries (RSS) and Comments (RSS). 36 queries. 0.450 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.