4.1. Create an empty panel

We want to add yet another panel to our application which in the end will hold a list of the features from the redlining layer.

4.1.1. Needed steps

First we want to have another panel that simply has some HTML content and render it as tab next to the two existing tabs. The steps needed for this are outlined below, but by now we are confident that this task is easily solveable without too much guidance. In case you encounter problems, please ask.

var featureList = Ext.create('Ext.Panel', {
    title: 'Features',
    html: 'The list of redlining features will appear here'
});

Of course to show up in the application we need to put it into the items-configuration of the TabPanel:

var tabPanel = Ext.create('Ext.TabPanel', {
    items: [
        mapPanel,
        layerList,
        featureList
    ]
});

Tasks

1. Copy the contents of the buttons.html (created in the previous section) into a new file called features.html, and save it in the my-tasks folder in the workshop directory.
2. Add the above snippets at the appropriate location inside of the already existing code.
3. Open the working application in your web browser: workshop_url/user/my-tasks/features.html

With the above steps applied, your application now should like the one pictured below.

Our placeholder panel

4.1.2. Next Steps

In the next section we’ll add list of features instead of the above placeholder panel.