Add extra parameters with an ExtJS TreeStore server request.

The Sencha Ext JS (4) TreePanel is a popular component, but somewhat hard for developers because of the large amount of options. In this article I will tell how you can add extra parameters to an Ext.tree.Store when requesting data from the server.

image

The model

With the Ext.tree.Panel you can use a common model. Below you see a sample of a model that I have used for a project.

What you see is that you can extra fields, just like any other model that you have created so far. But the fields “text”, “leaf”, “expanded”, “iconCls” and “id” are native to the Ext.tree.Store component. And that is what we need to this model.

The Store

The store that we use is an Ext.data.TreeStore component. This store is a bit different than a normal ExtJS store.

This store is not loading its data automatically, because we used the “expanded: false” in the root section of this class. This means that you have to arrange the loading of the data in your controller or view (for example with an afterrender event).

The “id: ‘projects'” in the same root section, makes that the initial call to the server has “projects” in the node post parameter.

image

The “text: “Projects” in this root section relates to the name of root node in the tree’s view.

image

The extra parameters on the operation

The careful reader already noticed that there were 2 extra parameters with the call: hash and type. These parameters were added through the beforeload event in this store.

The beforeload listeners sends 3 parameters: store, operation and options. The operation parameters holds all the information for the operation that has to be performed on the load, including the node information. And the node is just an model object, so you can use it as a normal record and “get” the field values and add them to the params of the operation object. As you can see I have not included the “node” parameter, for this already done automatically.

Final but useful tip

Make sure that the “id” value of the store is unique. And that means unique within the whole tree, not just within the parent node itself. The id doesn’t have to be numeric, so you can make it easily unique.

Links

A great reading about the Ext.tree.Panel you can find in this link.

Johan van de Merwe
Dedicated to professional software development since 1985. Has worked since 1992 as IT manager in several international operating companies. Since 2007 CEO and Sencha Ext JS web application developer at Enovision GmbH.

Comments

  1. AnYue

    Really a useful post for me, but if i want to add a checkbox before every node in treeStore situation,how can i complete it ? thank you .

    • Enovision Webmaster

      You add to the store a “checked” field and in your json coming from the server you add the “checked” attribute as well.

      as in:

Leave a Reply

Time limit is exhausted. Please reload CAPTCHA.