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.