the singularity of being and nothingness
Adding QTips to GridPanel Rows in ExtJS 4.0
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:
- 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
- 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.
| Print article | This entry was posted by existdissolve on July 4, 2011 at 3:46 am, and is filed under ExtJS. Follow any responses to this post through RSS 2.0. You can leave a response or trackback from your own site. |
No trackbacks yet.
ExtJS 4: Custom Editor for Property Grid
about 12 years ago - 4 comments
Yesterday, I was helping someone figure out how to add a custom, complex editor for use in a ExtJS Property Grid. The Anatomy of a Property Grid For some context, a Property Grid is like an editable grid, but instead of editing rows of data, you use a grid like interface to edit the properties…
Virtual Directory-Driven ExtJS 4 Development – The Finale
about 12 years ago - No comments
If you’ve been following along the last few posts, you’ve seen how it’s relatively simple to set up your local development environment to leverage global library assets to create ExtJS 4 applications. What you’ve probably also noticed is that there are a number of configurations (some one-time, others per-application) that need to be implemented before…
Virtual Directory-Driven ExtJS 4 Development
about 12 years ago - No comments
Over the last several months, I’ve been incredibly lucky to be able to work with ExtJS 4 on a daily basis. And I’m not just talking about dabbling here and there; rather, I mean developing a full-on legit application. It’s been awesome. As I’ve been building this application, I’ve developed a TON of custom, reusable…
ExtJS 4: Filtering on Multiple Fields
about 13 years ago - 3 comments
Filtering ExtJS data stores is stupid-simple. When filtering, you have 2 main options: Filtering on a property (e.g., “field”) Filtering with a custom function So let’s take a quick look at each one of these. First, here’s our Model and Store: Ext.define(‘Person’, { extend: ‘Ext.data.Model’, idProperty: ‘id’, fields: [ {‘firstname’, type:’string’}, {‘middlename’, type: ‘string’}, {‘lastname’,…
ExtJS 4 Theming: Custom UIs
about 13 years ago - 6 comments
In a previous post, I walked through the simple process of creating a custom UI for a toolbar in Sencha Touch. Since theming in Sencha Touch and ExtJS 4 are extremely similar, I thought I’d walk through the same process, but with an ExtJS 4 flair. In fact, the last post that I wrote was…
ExtJS 4 Theming: Getting This Thing to Go
about 13 years ago - 5 comments
Recently, I’ve been concentrating a lot on theming for Sencha Touch. If you’ve read much of what I’ve posted, you know that I really love how the framework is put together, and think the SASS-y mode of custom theming is just awesome. Of course, ExtJS 4 has many of the same theming features, and a…
ExtJS 4: Intercepting a Window Closure
about 13 years ago - 1 comment
In a blog post I ran across recently, someone was trying to intercept the closure of a window via the “X” icon in the top right corner. The idea was to be able to run additional processing before closing the window (such as confirming save/cancel of data, resetting a form, updating a record, or whatever…
ExtJS 4: ComponentQuery Selectors in a Controller
about 13 years ago - 1 comment
In ExtJS 4, you can do some pretty powerful stuff inside your controllers using ComponentQuery. In the following example, I have a simple grid panel view, and I’m using ComponentQuery in my controller to handle itemcontextmenu events within the grid: views/Bookmarks.js Ext.define(“ME.view.bookmarks.List”, { extend: “Ext.grid.Panel”, alias: “widget.bookmarks”, store: “Bookmarks”, scroll: “vertical”, title: “My Bookmarks”, initComponent:…
ExtJS 4: A Textfield, a Grid, and Some Keystroke Interception
about 13 years ago - 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.…
ExtJS Quickie: Full Width Text Fields
about 13 years ago - 2 comments
Ok, so a lot of posts I make are not so much about “hey, look at this cool thing I figured out” as much as it is saving a reminder of myself for how to do something when I inevitably forget it later on 🙂 So for today’s example, the problem I was having was…
about 13 years ago
Is it ‘data-qtip’ ?
about 13 years ago
But first need to init QTip:
Ext.QuickTips.init();
about 13 years ago
Thanks! It helped me!