What Is ExtJS ExtJS 4+ Extensions Examples Tutorials

21May/122

ExtJS 4.1 Fieldset Icons

Last year I had this working with ExtJS 4.0.x - see here.

Since ExtJS 4.1 came out, Sencha made some significant changes to the internal structure of the fieldset and this customization stopped working. Here's newest override that will work with 4.1:

VN:F [1.9.22_1171]
Rating: 6.1/10 (8 votes cast)
27Feb/120

Another ExtJS Pro Shop!

I came across a second company that develops and sells custom ExtJS components: Bryntum. Check out their amazing Gantt Demo:

...this is all drag-and-drop, in browser! Even works in IE! Windows-GUI-quality component!

They have a few more components, but this one just blows my mind.  I've always believed in ExtJS, but now i see that it truly is the next stage in evolution of JavaScript. Sencha, you will cash in big. Now there are at least 2 pro shops who will as well.

If there are more companies out there, please let me know; only other one I heard of is Extensible.

VN:F [1.9.22_1171]
Rating: 6.5/10 (4 votes cast)
20Feb/120

Extensible: 3rd Party Plugins

I have Google Alerts set up to email me any new content for "ExtJS" every week.  I think that's how I came across Extensible - a professional 3rd party ExtJS component developer. Just take a look at their Calendar component demos:

VN:F [1.9.22_1171]
Rating: 7.0/10 (3 votes cast)
7Dec/110

Fieldset /w Dynamic Controls (9)

Leveraging ExtJS4 Store

In this example we will expand on our already-functional fieldset extension by adding an extra column to the store - "config". This is an excellent example of the flexibility that ExtJS 4 MVC (Model View Controller) architecture allows.

VN:F [1.9.22_1171]
Rating: 6.7/10 (9 votes cast)
6Dec/110

Fieldset /w Dynamic Controls (8)

Complete MVC Controller

In this example we will complete our ExtJS 4 MVC extension by implementing the controller. The outcome is a fully-functional fieldset with dynamic control inputs:

...and our inputs are easy to provide via JSON data:

// Possible inputs
Ext.namespace('MyCompany.globals.FieldsetDynamicControls');
MyCompany.globals.FieldsetDynamicControls.possibleValues = [
    { label: 'Display Name', name: 'displayName' }
    , { label: 'First Name', name: 'givenName' }
    , { label: 'Middle Name', name: 'initials' }
    , { label: 'Last Name', name: 'sn' }
];
VN:F [1.9.22_1171]
Rating: 6.3/10 (8 votes cast)
Page 1 of 3123