PDA

View Full Version : Statusbar UX



hazlema
7 Oct 2007, 9:23 PM
Users rely on Statusbar information to keep them informed as to whats going on with the application they are using. I got tired of manually creating the divs's setting color and getting objects so I came up with the little handy UX.

Here in a nutshell is how to use the control:

Create the object

var status = new Ext.ux.statusbar({container: "statusbar"});

Create the panels

status.panelAdd("status", {dock: "left", width: "250px"});
status.panelAdd("time", {dock: "right", width: "200px"});
status.panelAdd("date", {dock: "right", width: "200px"});

Update the panels

status.panelUpdate(
[
{name: "time", key:"Current Time:", value:curTime},
{name: "date", key:"Current Date:", value:curDate},
{name: "status", key:"Process Status:", value:statusText, color: statusColor}
]);

You can see a demo and download the code/example here:
http://beta.devclarity.com/Ext/StatusBar/

I'm not a designer when it comes to colors, if anyone updates the css with better colors please post them :-) :D

hazlema
8 Oct 2007, 10:51 AM
THe UX was updated to include faster code and the demo project was changed to reflect a real world example using the layout control.

http://beta.devclarity.com/Ext/StatusBar/

trbs
8 Oct 2007, 12:33 PM
Python Rocks!

Oeps, sorry was looking at the statusbar too long :P
Looks cool, i see myself using this in the future :)

binod dokania
28 Apr 2009, 10:47 AM
hazlema, (http://extjs.com/forum/member.php?u=11190)

Do you know if any therad having compatible plugin for extjs3.0 RC1 release?