How to create Custom ExtJS Grid with Savvion
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.