Customer Spotlight: Ext4Yii

Ext4Yii is an application framework based on Sencha Ext JS and Yii. In this article, I’ll give you an overview of the Ext4Yii Framework.

What is Yii?

Yii is a high-performance PHP framework used for developing Web 2.0 applications. It’s free, fast, MVC driven, has many plugins and extensions, and it can help you develop your applications faster by using various MVC code generators. Developing with Yii typically involves three steps. First you create the database, then you invoke Yii to generate the base PHP code, and finally you go ahead and customize the code to fit your exact needs. Yii Framework has a large user community and is often known as one of the fastest PHP frameworks available to developers.

What is Ext4Yii?

Ext4Yii is an extension for Yii. It is based on a template rendering system, and it provides a server-side tag library for Ext JS components. Ext4Yii consumes XML templates where you can define application elements like buttons, grids, stores, and embedded JavaScript. The XML tags are then parsed and converted to Ext JS, cached to be reused and then sent to the browser.

Ext4Yii generates a transparent glue between Ext JS and Yii. It takes care of bootstrapping Ext JS, generates event listeners, handles application-wide events (global custom events) and most important of all it uses Ext.Direct for data communication between Ext JS components and backend PHP classes.

Ext4Yii comes with several PHP base classes that can be derived to create Data Lookup Controllers, CRUD Controllers, Form Controllers and TreeStore Controllers in PHP. You point to these classes in your XML template, and Ext4Yii generates JavaScript for data communication and exception handling.

Developing data driven modules in Ext4Yii typically involves four steps. First, you define the UI elements (e.g. GridPanel), and then you define the Data elements (e.g. Store and Model). Next, you derive and implement a PHP controller class (e.g. ExtLookupStoreController), and finally you set your UI component to point to the store and the store to point to the controller. Once the templates are rendered, Ext4Yii takes care of proxy generation, object creation and several other steps which are needed to get everything going.

Here is an example of a Model, Store, and UI in Ext4Yii:

Here is an example of a controller. In this example, we query the database and export the data to Ext JS:

To handle events, Ext4Yii provides an easy way to embed JavaScript functions which will be rendered as event listeners on a given component.

It is also possible to invoke a PHP function from JavaScript with Ext4Yii. All you need to do is to derive from ExtController and tag your function with @direct and an Ext.Direct proxy will be generated to be used from JavaScript.

Here it shows how we invoke the remote method:

Ext4Yii templates

For almost every Ext JS component, Ext4Yii provides an XML tag with several attributes which map to their corresponding Ext JS config options. Based on component specification, each XML tag can be nested with several property tags which map to more complex parts of an Ext JS component. We created a user friendly solution to help developers create these templates with ease, so they wouldn’t have to hand-code XML or constantly refer to the API documentation.

To solve this problem, Ext4Yii comes with a handy code-completion plugin for NetBeans IDE. This plugin not only auto-completes component tags, it also provides ad-hoc Ext JS documentation which reduces the need to go back and forth between the API documentation and your code. You just type “<” and based on the context of where the cursor is standing, NetBeans will popup a list of tags and attributes to choose from.

Because Ext4Yii templates are essentially PHP files, you can make use of inline PHP, for example the “include()” function to construct complex UI elements from simpler snippets.

Summary

Using any additional layer on top of another in software development has its pros and cons and Ext4Yii Framework is no exception to that. So here is a short summary of advantages and disadvantages of using this product:

• Using NetBeans IDE is a requirement because otherwise hand coding XML templates would be counterproductive. However constructing the templates becomes very easy if you use the NetBeans plugin, and you get to write much less JavaScript to develop your application.
• Ext4Yii is a commercial product, so you need to have a license to be able to use it in your organization. In exchange, you get support and a special arrangement if you already have an Ext JS license.
• You need to be familiar with Yii Framework, but Yii is easy to learn and extremely powerful considering the large number of extensions available to the community.
• Ext4Yii uses template rendering. This means that there is always an additional step the server has to perform before Ext JS code is produced for your browser. In exchange, you get the opportunity to custom tailor Ext JS components based on business rules on the server.

Where to find more information

• Ext4Yii Framework Website
• API examples
• Try Ext4Yii
• Check out some videos

History

Ext4Yii is developed at TrueSoftware B.V, a software development company based in The Netherlands where we focus on Web development and PostgreSQL. We started developing Ext4Yii as a basis for a systemic risk management solution used by the finance industry. Later, Ext4Yii was adopted to develop a fairly large design and management solution used by the chip design industry. We embarked on developing Ext4Yii as a standalone product after TrueSoftware was granted an Ext JS OEM license by Sencha in 2010.

Future

We keep working on Ext4Yii because we use it ourselves to develop products, and we continuously seek to make it better. We are working with Bryntum AB to provide a bridge for Ext Scheduler and Ext Gantt. Here is a sneak preview: