Miscellaneous Ext JS 4 Tips and Tricks, Part I

Adding Spacing Between Action Column Icons

Our usability folks have been complaining that the default spacing (0px) between action item buttons could result in a user mistakenly clicking the wrong button.


Add this to your CSS:

.x-grid-cell-inner-action-col img {
  margin-right: 5px;

Adding Tooltips to Combo Box Selections


Override the getInnerTpl() method as illustrated below. Don’t forget to escape embedded quotes in the output!

  xtype: 'combobox',
  listConfig: {
    getInnerTpl: function() {
      return "<div data-qtip='{[values.description.replace(\"'\",\"\'\")]}'>{name}</div>"; 
  itemId: 'toolkitfilter',
  fieldLabel: 'Toolkits',
  name: 'toolkit',
  displayField: 'name',
  forceSelection: true,
  multiSelect: true,
  queryMode: 'local',
  store: 'Toolkits',
  valueField: 'id'

Adding Tooltips to Form Fields

Because users need a lot of help…

Add tooltips to form fields by attaching a tooltip in the afterrender event as illustrated below:

  xtype: 'textfield',
  fieldLabel: 'Enter your name',
  allowBlank: false,
  anchor: '100%',
  listeners: {
   afterrender: function(component) {
     Ext.create('Ext.tip.ToolTip', {
                   target: component.getEl(),
                   html: "Enter your lastname, firstname please. This is a required field."

You can try out this example at https://fiddle.sencha.com/#fiddle/3vs and check out the full application at http://www.naccho.org/toolbox

Happy coding!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s