Dynamic Helper Controls for ExtJs/Ext.net elements/components

Layer (Ext.Layer) is probably one of the lesser used element of the ExtJs framework. However, I recently discovered one great use of Layer, for showing dynamic helper controls for any element on the page.

See the adjoining screenshots for an example. In my case, I needed to show some controls for manipulating values in a ComboBox. However, I neither wanted to use the ComboBox triggers, nor normal controls on the page, as these took up valuable screen real estate, which was really scarce in my case. I wanted to show the helper controls for the ComboBox only for the duration when the ComboBox had the focus.

The solution was really as simple as it could have got. Just prepare a Panel with the desired helper controls (with the panel initially hidden) and create a Layer assigning this Panel as the existingEl to the Layer constructor. Following code achieved this:

{syntaxhighlighter brush: jscript;fontsize: 100; first-line: 1; } var pnl1 = new Ext.Panel({ cls: “x-hidden”,
renderTo: Ext.getBody(),
height: 25, width: 150,
border: false,
layout: ‘hbox’,
items: [
{ xtype: ‘button’, text: ‘Clear’, handler: function(el) {
layer1.isFocused = true;
layer1.ownerCtl.clearValue();
layer1.ownerCtl.focus();
}
},
{ xtype: ‘button’, text: ‘Set Default Value’, handler: function(el) {
layer1.isFocused = true;
layer1.ownerCtl.setValue(‘val1’);
layer1.ownerCtl.focus();
}
}
]
});

var layer1 = new Ext.Layer({ isFocused: false }, pnl1.el);{/syntaxhighlighter}

Then, in the appropriate focus/blur listeners, just align the Layer to the target element, and switch on/off respectively the visibility of the Layer. Here’s how:

{syntaxhighlighter brush: jscript;fontsize: 100; first-line: 1; }function showLayer1(el) {
layer1.alignTo(el.el, ‘tl-tr’, [25, 0]);
layer1.show(false);
}

function hideLayer1(el) {
layer1.hide(false);
}{/syntaxhighlighter}

Here’s a demo of the above code:

You can easily get more fancy here. For example, you can put anything in the Layer Panel you want. You can also re-use the same helper controls to be displayed for different elements on the page, without needing to create them independently for each element (the attached code demonstrates exactly this).

You can also animate the showing/hiding of the helper controls by just using the regular Ext.Fx slide, fade methods etc. Remember, Ext.Layer inherits from Ext.Element and hence enjoys all features available to a regular ExtJs Element.