BLOG POST VOM 10. September 2009

How to use Ext JS with Pylons and Mako

ExtJS and AJAXIn this little tutorial I will show you how to use the Python web framework Pylons and the Mako template library with the cross-browser JavaScript framework Ext JS.

I will explain how to set up a complex layout (this means an Ext.Viewport) and how to dynamically load its contents and further functionality.

First of all, you need to set up Pylons and a create a new project. Let’s  name it “PylonsAndExt”. During setup, mako needs to be selected as our template engine. We do not require SQLAlchemy support…

paster create -t pylons PylonsAndExt

If you like to, verify that everything’s working well by serving the application (paster serve development.ini) and visiting http://127.0.0.1:5000.

Now we need a controller. Since this controller should provide us with our main application, we name it “application”:

paster controller application

To map the application controller’s index() action to the root URL of the project, add a new line to the main route map in config/routing.py just after “# CUSTOM ROUTES HERE” and empty the public directory (to avoid serving static files):

map.connect('/', controller='application', action='index')

Next, we modify the ApplicationController’s index() method so that it returns a mako template. Putting all our Ext JS code into mako files enables us to better internationalize and localize our JavaScript:

def index(self):
   return render('/application.mako')

To create an Ext.Viewport, we first need Ext. After downloading, place all (relevant) Ext JS files in public/ext.  Inside application.mako, we can now generate our viewport:

<html>
<head>
  <title>Getting started with Pylons and Ext JS</title>
  <link rel="stylesheet" type="text/css"
    href="ext/resources/css/ext-all.css"/>
  <script src="ext/adapter/ext/ext-base.js"></script>
  <script src="ext/ext-all-debug.js"></script>
  <script>
    Ext.onReady(function(){
      new Ext.Viewport({
        layout: 'border',
        items: [
          {region: 'north', height: 50},
          {region: 'west', width: 100},
          {region: 'south', height: 50},
          {region: 'east', width: 100},
          {region: 'center',
           xtype: 'tabpanel',
           items: [{
             title: 'Default Tab',
             html: 'The first tab\'s content.'
           }, {
             title: 'AJAX Tab',
             autoLoad: 'application/ajax'
           }]
        }]
      })
    });
  </script>
</head>
<body></body>
</html>

Since we use AJAX to load the content of the second tab (“AJAX Tab”), we need to add the ajax() method we specified above to the ApplicationController:

def ajax(self):
   return 'Some AJAX Content'

Instead of returning a simple string, we could have used a mako template to return more sophisticated content again. Ok, that’s all really basic so far. I should continue with some more challenging functionalities within the next days…

Any suggestions?

Tags » , , , «

Autor:
Datum: Donnerstag, 10. September 2009, um 6:25 Uhr
Themen: (Web) Development, Ext JS, Pylons Web Framework

Trackback: Trackback-URL | Feed zum Beitrag: RSS 2.0

Ein Kommentar, Trackback oder Pingback

  1. djien kwee sagt:
    16. März 2011 um 17:37

    Thank you for the example. I use it in pylons v1.0 environment and ext-3.3.1. Therefore there are some editorial corrections:
    (1) lib ext-3.3.1 is located in PylonsAndExt.pylonsandext.public:
    (1a) href=”ext/resources/css/ext-all.css” should be href=”/ext/resources/css/ext-all.css”
    (1b) also “/ext/adapter/ext/ext-base.js”
    (1c) also “/ext/ext-all-debug.js”

    (2) autoLoad: ‘application/ajax’ should be ‘ajax’ only, otherwise the GET will be localhost:5000/application/application/ajax

    More other examples with global variables are welcome
    Kind regards
    Djien

Neuer Kommentar