» Fig Leaf Software Home

We've Got You Covered.

Wednesday, March 5, 2014

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.
actioncolumnitemspacing
Add this to your CSS:
1
2
3
.x-grid-cell-inner-action-col img {
  margin-right: 5px;
 }

Adding Tooltips to Combo Box Selections

toolkit1
Override the getInnerTpl() method as illustrated below. Don’t forget to escape embedded quotes in the output!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
  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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  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!
Written by: Steve Drucker

No comments:

Post a Comment

About Us

Fig Leaf Software is an award-winning team of imaginative designers, innovative developers, experienced instructors, and insightful strategists.

For over 20 years, we’ve helped a diverse range of clients...

Read More

Contact Us

202-797-7711

Fig Leaf Software

1400 16th Street NW
Suite 450
Washington, DC 20036

info@figleaf.com