Ext Js

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.

Mon, Sep 23, 2013
Though aren’t widely used SVG Patterns are very powerful and light. Being vector graphics, a pattern adjusts very well to any screen resolution making the background crisp and nice. The only drawback would be is the lack of support on IE8 and lower and yes the lack of support in ExtJS 4.2.1 (and lower) too. Hopefully next versions of ExtJS will have within its SVG engine the needed piece which would allow us to add and use patterns in our ExtJS web apps.

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.

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 Ext.data.Model.load(id,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:

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 www.aylook.com