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.
Table of Contents
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 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.
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:
Here it shows how we invoke the remote method:
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.
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:
- 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 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.
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: