best grammar app

How to create Custom ExtJS Grid with Savvion

Submitted by Abhishek on Fri, 2011-12-30 10:54

In my last article on How to work with Grid Widget in Savvion I showed you how you can leverage the built in Grid widget that Savvion has. However, sometimes you want more control over what you write. In that case, you would prefer to use a custom ExtJS Grid. Some examples are:

  • A grid with Checkboxes
  • An Editable Grid
  • A Paginated Grid

There could be several more examples but in general when the vanilla grid is not sufficient you do need a custom grid. This article will show you how to develop a simple Custom grid in Savvion.


Step 1: Create your BizLogic or BizSolo Project

Create your BizLogic or BizSolo Project as you would normally do. Then open the particular workstep in Form Designer. Insert a New Code Element.


Step 2: Create a Div that will hold the Grid

Insert a DIV Component with a specific id. This DIV will be used to render the grid.


Step 3: Insert the ExtJS OnReady Code

You will need to add the ExtJS On Ready function. OnReady is called whenever EXT Initialises.

The Script blog above which contains the onReady function will be the entry point as soon as Ext Libraries get loaded. All your Grid rendering code needs to be within this block.


Step 4: Create a Store

First create a store that can hold your data. You can do it as follows:

What you did above was to create a store which acts as a storage means for your data. The store will have four headings – id, name, gender and age.


Step 5: Define the Data Source

When the time comes to load data for this store, it will refer to the page MyGridData.jsp which will render data in JSON format with root as “rows”. Example data would be:

If you would like to query a database or get this data from any other means, you can convert this to a JSP page where all java libraries can be called.


Step 6: Initialize the column model

We would like to have checkboxes in our grid. For this, we will need to change the selection model of the grid to a Check Box. Again for this initialize the checkbox selection model object as:


Step 7: Create the Grid

Now let’s initialize the grid. It can be done with the code below:

Let’s see what this does! We are initializing a new object of Ext.grid.GridPanel. This will use our earlier define store as the data store.

Next we specify the column model. We define that the first row will be sm which happens to be the instance of our Checkbox selections. After that each column as id, name, gender and age. Notice how we can specify what will be the width of each column and what will be their column name (header). Also, we attach the dataIndex which tells us how this column will pick up data from our store.

Then we define the width height title etc. Notice the last line where we have given renderTo. This attribute tells us that to which “div” this grid should be rendered to. If you recall we had defined myGrid earlier in the code.


Step 8: Load data in store

Loading data in the store is fairly simple; you would just need to call the load method on the store. If the underlying store refreshes, the grid refreshes automatically.

Later, if you would like to refresh this grid on a button click, just make a call to the store and that will take care of it.


Abhishek Mishra
Good experience in working with BPM technologies like Savvion, JBPM. Founder and Chief Editor of Founder of Savvion Business Manager Mobility Framework Savmobify| View my BPMGeek Profile
best grammar app

About BPMGeek

BPMGeek is an initiative to collaborate and communicate with the growing Business process management community out there. The goal is to help developers connect with experts, ask questions, post their learning and get understanding of BPM Concepts. Often tool specific knowledge of niche areas end up developers perplexed and confused - especially when there are very less number of resources available. We will be coming up several several new features. Have a look at our Roadmap here

BPMGeek is an independent entity not associated with any Product. All BPM product professionals are invited to contribute. The Logos and Names used across the site belong to their respective owners. The viewpoints mentioned by Individual contributors are their own. BPMgeek cannot be held liable for any issues arising out of it.

BPMgeek is promoting the Nounshoun English Grammar App - developed by Constellation Software.