Ext JS 4: “Link” from One Tab to Another

I have a pretty typical Ext JS app.  Tab panels and within each tab border layouts with multiple grids.  One thing the app does is manage users and one tab shows user details.  Anywhere else in the app that shows a user name, I want to link that user name to the user detail (not in a dialog, but actually switch to the user detail tab).  Typically, the user names are listed in grids.  Here is what I did to hook up the “links” to the tab.

I started out using an <a> tag, but settled on a <button> tag to avoid the hash being added to the url and messing up my history.

Here is the renderer function for when the links are in a grid.  It’s pretty straightforward, just renders the cell with button tag.


userNameLink : function(val) {
    return Ext.String.format('<button type="button" class="userNameLink">{0}</button>', val);
}

Now style the link.  My css skills leave a lot to be desired.  I found this very helpful post which I used for the styling: Styling button elements to look like links


button.userNameLink {
     overflow:visible; 
     margin:0;
     padding:0;
     border:0;
     color: #2B547D;
     background:transparent;
     font:inherit;
     line-height:normal; 
     text-decoration:underline; 
     cursor:pointer; 
     -moz-user-select:text; 
}

button.userNameLink::-moz-focus-inner {
     padding:0;
     border:0;
}

Finally, now to do something with those “links”.  Right now they look good, but they aren’t doing anything!


Ext.getBody().on('click', this.handleUserNameLink,
    this, {
        delegate: 'button.userNameLink'
    });

The “handleUserNameLink” function does the heavy lifting of actually switching tabs and defaulting data, but this nifty code adds the handler to every single one of my links w/o me having to add it myself everywhere.

Helpful links:

Version info: Ext JS 4.0.7
Tested on IE6, IE8, Firefox 11, Chrome 18

Advertisements

One comment

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s