Javascript



Sun, Feb 1, 2015

Use whenever you can compile to boost your Angular directives and get rid of whatchers. For instance we have a directive which acts as a data row in a ngRepeat, like a grid row. Only besides the trivial columns this row has some action buttons.


Sun, Mar 2, 2014

In case if your controller became too large and the inheritance is not a solution, the Mixin pattern can solve this problem very easy by splitting the logic in mixins each serving a functionality or a feature. Within AngularJS I found a easy to do it by using the $controller service.



Sat, Sep 7, 2013
Though ExtJS charts are very rich in features sometimes our clients want more. Very often they want some specific features which in the end leads to adding new custom sprites to the charts. And ExtJS is ready to help us with the needed tools to accomplish those features and make the client happy. In this post I’m going to add some light on how to add custom sprites in ExtJS charts based on a real world example.

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.


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.

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.