The idea is to have a single page for each example where the user can find all information of the example. He does not need to click somewhere to run it, click elsewhere to see the source code, and click once again to see the description.

Examples consist of three parts:

  1. Example application
  2. Example page
  3. Download package

Example application

Step 0: See the existing examples

First of all, see how the existing examples are done mainly Styling Grid Rows. Scroll through the example to see what’s there.

Step 1: Generate worspace and application

The application should be generated by Sencha Cmd preferably in a workspace. For that:

cd /devel/ext-4.2.2
sencha generate workspace ../ws
cd ../ws/ext
sencha generate app ExampleSgr ../saki-styling-grid-rows

The code above assumes we work in /devel directory (that is also http server document root) and that Ext download package has been unzipped into ext-4.2.2 subfolder.

The recommended namespace is ExampleXyz, where Xyz is abbreviation of the example name; Sgr stands for Styling Grid Rows in the above code.

Directory name of the application should start with author’s nickname followed by dash delimited example name as is saki-styling-grid-rows above.

Step 2: Initial application setup

It is necessary to switch off autoCreateViewport in the newly generated application as an example is embedded in the page so we cannot take all browser space, what viewport does.
We cannot even render to the body because we want to use the running app inline with the text or running in a window created by clicking on a button – button also inline.

Therefore, we need two things:

Step 3: Develop the application

While developing, try to keep the application simplest possible so that it shows only what its name states. I have probably made a mistake of showing more than necessary in Styling Grid Rows example that also includes “How to have multiple instances of a view”, “How to use custom events” and “Basics of SASS”. Don’t do the same mistake, keep it simple.

The application must be well written: easy to read, appropriatly indented and commented, high quality.

I recommend naming of classes like this: PersonModel, PersonStore, PersonGridView, PersonController, i.e. name always contains MVC role in the end.

Compile the app when finished.

Example page

Step 4: Sign-up as Free Member (only first time)

Go to the Free Registration on the site, fill in the form and click the confirm link in the registration mail you receive.

Step 5: Contact me (only first time)

Contact me (Saki) as I have to create an Author account for you so that you can write and publish pages on the site.

Step 6: Create the example page

Step 7: Set page options

You need to set:

  1. Page Templage to Example Page Template

  2. Dynamik Label to Ext Example

  3. Custom field ext_example_css to the path of your css. For example:

  4. Custom field ext_example_app to the path of your application. For example:

Note: Mind that the css and app above are compiled versions as generated by sencha app build


Now you can publish the page.

Step 8: Upload compiled files

Use your ftp client to upload compiled files to the site – contact me for ftp credentials. The directory and file names must match the above css and app.js links.

Download package

Just send me zipped sources of the example application directory – for now I have no automation or author executable steps. I will do the rest so that paying subscribers will be able to download the sources.
I zip with the following bash script, if it helps:

if [ $# -lt 1 ] ; then
    echo "Package name required"
    exit 1


zip -r ${pkg}.zip $pkg -x \
        "$pkg/guides/*" \
        "*.DS_Store" \
        "$pkg/" \
        "$pkg/tags.rb" \
        "$pkg/docs.json" \
        "*guides.json" \

Looking forward to your examples.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Enter your username and password to log into your account. Don't have an account? Sign up.

Want to collaborate on an upcoming project?