In this example series I will show you something that might save you some headache – using ExtJS 4 AJAX controls with IIS 6+ running MS AJAX Extensions 1.0. We will need to make a custom proxy for use in stores, which are utilized throughout ExtJS4, i.e. in a combo:
Data will travel back and forth between our server-side C# code and client-side ExtJS 4 in efficient JSON packets, such as: {param:’test’}
Continue reading ASP.NET AJAX & ExtJS 4 in 2-way JSON (1)
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.
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' } ]; |
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:
... // Create 2 fieldsets Ext.create('Ext.container.Container',{ renderTo: Ext.getBody() , defaults: { xtype: 'mc_fieldsetdynamiccontrols' , margin: 10 } , items: [ { title: 'Search Filter 1' } , { title: 'Search Filter 2' } ] }); ... |
In this example we’ll add a drop-down menu to the [+] button and set up a simple combo box with a store:
