GeoExt Toolbar Mouse Position

I am new to GeoExt and OpenLayers world. I am currently using OpenLayers 2 and GeoExt 2. I want to add a mouse position on the toolbar. Currently my mouse position is on the lower right corner of the mappanel and where my map description is suppose to be, I have tried this and it is not working, complaining that GeoExt.ux is not defined.
I have also tried Get mouse position in OpenGeo then items: [pos] on the toolbar but still this is not working only creating a small button.

Create an Ext.toolbar.TextItem and create your OpenLayers MousePosition-Control in the render-Event of the TextItem, so you can pass the TextItems's Div to the Control.

Like this:

Ext.create('Ext.toolbar.TextItem', { listeners: { render: function(textitem) { var ctrl = new OpenLayers.Control.MousePosition(); ctrl.div = textitem.getEl().dom; // map is the ref to your OL map instance map.addControl(ctrl); } } });

Watch the video: DynamicMaps - WebGIS (October 2021).