Archive for the ‘Mobile Web’ Category

Sencha Touch v1 Open Links in New Windows

Tuesday, March 27th, 2012

Just add this snippet to your code if you want to force all links in your panels to open in a new window.   I’m targeting links specifically, but you could use it on just about anything.

Ext.override(Ext.Panel, {
  listeners : {
    click: {
      element: 'el',
      fn: function (e) {
        if (e.target.tagName === 'A') {
          e.stopEvent();
          window.open(e.target.href);
        }
      }
    }
  }
});

Fix for Sencha Touch Rounded Corners Bug in v1.0-1.1.1

Friday, December 30th, 2011

Some rounded corners in Sencha Touch forms with fieldsets look like garbage by default.  Here’s a CSS only fix:

.x-form-fieldset .x-field:first-child.x-label-align-top .x-field-text,
.x-form-fieldset .x-field:first-child.x-label-align-top .x-input-text,
.x-form-fieldset .x-field:first-child.x-label-align-top .x-input,
.x-form-fieldset .x-field:first-child.x-label-align-top .x-input-number,
.x-form-fieldset .x-field:first-child.x-label-align-top .x-spinner-body,
.x-form-fieldset .x-field:first-child.x-label-align-top .x-input-radio,
.x-form-fieldset .x-field:first-child.x-label-align-top .x-input-checkbox,
.x-form-fieldset .x-field:first-child.x-label-align-top .x-input-email,
.x-form-fieldset .x-field:first-child.x-label-align-top .x-input-url,
.x-form-fieldset .x-field:first-child.x-label-align-top .x-input-password,
.x-form-fieldset .x-field:first-child.x-label-align-top .x-input-slider {
  -webkit-border-top-left-radius: 0;
  border-top-left-radius: 0;
  -webkit-border-top-right-radius: 0;
  border-top-right-radius: 0;
}

 

Thank you: http://www.sencha.com/forum/showthread.php?152265-CSS-bugs-with-fieldsets-and-labelAlign-top

The iPhone, Cookies, and JSONP Logins

Tuesday, November 29th, 2011

I’ve been working a lot on mobile apps lately and one issue I recently came across was that my logins that are handled over JSONP requests work just fine on Chrome desktop and the Android browser, but not on Safari (mobile or desktop) unless I changed cookie settings on the device to “Accept All”.  That’s an awful answer since I don’t want to just force users to change their settings just to be able to use my app.

I’m now using the default setting, which is “Accept Visited” and my workaround was to include an iFrame with the source set to my server domain that is being logged into remotely and style is set to “display:none” since I don’t actually want to show the iFrame.  I consider this quite the hack, so if someone else has a better idea I’m all ears.

Add alt tag to Sencha image buttons for 508 Compliance

Monday, November 28th, 2011

Here’s an override for Sencha v1.1.1 to allow for a label field to be added to a button that is applied as an alt tag to an image button.  It’s pretty cool.

Ext.override(Ext.Button, {
  label   : '',
  setIconClass: function(cls) {
      var me = this;

      if (me.rendered) {
          if (!me.iconEl && cls) {
              me.iconEl = me.el.createChild({
                  tag: 'img',
                  src: Ext.BLANK_IMAGE_URL,
                  cls: cls
              });
              me.iconEl.set({
                'alt'   : this.label
              });
              me.setIconAlign(me.iconAlign);
          }
          else if (me.iconEl && cls != me.iconCls) {
              if (cls) {
                  if (me.iconCls) {
                      me.iconEl.removeCls(me.iconCls);
                  }
                  me.iconEl.addCls(cls);
                  me.setIconAlign(me.iconAlign);
              }
              else {
                  me.setIconAlign(false);
                  me.iconEl.remove();
                  me.iconEl = null;
              }
          }
      }
      me.iconCls = cls;
      return me;
  },
  setIcon : function(icon) {
    var me = this;
    if (me.rendered) {
      if (!me.iconEl && icon) {
        me.iconEl = me.el.createChild({
          tag: 'img',
          src: Ext.BLANK_IMAGE_URL,
          style: 'background-image: ' + (icon ? 'url(' + icon + ')' : '')
        });
        me.iconEl.set({
          'alt'   : this.label
        });
        me.setIconAlign(me.iconAlign);
      } else if (me.iconEl && icon != me.icon) {
        if (icon) {
          me.iconEl.setStyle('background-image', icon ? 'url(' + icon + ')' : '');
          me.setIconAlign(me.iconAlign);
        }
        else {
          me.setIconAlign(false);
          me.iconEl.remove();
          me.iconEl = null;
        }
      }
    }
    me.icon = icon;
    return me;
  }
});

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…)


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