In this sample project we have used a user control so that we can use my extjs grid anywhere any time we need with the same functionality. The scripts and styles for ext grid is on our user control. We need to add one css style sheet and one JavaScript file as reference to work with ext grid. Additionally we need another reference for using web service.

Now we need a webservice to provide data for the grid. Here is how we have done this.

From our webmethod we are returning a list of object of type class.

We just need to follow three steps to do it.
Step1: We need to define the fields in the Ext.define method. Here is the code.

Step2: We need to create the Ext.data.Store from my web service. Here is how we are going to call the webmethod of our web service.

Step3: Now we need to creat the grid panle to show to data as a grid format. The following code shows how we can accomplish that.

Here we need to define the column names and dataIndex that we created at the Ext.data.Store. The field of the Ext.data. Store and the dataIndex for our columns.

We just now need to create a div with id and render the grid. We just need to put the id of that div at the renderTo property while creating the grid.

So we are done now. Our UserControl is now ready. We can now put the UserControl in the page by dragging the control and dropping it on the default page. If we now view the page on the browser then we will be able to view the grid with proper data.

Now another requirement comes that we want to link our first name. We can do this quite easily. We just need to call the function while creating the grid. That is we need to call the function having that functionality we want with the “renderer” perperty.

Last edited May 12, 2013 at 7:00 PM by dpalash23, version 2

Comments

No comments yet.