André Kolell » Ext JS

How to use Ext JS with Pylons and Mako

Andre Kolell — Thu, 10 Sep 2009 04:25:57 +0000

In 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:



  Getting started with Pylons and Ext JS

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?

Ext JS Charts Problem: Y-Scale is always 0 to 1

Andre Kolell — Fri, 28 Aug 2009 13:58:07 +0000

During the last few hours I was playing around with Ext JS charts. I got stuck for a while because the height of my y-axis was limited to one; no matter what I tried and how high the numbers of my records were – the y-scale was fixed to 1.

After some time I figured out that there’s a problem with PHP’s json_encode(). Due to that problem I formatted the data for my chart as strings (with quotation marks) instead of integers (without quotation marks).

There are two solutions to fix this problem: First, you can make sure that the PHP variables that contain integers are really numeric types (and not strings). The second, much easier solution, is to properly define the Ext JS fields for the charts:

fields = [
  {name: 'interval'},
  {name: 'field1', type: 'int'},
  {name: 'field2', type: 'int'}
];

And that’s it!

Ext JS – How to reload a GridPanel’s DataStore

Andre Kolell — Thu, 20 Aug 2009 10:40:08 +0000

Although it is quite easy to reload the data that underlies an Ext JS GridPanel, I spent some time figuring out how to do it, especially because the first result on my search on Google leaded me into a wrong direction…

Ext.getCmp('').getStore().reload();

That’s all you need! Get your GridPanel by its ID and reload its DataStore. The data will be fetched from the ressource specified and the GUI will be refereshed immediately.

Experimente mit Ext JS…

Andre Kolell — Fri, 31 Jul 2009 14:50:58 +0000

Nachdem ich im Rahmen meiner Tätigkeit für blueSummit meine ersten Erfahrungen mit dem JavaScript-Framework YUI habe sammeln können, habe ich vor einigen Monaten Ext JS kennen (und lieben) gelernt. Inzwischen habe ich mit Ext JS, ebenfalls für blueSummit, auch ein erstes Tool erstellt, welches bereits ziemlich viele Möglichkeiten von Ext JS nutzt. Hier ein Eindruck von der gut aussehenden, intuitiv zu bedienenden und einfach zu programmierenden Oberfläche:

Nun geht es auch direkt mit Ext JS weiter. Mit einem Kommilitonen werde ich im gerade beginnenden Semester im Rahmen eines Forschungsprojektes an der University of Western Sydney (UWS) die Web Analytics Anforderungen von Blog-Betreibern identifizieren und in Form eines WordPress-Plugins für Besucher-Statistiken umsetzen. Dabei wollen wir auch Ext JS verwenden (was grundsätzlich kein Problem ist, wie ich vor einigen Monaten bereits ausprobiert habe). Für das Projekt haben wir eine Website ins Leben gerufenen – wopsta.org – WordPress Visitor Statistics. Dort werden wir über Fortschritte in Forschung und Entwicklung berichten. Soweit der Plan. Mal schauen wie es in rund vier Monaten, gegen Ende des Semesters, aussieht…