Blog - Epiphany Digital

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

eDigital Admin — Fri, 30 Dec 2011 14:49:21 +0000

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

Count Number of Lines of Code in a Project

eDigital Admin — Tue, 20 Dec 2011 19:44:11 +0000

find ./ -name \*.js | xargs wc

[find] [in this current directory] [files named] ["wildcard".js] [and] [just print counts]

The first column is the number of lines for the listed file, with the total count at the bottom. As you can tell, I’m working on a JavaScript project.

BAM!

eDigital Admin — Thu, 15 Dec 2011 18:52:35 +0000

My blog has been too serious and too productive lately. Here’s some entertainment. Enjoy!

Literal Version | Total Eclipse of the Heart from Umberto Cigognini on Vimeo.

Modify Your Drupal Registration Form in a Zen Sub Theme

eDigital Admin — Thu, 15 Dec 2011 18:14:29 +0000

Add the following to your template.php file, and you can add your own user-register.tpl.php and user-profile-edit.tpl.php files to your theme. For my purposes, I wanted to remove the form so I just added a paragraph to the tpl file and left it at that.

YOURTHEMENAME_theme(&existing, $type, $theme, $path){
  return array(
    '$hooks' => zen_theme($existing, $type, $theme, $path),
      'user_register' => array(
      'template' => 'user-register',
      'arguments' => array('form' => NULL),
    ),
    'user_profile_form' => array(
      'template' => 'user-profile-edit',
      'arguments' => array('form' => NULL),
    ),
  );
}

I took some of the info from comments here and Drupal documentation here. Thanks!

Using Synergy to When One Computer is on a VPN

eDigital Admin — Wed, 07 Dec 2011 17:09:27 +0000

Synergy is a great free application that runs across multiple platforms (Windows/iOS/Linux) to let you control multiple computers with only one mouse and keyboard. Sometimes it doesn’t work too well if one of your computers has to have a constant connection to a corporate VPN and the other computer does not.

Change your local IP scheme to something different than the VPN scheme. For example, if your local scheme is 192.168.1.x and you’re corporate VPN is 192.168.1.x, you won’t be able to connect. Change your local router IP configuration to be something different like 192.168.2.x. This worked for me.

The iPhone, Cookies, and JSONP Logins

eDigital Admin — Tue, 29 Nov 2011 16:53:22 +0000

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

eDigital Admin — Mon, 28 Nov 2011 20:32:37 +0000

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

eDigital Admin — Tue, 15 Nov 2011 17:38:53 +0000

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: [
        '{label}</span></label></tpl>',
        '',
            '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>'
    ]
});</pre>
<p><span id="more-171"></span></p>
<pre class="prettyprint">
Ext.override(Ext.form.Field,{
  renderTpl: [
    '<tpl if="label">',
        '<label for="{inputId}"><span>{label}</span></label>',
    '</tpl>',
    '<tpl if="fieldEl">',
        '<div><input id="{inputId}" type="{inputType}" name="{name}"',
            '<tpl if="tabIndex">tabIndex="{tabIndex}" </tpl>',
            '<tpl if="placeHolder">placeholder="{placeHolder}" </tpl>',
            '<tpl if="style">style="{style}" </tpl>',
            '<tpl if="maxlength">maxlength="{maxlength}" </tpl>',
            '<tpl if="autoComplete">autocomplete="{autoComplete}" </tpl>',
            '<tpl if="autoCapitalize">autocapitalize="{autoCapitalize}" </tpl>',
            '<tpl if="autoCorrect">autocorrect="{autoCorrect}" </tpl> />',
        '<tpl if="useMask"><div></div></tpl>',
        '</div>',
        '<tpl if="useClearIcon"><div><div>×</div></div></tpl>',
    '</tpl>'
  ]
});

