2.2. Creating a GXM.LayerList

Now we have a map with currently three layers. It would be nice to manage these layers to e.g. toggle their visibility.

Luckily there is a GXM component that does exactly that: the GXM.LayerList

Lets see how we can create a LayerList, populate it with the layers of our map and show it instead of the mappanel.

2.2.1. Creation

Let’s call the Ext.create-method to create a LayerList:

layerList = Ext.create('GXM.LayerList', {
    map : gxmMap
});

2.2.2. Adding to the viewport

Now we are ready to add the list to the view port, instead of the map. So change the code that it reads

Ext.Viewport.add(
    gxmMap
);

to

Ext.Viewport.add(
    layerList
);

2.2.3. Tasks

Tasks

1. Edit the contents of the layerlist.html (created in the previous section) and add the above snippets at the appropriate location inside of the already existing code.
2. Open the application in your web browser: workshop_url/user/my-tasks/layerlist.html

If all went well, you should now see the following output inside of the browser:

The LayerList rendered fullscreen.

2.2.4. Next Steps

That’s not too bad, isn’t it? But still, we naturally want an application that has both the GXM.Map and the GXM.LayerList, so that we can switch between the two components.

We’ll accomplish that in a second in the next section, where we create a TabPanel that renders both Map and LayerList.