[ExtJS5 Study note] section 21st Extjs5 using config to pass parameters to Ext.widget or create method

This address: http://blog.csdn.net/sushengmiyan/article/details/39252805

Official Example: Http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.Class-cfg-config

This article Sushengmiyan

--------------------------------------------------------------------------------------------------------------- ---------------------

For the use of EXTJS5, I am accustomed to using the Ext.define method to define a class, and then use the Extend property to inherit an Ext existing class, and then set alias alias, and finally configure the properties, the format is as follows:

Ext.define (//Use Ext.define to define a class  ' argtest.view.form.BaseForm ',//The class name is BaseForm exists in the Argtest project, In the View folder under the form folder is the Baseform.js file as the existence of  {    extend: ' Ext.form.Panel ',//inherited from the Ext class, equivalent to rewrite the    alias: ' Widget.baseform ',//Set up aliases, later use can take BaseForm to get the    title: ' abc ',  //component initialization, after the construction method to execute    initcomponent: function () {this.items = []; this.callparent (arguments);}});

So I've defined a baseform that when used later, I can introduce this class through uses and then use Ext.widget (' BaseForm ') to get the object. But now there is a problem, I want to give this object certain characteristics, such as I want to give a title to form, then we do this, ext.widget (' BaseForm ', {title: ' Custom title '})

In this case, each call will be created according to the title you set up to create the form, but now the problem is that the title is the form comes with, so you write it right, but I want to pass in a self-defined data what to do?

This is the time to use the Config property.

We do this:

In the define definition, set the Config property:

Ext.define (  ' Argtest.view.form.BaseForm ',  {    extend: ' Ext.form.Panel ',    alias: ' Widget.baseform ', Title: ' abc ', config:{  fields:undefined},  //component initialization, executing    initcomponent:function () {this.items = [] after construction method; var me = this;         var fieldsets = This.fields; Ext.each (FieldSets, function (Onefieldset, fieldindex) {   console.log (onefieldset);   Me.items.push (onefieldset);   Console.log (Me.items); }); This.callparent (arguments);}});

At the time of invocation, pass in one of these:

var form = ext.widget (' BaseForm ', {fields:me.fields});

This principle, look at http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.Class-cfg-config this can be.

Here is an example of a parameter pass I wrote, which you can look at:

One, use Sencha cmd to generate a default EXTJS5 project

Second, in the app folder under the View Directory definition two package form and window to create basewindow.js and baseform.js files, respectively, the code is as follows:

Ext.define (  ' Argtest.view.window.BaseWindow ',  {  extend: ' Ext.window.Window ',  alias: ' Widget.basewindow ',  uses: [' Argtest.view.form.BaseForm '],  autoshow:true,  config: {fields    : Undefined  },  closeaction: ' Hide ',  //Initialize to an empty array, post-use push method to add components      items: [],    //component initialization, execution after construction method      initcomponent:function () {   var me = this;           var form = ext.widget (' BaseForm ', {fields:me.fields});   Me.items = [form];       Console.log (me.items);   This.callparent (arguments);  }    });

Ext.define (  ' Argtest.view.form.BaseForm ',  {    extend: ' Ext.form.Panel ',    alias: ' Widget.baseform ', Title: ' abc ', config:{  fields:undefined},  //component initialization, executing    initcomponent:function () {this.items = [] after construction method; var me = this;         var fieldsets = This.fields; Ext.each (FieldSets, function (Onefieldset, fieldindex) {   console.log (onefieldset);   Me.items.push (onefieldset);   Console.log (Me.items); }); This.callparent (arguments);}});

Third, modify the Miancontroller.js button click function

/** * This class was the main view for the application. It is specified in App.js as the * "Autocreateviewport" property. That setting automatically applies the ' viewport ' * plugin to promote that instance of this class to the BODY element. * * Todo-replace This content of this view to suite the needs of your application. */ext.define (' Argtest.view.main.MainController ', {extend: ' Ext.app.ViewController ', uses: [' Argtest.view.window.Ba        Sewindow '], requires: [' Ext.messagebox '], alias: ' Controller.main ', onclickbutton:function () { Ext.Msg.confirm (' Confirm ', ' is you sure? ', ' onconfirm ', this); var win = Ext.widget (' Basewindow ', {fields:this.get        ViewModel (). Get (' Tf_fields ')});    Win.show ();//console.log (This.getviewmodel (). Get (' tf_fields ')); }, Onconfirm:function (choice) {if (choice = = = ' Yes ') {//}}});

Modify the data in the Mainmodel to increase the definition of the field collection:

/** * This class is the view model for the Main view of the application.        */ext.define (' Argtest.view.main.MainModel ', {extend: ' Ext.app.ViewModel ', alias: ' Viewmodel.main ', data: { Name: ' Argtest ', tf_fields: [{//FieldSet in Column 1-collapsible via toggle button xtype: ' F Ieldset ', columnwidth:0.5, title: ' FieldSet 1 ', Collapsible:true, de                  Faulttype: ' TextField ', defaults: {anchor: ' 100% '}, Layout: ' Anchor ', items: [{ Fieldlabel: ' First Name ', Name: ' First ', allowblank:false},              {fieldlabel: ' Last Name ', Name: ' Last ', Allowblank:false              }]},{//fieldset in Column 1-collapsible via toggle button xtype: ' FieldSet ',              columnwidth:0.5, Title: ' FieldSet 2 ',Collapsible:true, DefaultType: ' TextField ', defaults: {anchor: ' 100% '}, layout: ' A                  Nchor ', items: [{fieldlabel: ' First Name ', Name: ' First ',                  Allowblank:false},{Fieldlabel: ' Last Name ', Name: ' Last ', Allowblank:false}]}]}//todo-add data, formulas and/or methods to support your view} );

All right. This has been modified to completion. Now what is done is to speak Mainmodel in the custom Tf_fields array content, the way to install the transfer, the array into the display of the form, and finally you click on the button, the display of the interface is this:

Later want to modify this interface, do not need to modify the other things, only need to modify the contents of the maimodel.js, so it is more convenient.

[ExtJS5 Study note] section 21st Extjs5 using config to pass parameters to Ext.widget or create method