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/controller/Menu.js           # controller(s)
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:


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.