In w2ui library there are several global variables. If you link w2ui.js as "text/javascript": Following global object and function will be defined: And following global classes (see extending w2ui)
  • w2base - base class, implements event handling, can be exteded
  • w2field - field class, can be extended
  • w2form - form class, can be extended
  • w2grid - grid class, can be extended
  • w2layout - layout class, can be extended
  • w2sidebar - sidebar class, can be extended
  • w2tabs - tabs class, can be extended
  • w2toolbar - toolbar class, can be extended
However, starting with version 2.0, you can load libaray as ES6 module and these variables will not be registered globally by default. If you link w2ui as type "module" There will be no global variables and it makes no sense to link it this way, but load proper class for each script where you need it You can also link ES6 modules and auto-register globals if you do


All objects you create - layouts, grids, toolbars, sidebars, tabs, forms - will be attached to global w2ui object. Initially it is an empty object, but as soon as you start creating widgets, they will become part of this object. This object serves two important purposes:
  • It provides a common and uniform way for accessing created objects
  • It makes sure that you will not overwrite already created object (object name must be unique)
For example, if you created a grid with name myGrid then it can be accessed in the following manner:


This object holds all variables for localization purposes, such as date and tiem format, currency format, number format, days of weeks, months names, and translation phrases.
To load different locale use w2utils.locale


This global object has useful functions for data validation, data sanitation, data formatting, encoding, etc. For example, you can check if a string is in email format by: See w2utils.methods for more information.


Generic dialog object


Alert dialog


Confirm dialog


Generic prompt dialog

Extending w2ui

All w2ui classes can be extended and in such way a new and/or custom functionality can be added to grid, toolbar, sidebar, tabs, etc. For example, to extend a grid, do the following:

User Comments

comments powered by Disqus