HowTo: Implementing Your Own User Control in Gxui

Unofficial Content


gxui Library is a set of user controls based on ExtJS. It features a set of controls for building highly interactive, web 2.0 applications with GeneXus.

In addition to the controls implemented in gxui Library, you can implement any other control according to your needs.

Recommended reading

Take a look at ExtJS guides:!/guide

Steps to follow

• Create a folder for your control under gxui directory, for example PropertyGrid. Inside this folder you will have the javascript files of your control, plus all the necessary resources (images, css, etc).
• Create the definition file of your control (.control extension) under gxui directory, for instance, PropertyGrid.control.
• Set the following properties in the configuration file (you can check an existing one from gxui as an example).

  • RuntimeRender: Name of the javascript that has the implementation of your control, eg PropertyGrid/PropertyGridRender.js.
  • ObjClass: Class of your control, for example. PropertyGrid.
  • ShowMethod: show.
  • ReferencedFiles: The same files as the other gxui controls, plus any specific reference to implement your own control plus gxui-all.js.
  • SupportFiles: The same files as the other standard gxui controls.
  • Constructor: The same value of ObjClass.
  • Id: Set a GUID for your new control (you can generate a new GUID here)

Then, the rest of the properties in the configuration file such as events, methods and actions can be added as usual like any other user control.

Another important thing is the runtime render (to continue with the above example, it will be named as PropertyGridRender.js). In this file, the javascript class should be created with the following structure:

Ext.define('PropertyGrid',  {
    extend: 'gxui.UserControl',
    initialize: function() {
        // Here goes the initialization code of control, it will be executed when GX executes a new

    onRender: function() {
        // Here goes the code that will be executed when GX requests the control to be shown the first time
        // For example
        method1(1, 'a', 'b');

    // Optional
    onRefresh: function() {
        // Here goes the code that will be executed each time an user event is executed.
        // For example

    // Optional
    onDestroy: function() {
        // Here goes the code that will be executed when the control is removed from the screen, to free resources.

    getUnderlyingControl: function () {
        // Return the ExtJS object.

    // Optional
    addToParent: function() {
        // Return true if this control can be attached to a parent GxUI control.
        // For example: return this.AddToParentGxUIControl;

    // Here you can define all the additional methods you may want for your control
    method1: function(parm1, parm2, parm3){

    method2: function(){


    methodN: function(){