The questionnaire component that we'll build in this chapter will be reusable in any application. To that end, we can use an Ext JS package to create a bundle of code that can be built in the same way as a normal Ext JS application, but it can be incorporated as a component in our future applications. We discussed packages in Chapter 3, Application Structure, but now we'll see how they can be used in practice.

Here's how I started up the project that I used as a basis for this component and its test application:

sencha generate workspace ./questionnaire-space
cd questionnaire-space
sencha generate package wizard
sencha -sdk ~/Downloads/ext-5.0.1 generate app Questions ./questions

Building a package requires us to first create a workspace, so after doing so using the latest version of the SDK that I downloaded, I moved on to the workspace directory and issued the command to create the package itself, which I called wizard. Then, I created a test application that would host the package during development; I called this questions.

I then get the test application up and running with:

cd questions-space/questions
sencha app watch

The web server is now up and running at http://localhost:1841/. The final step is telling the test application to include the new package. I edited questions-package/questions/app.json and amended the requires member:

// was "requires": []"requires": ["wizard"]

As we gave the package the name wizard, just add this in the array and we're good to go.

The package we're going to build is contained at questions-space/packages/wizard and will start off containing most of the same directories as an Ext JS application. We can now move to this directory and start building it in just the same way as we have in the past few chapters.