Notes on adding a new grid panel to a Sencha ExtJS or Touch application

Here are my abbreviated notes on what’s required to add a new “Transactions” panel to my current Sencha ExtJS application:

app/model/Transaction.js         # model
app/view/TransactionList.js      # view(s)
app/view/menu/Menu.js
app/controller/Menu.js           # controller(s)
app/controller/Transactions.js
app/store/Transactions.js        # store
app.js                           # 'main' app file

By adding or changing these files, along with the following PHP file, I have a new “Transactions” grid/panel in my application.

On the server side I created this file to generate a list of transactions from the database:

php/transactions.php

The truth is that I’m using the Play Framework on the server-side, but I’ve been stubbing out some placeholders in PHP until I take time to write the Play server code.

Next up I want to create the ‘add’ and ’delete’ processes for my Transactions, and to do that I’ll add these components:

• An ‘add’ button
• The ‘add’ process will require a new ‘TransactionForm’ UI widget with Save and Cancel buttons
• A ‘delete’ button
• I’ll update the controller to handle these events
• I’ll create new server-side code to connect to the database

You can find out more about this code by digging into my Finance-DesktopClient application on Github.