How to Use ExtJS Controls in NetSuite

As you know, the Oracle-NetSuite ERP provides a lot of flexibility for customization, so you can tweak its processes and workflows according to the needs of your business. For this purpose, NetSuite provides the JavaScript-based SuiteScript API which you can use to customize things to your liking, both server-side and client-side.

Currently, the platform offers two versions of the API – SuiteScript 1.0, which is the current and most widely used version, and SuiteScript 2.0, which is next gen version and is slowly rising in usage. Both versions of the API serve the same purpose though, which is to customize NetSuite.

Read more about SuiteScript 1.0 vs 2.0

Other than SuiteScript, NetSuite also provides built-in support for JavaScript frameworks like jQuery. However, most NetSuite developers (or consultants) are unaware of the fact that NetSuite also provides built-in support for another JS framework – ExtensionJS (or Ext JS as it’s more commonly known).

ExtJs in NetSuite

Ext JS is a native JavaScript application framework that is used to build interactive, cross-platform web applications. It offers support for Ajax, DHTML, and DOM scripting.

NetSuite developers who are not aware of the support that NetSuite offers for Ext JS, typically use native JavaScript alert boxes and confirm dialogs (depicted below) in NetSuite.

However if you want a better, purer NetSuite experience in your UI dialog boxes, then you should use Ext JS instead, to create 100% native NetSuite UI controls such as message boxes and confirm box (as depicted below).

You can generate this type of alert box with the simple code snippet shown below.

Ext.MessageBox.alert(“ExtJS Alert”, “This is a ExtJS alert box.”);

To generate a confirmation message box, just use following code.

Ext.MessageBox.confirm(“ExtJS Confirm”, “Do you want to use ExtJS?”);

Ext JS also offers many other UI controls such as progress boxes that you can use to enhance your NetSuite UI. However, not all UI controls provided by Ext JS may be supported by NetSuite, so that’s something you should keep in mind.

Conclusion

Using ExtJS controls in NetSuite allows developers to create highly interactive, responsive, and user-friendly interfaces within SuiteScript and SuiteCommerce applications. By leveraging ExtJS components such as grids, panels, buttons, and forms, you can enhance the user experience while maintaining consistency with NetSuite’s architecture.

Proper NetSuite implementation ensures faster data entry, improved navigation, and more intuitive workflows, reducing errors and boosting productivity. Understanding how to configure, customize, and integrate ExtJS controls effectively empowers developers to build sophisticated, scalable applications that meet complex business requirements.

Got a NetSuite development or customization requirement you would like to discuss? Get In Touch.

FAQs

1. How do I add an ExtJS grid to a NetSuite Suitelet?

ExtJS grids are used to display tabular data dynamically within a Suitelet.

Steps:

1. Create a Suitelet script in SuiteScript 2.0.
2. Include ExtJS library reference in your Suitelet HTML:

var html = "<script src='/core/media/media.nl?id=123&c=YOURACCOUNT&h=abc123'></script>";

3. Initialize the grid using ExtJS:

Ext.onReady(function(){
    Ext.create('Ext.grid.Panel', {
        title: 'Customer List',
        store: customerStore,
        columns: [{text: 'Name', dataIndex: 'entityid'}, {text: 'Email', dataIndex: 'email'}],
        renderTo: Ext.getBody()
    });
});

Output:

• A responsive grid displaying customer data within your Suitelet.

2. How can I handle button clicks in ExtJS within NetSuite?

ExtJS buttons allow triggering SuiteScript actions dynamically.

Steps:

1. Define a button in your ExtJS panel:

Ext.create('Ext.Button', {
    text: 'Save Record',
    renderTo: Ext.getBody(),
    handler: function(){
        alert('Button clicked!');
        // Call SuiteScript function here
    }
});

2. For server-side processing, trigger a POST request to the Suitelet script.

Output:

• Button click performs immediate actions or calls server-side logic.

3. How do I bind ExtJS components to NetSuite record data?

You can bind ExtJS forms or grids to record data retrieved via SuiteScript.

Steps:

1. Load record data in Suitelet using record.load().
2. Pass data as JSON to your ExtJS store:

var customerStore = Ext.create('Ext.data.Store', {
    fields: ['entityid','email'],
    data: customerData // JSON array from SuiteScript
});

3. Bind store to grid or form: store: customerStore

Output:

• ExtJS UI dynamically reflects NetSuite record values.

4. How can I use ExtJS tabs in a NetSuite Suitelet?

Tabs help organize content without leaving the page.

Steps:

1. Create a TabPanel in ExtJS:

Ext.create('Ext.tab.Panel', {
    width: 600,
    height: 400,
    renderTo: Ext.getBody(),
    items: [
        {title: 'Customer Info', html: 'Customer details here'},
        {title: 'Orders', html: 'Orders data here'}
    ]
});

Output:

• Users can switch between different sections efficiently.

5. How do I debug ExtJS scripts in NetSuite?

Debugging is critical for interactive UIs built with ExtJS.

Steps:

1. Use browser developer tools (console, network tab) to inspect errors.
2. Add console.log() statements in your ExtJS code:

console.log('Grid data:', customerData);

3. Test Suitelet in Preview Mode and check for script load errors or missing libraries.

Output:

• Quick identification of JS errors, missing resources, or data binding issues.