JS Days 2025 is now live – Join 5,000+ devs for the premier virtual JavaScript event. Register Now

Customer Spotlight: Ext4Yii

January 3, 2013 616 Views
Show

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

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:

Recommended Articles

Guide to Estimating ROI When Switching From DIY Libraries to Full Software Development Platforms Like Ext JS

Teams started with Do It Yourself, or DIY, JavaScript tools like jQuery and Bootstrap. But those fall apart as projects scale. Scattered code, user interface…

Top Frameworks Developers Are Using for Custom Software Development in 2025

We’re seeing it more every year; teams aren’t settling for plug-and-play tools anymore. In healthcare, finance, logistics, and other data-heavy industries, there’s a clear shift.…

Meet Sencha AI Coding Companion: Your AI-Powered Assistant for Faster Ext JS Development

Building modern web applications should be exciting. But too often, developers find themselves buried in documentation, endlessly Googling framework quirks, or stuck solving the same…

Ext JS 7.9 & Rapid Ext JS V1.1 Have Arrived

The Sencha team is excited to announce the latest Ext JS version 7.9 and Rapid Ext JS 1.1 release – designed to accelerate development, enhance…

Top 10 JS Grid Customization Tips for a Better UI Experience

Grids are pretty much everywhere in web apps. Working with financial sheets, product details, or users? Then you’ve probably used a JavaScript grid. It makes…

Why Ext JS Framework is the Go-To Framework for Building Scalable and Data-Intensive Web Apps

Web apps are much more advanced now. They deal with large amounts of data and need to stay fast, even with many users. If you’re…

View More

Trusted by Top Developers: Learn how to enhance your development journey — for free

Get the latest newsletter keeping thousands of developers in the loop.

Loved by developers at