What Is ExtJS ExtJS 4+ Extensions Examples Tutorials

12Jan/140

Responsive Design in ExtJS 4

I think this has been a hot topic lately: making web sites that adjust based on resolution of the device the user is using to browse. Now I'm not going to make this post about Sencha Touch. Even though in my "perfect responsive strategy" I would be using both ExtJS and Sencha Touch (and I can write more about that if you care to comment about your interest), this post is going to be only about ExtJS.

In this example we'll be achieving the very common "navigation collapses to menu" effect, demonstrated here in my Android 4.x LG Intuition, by rotating the device from horizontal to vertical:

1

2

3

VN:F [1.9.22_1171]
Rating: 8.1/10 (18 votes cast)
4Dec/130

ExtJS vs. Touch Config System

In this example I will demonstrate the difference between how ExtJS 4 and Sencha Touch 2 config systems treat non-primitives (i.e. arrays or objects). This aspect of the frameworks is very important to distinguish as it will save you from some very painful debugging sessions.

Long story short, Touch will actually clone any objects from the config for every instance of your class, whereas ExtJS will slap them on the prototype (probably not what you want).

Now for a practical example.

VN:F [1.9.22_1171]
Rating: 10.0/10 (7 votes cast)
22Aug/130

Touch 2.2.x is broken in Chrome 29

Chrome 29 came out just two days ago and it appears Sencha Touch 2.2.x projects don't display properly. I'm not sure if it affects mobile Chrome browsers (I assume it would, once they update, but they do lag behind the desktop browser in that department).

A fix posted by Steve Drucker on his blog: http://druckit.wordpress.com/2013/08/22/sencha-touch-2-x-and-google-chrome-29/

Just change the st-box mixin inside of:

/touch2/resources/themes/stylesheets/sencha-touch/base/mixins/_Class.scss

...and recompile the SASS. The new code:

@mixin st-box($important: no) {
    @if $important == important {
        display: flex !important;
        display: -webkit-box !important;
        display: -ms-flexbox !important;
    } @else {
        display: flex;
        display: -webkit-box;
        display: -ms-flexbox;
    }
}
VN:F [1.9.22_1171]
Rating: 10.0/10 (2 votes cast)
Tagged as: , , , , No Comments
21Aug/131

Sencha Inspector for Chrome

I wanted to share a really cool tool that my colleague released just today. It's called App Inspector for Sencha and it's a Chrome extension that fans of FireFox' Illuminations for Developers will recognize instantly.

It's the first release, so functionality is limited, but it does have some very useful features already. Particularly, being able to pin-point an ExtJS component when browsing DOM:

Dom Viewer

Also, it lets you browse the ExtJS component tree in general:

Component Tree

As far as I could tell, it doesn't work for Sencha Touch yet, but I hope that will be added soon.

VN:F [1.9.22_1171]
Rating: 9.7/10 (3 votes cast)
Tagged as: , , 1 Comment
31Jul/130

fiddle.sencha.com for ExtJS & Touch

Sencha folks have been working on an awesome new tool. It's called fiddle.sencha.com:

Fiddle

 

If you're familiar with jsfiddle.net, it's essentially the same concept, but targeted at ExtJS and Sencha Touch, with some tasty features thrown in, i.e. performance analysis:

fiddle2

 

Even though it's in beta, I've been using it for sometime now without much issue. Fiddle away!

VN:F [1.9.22_1171]
Rating: 9.8/10 (5 votes cast)
Tagged as: , No Comments
Page 5 of 14« First...34567...10...Last »