What Is ExtJS ExtJS 4+ Extensions Examples Tutorials


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
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)

Fieldset /w Dynamic Controls (7)

Implement MVC

In this example we'll split up our code using ExtJS 4 MVC (Model View Controller) framework. De-coupling our models, views, and controllers makes the code very easy to modify later. This will come in handy when we have to add various input types later. Also, we will now be able to clone our fieldset with very little code:

...with this little code:


// Create 2 fieldsets
    renderTo: Ext.getBody()
    , defaults: { 
        xtype: 'mc_fieldsetdynamiccontrols'
        , margin: 10 
    , items: [
        { title: 'Search Filter 1' }
        , { title: 'Search Filter 2' }
VN:F [1.9.22_1171]
Rating: 5.8/10 (6 votes cast)

Fieldset /w Dynamic Controls (6)

Adding drop-down menu for the [+] "Add" button

In this example we'll add a drop-down menu to the [+] button and set up a simple combo box with a store:

VN:F [1.9.22_1171]
Rating: 6.0/10 (4 votes cast)

Fieldset /w Dynamic Controls (5)

Adding [X] "Remove" button to an input

In this example we'll use some CSS magic and DOM manipulation to achieve the following layout. You might think this is easy to do with native layouts in ExtJS4, but I've found otherwise.

VN:F [1.9.22_1171]
Rating: 5.5/10 (2 votes cast)

Fieldset /w Dynamic Controls (4)

Adding [+] "Add" button to fieldset

In this example we'll use some CSS magic to put a button in the upper right corner of the fieldset. The button will be a child of our fieldset, so that when you collapse/expand the fieldset, the button behaves appropriately.

VN:F [1.9.22_1171]
Rating: 7.0/10 (3 votes cast)
Page 13 of 14« First...1011121314