JS Architect's

Today we’re going to dig a little deeper into the class system to see how it actually works. To briefly recap, the new class system enables us to define classes like this: Ext.define( 'Ext.Window' , {      extend: 'Ext.Panel' ,      requires: 'Ext.Tool' ,      mixins: {          draggable: 'Ext.util.Draggable'      },             config: {          title: "Window Title"      } }); Here we’ve set up a slightly simplified version of the Ext.Window class. We’ve set Window up to be a subclass of Panel, declared that it requires the Ext.Tool class and that it mixes in functionality from the Ext.util.Draggable class. There are a few new things here so we’ll attack them one at a time. The ‘extend’ declaration does what you’d expect – we’re just saying that Window should be a subclass of Panel. The ‘requires’ declaration means that the named classes (just Ext.Tool in this case) have to be p

Browser Support Plans (now through 2015) Table 1: For Ext JS applications already developed and in use.   Support into 2015 Drop Support Next Year (2014) Drop Support This Year (2013) No Support Today LEGACY BROWSERS         IE6 9% 7% 8% 76% IE7 17% 13% 15% 55% IE8 39% 21% 16% 24% Safari 4 7% 8% 12% 73% Firefox 3 & 4 9% 10% 14% 68% Chrome 1-5 9% 9% 11% 71% MODERN BROWSERS         IE9 67% 13% 7% 14% IE10 83% 4% 3% 9% Safari 5 21% 13% 10% 57% Safari 6 60% 5% 3% 32% Firefox 5-16 30% 20% 14% 35% Firefox Latest (17) 84% 4% 3% 9% Chrome 6-26 34% 19% 12% 36% Chrome Latest (27) 85% 3% 2% 10% Opera 10 14% 11% 9% 66% Opera 11+ 42% 3% 2% 54% Table 2: For Ext JS applications currently being developed.   Support Through 2014+ Drop Support in 2014 Drop Support in 2013 No Support Today LEGACY BROWSERS         IE6 8% 6% 8% 78% IE7 17% 13% 15% 55% IE8 41% 20% 17% 22% Safari 4 8% 10% 9% 73% Firefox 3 & 4 10% 7% 14% 68% Chrome 1–5 8% 9% 9% 73% MODERN BROWSERS

Efficiency of ExtJS data stores and large data sets I'm curious what experiences other developers have seen when loading large data sets into ExtJS stores. I think there are a few basic ways to look at what a large data set is: Few records with many properties. Many records with few properties. Many records with many properties. For large datasets there are too handle it, infinite grid and buffered rendering grid. The main difference is the infinite grid sends requests to load data on the fly where buffered rendering grid retrieves all the data in one go and the grid will only display a portion of that dataset based on the size of the grid.  http://docs.sencha.com/extjs/4.2.1/#!/example/grid/infinite-scroll.html  http://docs.sencha.com/extjs/4.2.1/#!/example/grid/buffer-grid.html  If the slowdown is the store loading all that data then I would suggest going with an infinite grid. If the slowdown is the grid rendering all that data then I would go with the buffered grid. L

EXTJS performance Tips: http://edspencer.net/2013/07/19/sencha-con-2013-ext-js-performance-tips/ http://www.sencha.com/blog/top-10-ext-js-development-practices-to-avoid/ http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/page-analyzer/page-analyzer.html http://www.sencha.com/blog/optimizing-ext-js-4-1-based-applications/ http://www.sencha.com/forum/showthread.php?153565 Sencha CDN version: If you want to use the CDN-hosted files over HTTPS, replace http://cdn.sencha.io / with https://extjs.cachefly.net/ http://senchaexamples.com/sencha-cdn/ Grid performance solutions: http://vimeo.com/59611158 http://www.sencha.com/blog/optimizing-ext-js-4-1-based-applications/ http://www.sencha.com/blog/whats-new-in-ext-js-4-1/ Live Grid - service calls url: 'http://www.sencha.com/forum/remote_topics/index.php', url: 'http://www.sencha.com/forum/topics-browse-remote.php', EXTJS Releases: http://cdn.sencha.com/ext/gpl/4.2.0/release-notes.html http://www.sen