Adding a custom attribute to an existing sencha touch component (and why it might cause error after production build)

Lately we’ve been using Sencha Touch for an interesting project. We found a problem which something was working correctly while on develop mode but stopped working after the app was built for production.

Turned out the problem was becuase we added a custom attribute to an existing sencha component which we wanted to use.

Ext.define('SomeView', {
	extend: 'Panel',
	...,
	config: {
		...,
		items: [{
			id: 'myCustomContainer',
			xtype: 'Container',
			customAttribute: 'customValue'
		}]
	}
});

And afterwards tried to get the custom attribute from the specific Custom Container (let’s say stored in variable myCustomContainer) as:

myCustomContainer.customAttribute

This works correctly if the app is tested without building it for production but gives an JS error when in the built for production app it tries to access the custom attribute.

The correct way to do so is simply to define a custom container that inherits the built-in one and put the custom attribute in it’s config with it’s default value.

Ext.define('MyCustomContainer', {
	extend: 'Ext.Container',
	xtype: 'myCustomContainer',
	config: {
		myCustomAttribute: null
	}
});

Now you can use the xtype ‘myCustomContainer’ instead of ‘Container’ in the view and Sencha automatically creates a getter and a setter for it.

To use (get/set) the custom attribute you can do something like this:

// if we want to set it
myCustomContainer.getMyCustomAttribute();
// or if we want to set it:
myCustomContainer.setMyCustomAttribute('NewValue');

And now after the production build the app works again

The Break-Fix Approach for Responsive Website Design

Responsive Web Design is quite hot topic over the last few years. This post will give you a basic overview of the totally made-up break-fix approach.

The concepts of the approach are simple – having a non-responsive website you iteratively shrink the browser width, monitor when the site breaks (a horizontal scroll appears) and “fix” the website’s look and behaviour for the size. Check the image:

responsive-web-design-break-fix-approach
Responsive Webdesign with Break-Fix Approach

 

  •  Requirements (knowledge)

Requirements (Or what will make it easy for you)

  • Google Chrome Dev Tools (or FireBug) and basic knowledge how to use it (hind: use the magnifier tool)
  • Hacky CSS Knowledge (change widths, understand positioning, floating and similar stuff)

Benefits Of the ApPrOach

  • Good solution for existing non-responsive websites, also a quick one
  • Simple and not that much thinkin involved – just see what breaks the site and fix it
  • Agile – you do it step by step

The Steps

1. Shrink the browser width
  Simple
2. Find where the site breaks
  *breaks – a horizontal line appears or anything else that doesn’t look nice
3. Find what makes it break
  Look for:
  • Fixed width
  • Paddings
  • Margins

4. Fix it:

  • Add a breakpoint (using a media query) for the current width of the screen (hint: check the width of the html body element to know what is the current width)
  • Change the width to percents or something relevant
  • Set a max-width: 100% (or something relevant)
  • Anything that makes sense for your case.

Something like this:

@media (max-width: 700px) {
    .breaking-elements {
        width: 100%;
        padding: 0;
    }
}
5. Continue to step1 until you’ve reached the smallest device you want to support.
Hint: After you’re done don’t forget to add
<meta name="viewport" content="width=device-width"/>

Advanced hint:

If it makes sense merge close breakpoints so you don’t write too much of them

I did a presentation about this approach on WordCamp Sofia 2012. You can find the slides from it in another blog post.

Good luck with getting responsive!

JS Date object and iOS Safari

Safari on iOS is probably one of the best mobile browsers. Still there is one thing that I often got wrong and wonder why my webapp doesn’t work.

Javascript Date Object in iOS Safari

In every normal browser you could just create a Date object from string as

var myDate = new Date('2013-01-21T13:46:20');

But on iOS this simply gives you a JS error.

To fix it you should use the good ol’ split() and do something like this

//First we split the date string
var iosDateArr = '2013-01-21T13:46:20'.split('[- :T]');
//And use the constructor with 6 args
cDate = new Date(arr[0], arr[1]-1, arr[2], arr[3], arr[4], arr[5]);

Note that the Month in the array is reduced by one. This is because the Months are counted from 0 for January to 11 for December.