View Full Version : Ext.ux.panel.TextTool - Simple text-based Panel tool and SASS mixin

5 Jul 2011, 7:31 AM
The html below contains an extension to Ext.panel.Tool, called Ext.ux.panel.TextTool, xtype: 'texttool'.

This allows you to create, and style to your own needs, simple text buttons to be used as panel tools, without the need to photoshop text into an image.

Since the presentation is purely CSS and text, I've included a SASS mixin to facilitate creating the styles you'll need to create your own tools.

To demonstrate, put the code below into an HTML file.

To use in your own project:

Put the Ext.define block below into your own code
When declaring a panel config, where you specify tools, use xtype: 'texttool', and caption: 'tool caption'
In CSS, make sure there's a selector .x-tool-<yourtoolid> with appropriate style rules (see below for an example)
For SCSS, use the mixin declared in the comments below

<!DOCTYPE html>
<title>TextTool sample</title>

<!-- change paths to point to your extjs root -->
<link id="extjs-theme-base" rel="stylesheet" type="text/css" href="ext-4.0.4/resources/css/ext-all.css">
<script type="text/javascript" src="ext-4.0.4/ext-all.js"></script>

/* Static (non-SASS) tool style - don't use if you're using SASS as described below */
.x-tool-clickme {
background-color: #aa0000;
color: white;
font: 12px Arial;
height: 15px;
line-height: 11px !important;

padding: 1px 5px 1px 5px !important;
margin: 0 2px 0 2px;

cursor: pointer;

If you want better theme support, use the following in your theme's SCSS file:

// define SASS mixin
@mixin ux-text-tool($id) {
.x-tool-#{$id} {
background-color: #aa0000;
color: white;
font: $app-font;
height: 15px;
line-height: 11px !important;

padding: 1px 5px 1px 5px !important;
margin: 0 2px 0 2px;

cursor: pointer;

// whereever you want to style a text tool
// call the mixin with the type you declared
// when you created the text tool:
@include ux-text-tool("clickme");

// Compile your theme and go!

<body />
<script type="text/javascript">

// Define the tool extension
Ext.define('Ext.ux.panel.TextTool', {
extend: 'Ext.panel.Tool',
alias: 'widget.texttool',
renderTpl: ['<span class="{baseCls}-{type}" role="presentation" >{caption}</span>'],

initComponent: function () {
// caption is the config you'll use to set the tool text
Ext.apply(this.renderData, { caption: this.caption });


Ext.onReady(function () {

// Demonstrate on a window
new Ext.Window({
renderTo: Ext.getBody(),
title: 'Hello, World!',
height: 100,
width: 300,
layout: 'fit',
html: 'Hello!',
tools: [
// specify TextTool xtype
xtype: 'texttool',
// make sure you have a x-tool-clickme CSS rule
type: 'clickme',
// tell TextTool what to use for its caption
caption: 'Click me!',
// everything else is regular tool behavior
handler: function () {
alert("On second thought, don't click me.");

5 Jul 2011, 7:35 AM
ZIP with tool extension and SASS mixin attached.

5 Jul 2011, 7:50 AM
Heh, nice one mate :)

Not sure I have a need at the moment, but sure I can come up with one...


4 Oct 2011, 7:57 AM
How would one do this in extjs 3.3?

5 Oct 2011, 6:17 AM
Hi stevil,

I found a little issue in your plugin, just using your example.

When you drag a window, style of your button disapear (only while draging, it came back when you release).

Anyway, look nice