Friday, December 24, 2010

Additional Parameters in ExtJs data store

Hello again.

This is my second blog on ExtJs. Recently I was working on a project where my responsibility was to create Data filters of ExtJs grid. There will be number of drop downs in tool bar of grid and user can select values in one or more drop downs. Also paging is enabled in grid. So user can select some filters and according to that data will be displayed in grid in different pages with default page size 25.

So how to do that? Because here filters are dynamic. user may or may not select values in drop downs. After user selected some filters it should be retained in all the events like next page,first page, first page,last page and refresh.

Here I was working with ExtJs Json Store. When josn store gets loaded and assigned to grid, all its configuration will be used in all grid events like next page etc. We can pass additional parameters to json store while using load and reload method.

store.reload({params:{start:0, limit:20, sort:'col1',dir:'DESC',param1:value1,param2:value2}}).

But here in this case this function is automatically called by grid when we click on next and previous buttons. So we don't have control to add additional parameters and values in reload function. One possible solution is to override ExtJs pagaing toolbar and defining our own events. But its some what difficult for beginners. We have one easy solution for this. Json Store has one more property called baseParams. It takes an array of parameter name and values. All the parameters defined in baseParams will be sent to server in each paging event of grid. So in case of our dyanmic filters all we have to do is to change grid baseParama when user selects some values from drop down. This we can do it drop down select event as follow.

fn:function(combo,record,index) { = {param1:value1,param2:value2};;
All the parameters sent to server by json store and on server side you can use those parameters to get the data and send it back to the application.

That's it and you have a real time dynamic filtering in your grid.

Thursday, December 16, 2010

Put Standard HTML controls inside ExtJs Grid Panel


Since last three months I am working with ExtJs. I have some wonderful experience with ExtJs during this time. ExtJs is really a powerful JavaScript framework for rich user interface development. This is my first blog on ExtJs. I am going to publish more blogs on my experience with ExtJs.

Ok let's come to the point now. I was having requirement to put standard html controls like select box and check box inside ExtJs grid panel. Although ExtJs provides various controls like checkbox and combo box. But requirement was to use standard HTML controls.

ExtJs has another powerful control called editor grid panel. Here you can specify editor for each column like textbox and combo box etc. When user double clicks on row it goes to edit mode and all the editors are visible in respective columns.

But my requirement was to display controls without using editor grid panel. When user views the grid all the controls should be displayed to user. So how to achieve this?

ExtJs grid column defines a function called "renderer". It takes two arguments value and cell object. Value is the value of cell that is assigned by dataIndex property and cell object defines various property of cell. In this function you can write your code to generate the standard HTML controls. For example.

columns : [{
header: 'columnheader',
width: 25,
dataIndex : 'valueofcell',
renderer: function(value, cell)
return '<input type="checkbox" name="mycheckbox" />';

This will add standard HTML check box to ExtJs grid panel. This is how you can add any other HTML controls inside the ExtJs grid panel columns.