Posts tagged GridPanel

ExtJS 4: A Textfield, a Grid, and Some Keystroke Interception

Aug 2nd

Posted by existdissolve in ExtJS

1 comment

Recently, I’ve been working pretty furiously on the rewrite of Gloss, my first serious ExtJS application. I wrote Gloss in ExtJS 3, but wanted to give it a much-needed overhaul now that ExtJS 4 is out.

One of the more useful features of Gloss (well, I think it is at least) is the search functionality. In my rework, I’ve been trying to solidify some of the keyboard navigation to allow for a more fluid experience.

Ideally, I want the flow to go something like this:

  1. Enter a search, with as-you-type results
  2. When the full list of results is returned, be able to TAB from search text field to first row in the list of results
  3. Be able to TAB or DOWN ARROW to the next result in the list
  4. When focused on the desired result, be able to strike ENTER or SPACE to load the record

I’ll start with the last two: navigating inside the grid panel itself.

Grid Navigation

With ExtJS 4, this is stupid easy. In my Search controller, I have some listeners set up. They’re keyed in on the “itemkeydown” event of the grid.

Ext.define("Gloss.controller.Search", {
   extend: "Ext.app.Controller",
   init: function() {
      this.control({
         "searchgrid *": {
            itemkeydown: function(grid,rec,item,idx,e,opts) {
               if(e.keyCode==13 || e.keyCode==32) {
                  ... do some stuff More >
, ,

Adding QTips to GridPanel Rows in ExtJS 4.0

Jul 4th

Posted by existdissolve in ExtJS

3 comments

Need to add a custom tooltip (quick tip) to rows in a GridPanel in ExtJS 4.0? Super easy. In your column definitions, simply add a rendered, passing a custom function.

this.columns = [ { text: “Bookmark”, dataIndex: “title”, flex: 1, renderer: function(value,metaData,record,colIndex,store,view) { metaData.tdAttr = ‘data-qtip=”‘ + value + ‘”‘; return value; } }…

A couple notes:

  1. Make note of the “metaData” object. I think in earlier versions, the “tdAttr” was just “attr”…so if you’re upgrading, you might have to make a slight change
  2. Notice the namespace for the qtip. In earlier versions of ExtJS, it was “ext:qtip”, but has been changed to “dadta-qtip”…no biggie, but a headache if you didn’t read the docs 🙂

That’s it! With such a slight modification, you get a nice tooltip generated for each row in your grid. Enjoy.

Share this:
, ,