Blog - Epiphany Digital » Web Development

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.

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!

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>
<div class="addthis_toolbox addthis_default_style addthis_32x32_style" addthis:url='http://www.epiphanydigital.biz/2011/11/15/use-a-label-tag-instead-of-a-div-on-sencha-forms/' addthis:title='Use a label tag instead of a div on Sencha Forms ' ><a class="addthis_button_preferred_1"></a><a class="addthis_button_preferred_2"></a><a class="addthis_button_preferred_3"></a><a class="addthis_button_preferred_4"></a><a class="addthis_button_compact"></a></div>
</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>
<div class="addthis_toolbox addthis_default_style addthis_32x32_style" addthis:url='http://www.epiphanydigital.biz/2011/11/08/add-a-add-to-homescreen-modal-to-your-sencha-touch-v1-app/' addthis:title='Add a “Add to Homescreen” Modal to your Sencha Touch v1 App ' ><a class="addthis_button_preferred_1"></a><a class="addthis_button_preferred_2"></a><a class="addthis_button_preferred_3"></a><a class="addthis_button_preferred_4"></a><a class="addthis_button_compact"></a></div>
</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>
<div class="addthis_toolbox addthis_default_style addthis_32x32_style" addthis:url='http://www.epiphanydigital.biz/2011/11/08/remove-sencha-gradient-on-form-labels-for-selectfields/' addthis:title='Remove Sencha Gradient on Form Labels for Selectfields ' ><a class="addthis_button_preferred_1"></a><a class="addthis_button_preferred_2"></a><a class="addthis_button_preferred_3"></a><a class="addthis_button_preferred_4"></a><a class="addthis_button_compact"></a></div>
</article>
<article>
<h1>Sencha Touch Numberfield is too Short</h1>
<p>eDigital Admin — Tue, 08 Nov 2011 19:07:58 +0000</p>
<p>In Sencha 1.1.0 and 1.1.1 the <code>numberfield</code> is pretty useful, but on the iPhone it shows up a bit too short.  A simple fix to this:</p>
<pre class="prettyprint">
.x-field.x-field-number {
    background-color: white!important;
}
</pre>
<div class="addthis_toolbox addthis_default_style addthis_32x32_style" addthis:url='http://www.epiphanydigital.biz/2011/11/08/sencha-touch-numberfield-is-too-short/' addthis:title='Sencha Touch Numberfield is too Short ' ><a class="addthis_button_preferred_1"></a><a class="addthis_button_preferred_2"></a><a class="addthis_button_preferred_3"></a><a class="addthis_button_preferred_4"></a><a class="addthis_button_compact"></a></div>
</article>
<article>
<h1>Sencha Touch: Scroll To Top After Leaving a Panel</h1>
<p>eDigital Admin — Mon, 17 Oct 2011 20:13:39 +0000</p>
<p>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.</p>
<pre class="prettyprint">listeners          : {
  hide : function() {
    this.scroller.scrollTo({ x: 0, y: 0 })
  }
}</pre>
<div class="addthis_toolbox addthis_default_style addthis_32x32_style" addthis:url='http://www.epiphanydigital.biz/2011/10/17/sencha-touch-scroll-to-top-after-leaving-a-panel/' addthis:title='Sencha Touch: Scroll To Top After Leaving a Panel ' ><a class="addthis_button_preferred_1"></a><a class="addthis_button_preferred_2"></a><a class="addthis_button_preferred_3"></a><a class="addthis_button_preferred_4"></a><a class="addthis_button_compact"></a></div>
</article>
</main></body></html>