How to dynamically load the store of an Ext.Net GridPanel using Ext.Net MVC DirectEvents

Initial position

I implemented an Ext.Net TreePanel which mirrors folders that lay on a Fileserver. Each folder can contain files that should be displayed in an Ext.Net GridPanel by clicking on that folder. This is often used in an “Intranet-System” to provide important files to all employees.

As I am using the MVC pattern to build up that component, I will need the following:

-> view – Index.cshtml : The view contains the components Ext.Net TreePanel and GridPanel, as well as a small block of Javascript Code
-> controller – DataController.cs : The controller handles the information from the model and delegates it to the view
-> model – DataModel.cs : The model fetches the data from the Fileserver, it creates the store for the Ext.Net TreePanel component and for the GridPanel component.

Each component used in this example is listed here: http://mvc.ext.net/

Let us start at the point where we have successfully built up a Ext.Net TreePanel which displays the folders from a shared Fileserver in form of nodes. That should look like this:

(folders that contain files)
(empty folders)

When I click on a node, e.g. on cms>General, I want the files of this folder to be listed up in an Ext.Net GridPanel (component for a table).

There are different ways to handle a click on a node in a TreePanel, the one I chose was the DirectEvent.
You can add the .DirectEvents to the TreePanel to call in a method from the controller.
The controller will then receive the required data from the model and return them to the view.

Let’s start by the DirectEvent in the TreePanel:

ev.select is the event that is triggered when you click on a folder / node in the Ext.Net TreePanel. This means by selecting a folder in that TreePanel, the method FillGridPanel in the controller “DataController.cs” is called. The path /Data/ represents the folder where the controller is placed in.
As a parameter, the path of a selected folder in the TreePanel is passed to the method in the Controller with ExtraParams:

The path of each folder is set while creating the TreePanel on a field:

The method that is called in by the DirectEvent in the Controller now needs to be the following:

We create an instance of DataModel, so we can build the store for the GridPanel. The method model.setObj() needs a List<Object> obj as parameter. This will set the store for the GridPanel in form of a List (you could also use an Array). You can see, that we will return the list by calling model.getObj() to our view. So what we need is to fill the list with files of the folder that follows the path we passed as parameter to the method. This happens by calling model.setObj(model.GetFiles(path)).
With this method in the model, we fill the list and also the store for the GridPanel. Let’s have a look at the method GetFiles() in the model:

We return a list filled with objects that contain the FullName (path), the extension, the file name, size and LastWriteTime of each file found in the directory with the parameter “directory”. This list is called per “getter” in the controller:

and then returned as a store to the view. To be able to load the generated store into the Ext.Net GridPanel, we catch the returned list in the view in the success statement of the DirectEvent:

After having catched the result, we call a Javascript function to load the result (the list) into the Ext.Net GridPanels store.
We pass the list, which is now in result.data, to the Javascript function:

Now we are done: the store of the GridPanel got reloaded and filled with the files included in the folder we clicked in the Ext.Net TreePanel.

example: Click on cms>General

Important general questions:

> How to fill the store of the Ext.Net GridPanel in the view as default empty list?

-> as default, Model.getObj() returns an empty List<Object> , as consequence the store of the GridPanel is empty.

> Which model do we need to pass to the View at the beginning?

– Patrick