Sat, Jun 22, 2013

Below my short journey in taking a look to NVD3 and Raphael as alternative charting libraries for Sencha Touch(ST). ST has a powerful and nice charting library which is included as a part of Touch (available as GPLv3 or as a part of Sencha Complete and Complete: Team). Yet I’ve wanted to try other charts libs with a more flexible license which will allow me to integrate them easily in a ST app and develop a simple line chart ST component.

Mon, Apr 29, 2013

As you can see on Sencha site,  Sencha Touch (ST) was developed to take advantage of hardware acceleration. In case you don’t know what hardware acceleration means and if you are starting to work on your first ST application then you should be informed about it as it might affect your app performance and responsiveness. Particularly when using PhoneGap 2.6(2.x) to deploy natively for Android 4.x, because Android default browser still has performance problems with 3D CSS transforms.

Tue, Apr 2, 2013
In this post will continue Aymap views exploration and share with you some extension tips and tricks that I’ve used and I think might be useful for you too in writing your ExtJS4 web application. AyToolbox If to look in previous part at AyToolbox you can see that contains 5 items of toolboxpanel xtype. This widget does the job for 5 views and has the following define: Ext.define('AyMap.view.toolbox.Panel',{ extend : 'Ext.grid.Panel', // More configs initComponent: function(){ var me = this, store; Ext.apply(me,{ // More configs columns: [{ width: 100, sortable: true, dataIndex: 'name' }], listeners: { afterrender: function(view){ view.getPlugin('gridviewdragdrop').dragZone.getDragText = function() { return this.dragData.records[0].get('name') } Ext.create('Ext.tip.ToolTip', { target: view.el, delegate: view.itemSelector, trackMouse: true, renderTo: Ext.getBody(), listeners: { beforeshow: function(tip) { tip.update(this.getRecord(tip.triggerElement).get('name')); }, scope: view } }); } } } }); me.callParent(arguments); store = me.getStore(); store.guaranteeRange(0, store.pageSize-1); } }); Note the best approach on how to add tooltips to grid columns trough delegation, which is much performant than using renderers: renderers: function (value, metadata){ metadata.tdAttr = 'data-qtip=" ' + value + '"'; return value; } While working on this class I’ve learned that if to use ExtJS Models at maximum, you can simplify views configurations.

Sat, Mar 9, 2013

Just gave the answer to this question on extjs4 forum and decided to post it here too by adding a code example. The answer is very simple: just load the record with the new data from the server by using the static method,config) then in the successful callback update that record, do a commit if you need, then refresh record’s node. Below the explanation in code form:

Sun, Mar 3, 2013

Surfing Sencha forums day by day I’ve come to the conclusion that today many Sencha Touch 2 users still don’t know about the nice and well written SQL proxy ( Instead of it they use other extensions written by ST users which are easy to find on ST forum. But the default ST proxy also can by used for WebSQL or SQLite with Phonegap plugin and comparing with those extensions has a well written code, is more faster and is part of ST2.

Saying this I’ve decided to write a few words about how tot use it, only a few as here there’s nothing more to write. Mainly because actually the SQL proxy is used like the other ST proxies except that it needs an override.

Sat, Feb 16, 2013

Having more than two years of experience in developing web applications based on Sencha Products, I thought I would start this blog with the first article about an ExtJS4 based application. As on the internet you can find a lot of simple applications and thousands of examples and solutions on how to do ordinary things or how to achieve a behavior, articles about real life applications are a few.

So these posts will cover how to build a real life application, from views to application structure and architecture, ending with application’s specifics. The app itself is called Aymap and takes care of drawing and customizing surveillance maps for a surveillance system called Aylook, which you can find more about on