Ext.override(Ext.form.Slider, {
  renderTpl: [
    '<tpl if="label">',
        '<label for="{inputId}"><span>{label}</span></label>',
    '</tpl>',
    '<tpl if="fieldEl">',
        '<div id="{inputId}" name="{name}"',
        '<tpl if="tabIndex">tabIndex="{tabIndex}"</tpl>',
        '<tpl if="style">style="{style}" </tpl>',
    '/></tpl>'
  ]
});

Ext.override(Ext.form.Number, {
    renderTpl: [
        '<tpl if="label"><label for="{inputId}"><span>{label}</span></label></tpl>',
        '<tpl if="fieldEl"><div>',
            '<input id="{inputId}" type="{inputType}" name="{name}"',
                '<tpl if="tabIndex">tabIndex="{tabIndex}" </tpl>',
                '<tpl if="placeHolder">placeholder="{placeHolder}" </tpl>',
                '<tpl if="style">style="{style}" </tpl>',
                '<tpl if="minValue != undefined">min="{minValue}" </tpl>',
                '<tpl if="maxValue != undefined">max="{maxValue}" </tpl>',
                '<tpl if="stepValue != undefined">step="{stepValue}" </tpl>',
                '<tpl if="autoComplete">autocomplete="{autoComplete}" </tpl>',
                '<tpl if="autoCapitalize">autocapitalize="{autoCapitalize}" </tpl>',
                '<tpl if="autoFocus">autofocus="{autoFocus}" </tpl>',
            '/>',
            '<tpl if="useMask"><div></div></tpl>',
            '</div></tpl>',
        '<tpl if="useClearIcon"><div><div>×</div><div></tpl>'
    ]
});

Ext.override(Ext.form.Spinner, {
    renderTpl: [
        '<tpl if="label"><label for="{inputId}"><span>{label}</span></label></tpl>',
        '<tpl if="fieldEl">',
            '<div>',
                '<div><span>-</span></div>',
                '<div>',
                    '<input 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="minValue != undefined">min="{minValue}" </tpl>',
                        '<tpl if="maxValue != undefined">max="{maxValue}" </tpl>',
                        '<tpl if="stepValue != undefined">step="{stepValue}" </tpl>',
                        '<tpl if="autoComplete">autocomplete="{autoComplete}" </tpl>',
                        '<tpl if="autoFocus">autofocus="{autoFocus}" </tpl>',
                    '/>',
                    '<tpl if="useMask"><div></div></tpl>',
                '</div>',
                '<div><span>+</span></div>',
            '</div>',
        '</tpl>'
    ]
});

Ext.override(Ext.form.Checkbox, {
  renderTpl : [
    '<tpl if="label"><label for="{inputId}"><span>{label}</span></label></tpl>',
    '<tpl if="fieldEl"><input id="{inputId}" type="{inputType}" name="{name}" tabIndex="-1" ',
        '<tpl if="checked"> checked </tpl>',
        '<tpl if="style">style="{style}" </tpl> value="{inputValue}" />',
  '</tpl>'
  ]
});</pre>

</article>
<article>
<h1>Add a “Add to Homescreen” Modal to your Sencha Touch v1 App</h1>
<p>eDigital Admin — Tue, 08 Nov 2011 23:50:25 +0000</p>
<p>So you’re in Sencha 1.1.x and need a custom overlay panel like an <code>Ext.MessageBox</code> 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.</p>
<pre class="prettyprint">
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);
      }
    }
  }
});
</pre>

</article>
<article>
<h1>Remove Sencha Gradient on Form Labels for Selectfields</h1>
<p>eDigital Admin — Tue, 08 Nov 2011 19:11:03 +0000</p>
<p>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:</p>
<pre class="prettyprint">
.x-field-select:before {
    background: inherit !important;
}
</pre>
<p>If that doesn’t get rid of it you may have to set it to a specific color such as this:</p>
<pre class="prettyprint">
.x-field-select:before {
    background: #F0EEDF !important;
}
</pre>

</article>
</main></body></html>