Learn Extjs5 with me (17--grid Amount field Unit MVVM mode selection)

Learn Extjs5 with me (17--grid Amount field Unit MVVM mode selection)
This section completes the conversion of the amount unit of the Amount field in the grid. The conversion 旰 uses the MVVM feature, which is similar in general to several modes of the Control menu. First set up the file monetary.js under directory App/view/main/menu, which is used to put the amount of units of data and generate menu items.

/** * Amount Unit of Management class */ext.define (' App.view.main.menu.Monetary ', {statics: {values:null,getallmonetary:function () {if (!thi S.values) {//Initialize various amount units yuan thousand million yuan billion yuan this.values = new Ext.util.MixedCollection (); This.values.add (' Unit ', This.createamo Netary (', 1, ' Yuan ')); This.values.add (' Thousand ', This.createamonetary (' thousand ', 1000, ' thousand ')); This.values.add (' Tenthousand ', this.createamonetary (' million ', 10000, ' million ')); This.values.add (' million ', This.createamonetary (' M ', 100 * 10000, ' million Yuan ')); This.values.add (' Hundredmillion ', this.createamonetary (' billion ', 10000* 10000, ' billion '));} Return this.values;},//in the Build menu Itemsgetmonetarymenu:function () {var items = [];this.getallmonetary (). Eachkey (function (Key, item) {Items.push ({Text:item.unittext,value:key})}) Return Items;},createamonetary:function (Monetarytext, Monetaryunit, Unittext) {return {monetarytext:monetarytext,// The amount of text followed by the value, such as 1 million monetaryunit:monetaryunit,//Displays the value of the molecule Unittext:unittext//followed by the unit following the field such as the contract amount (million)}},getmoneta Ry:function (key) {RETUrn This.getallmonetary (). get (key);}}) 

Add a menu item to the Settingmenu.js

{text: ' Amount unit ', menu: [{xtype: ' Segmentedbutton ', reference: ' Monetary ',//Added this sentence, can trigger bind bind event when changing data defaultui: ' Defa Ult ', Value: ' Tenthousand ', Items:app.view.main.menu.Monetary.getMonetaryMenu ()}]}

the resulting menu is as follows:

In Mainmodels.js, under the Data property, add

Monetary: {//amount unit value: ' Tenthousand '//default million, you can get personal preferences later from the background, or stored in cookies},

Add an amount Change event binding and execution function in Maincontroller.js.

Init:function () {var vm = This.getview (). Getviewmodel ();//The program Vm.bind (' {monetary.value} ') to be executed after the binding amount unit has been modified, the function ( Value) {This.onmonetarychange (value);}, this)},//amount unit modified after execution Onmonetarychange:function (value) {console.log (' Amount unit change: ' + value '; var m = app.view.main.menu.Monetary.getMonetary (value); Ext.monetarytext = M.monetarytext; Sets the current global amount Unit ext.monetaryunit = m.monetaryunit; Ext.each (This.getview (). Query (' Modulegrid '), function (grid) {if (grid.rendered) {Grid.getview (). Refresh (); Ext.Array.forEach (Grid.columnManager.getColumns (), function (column) {//If you can change the size, and is the Amount field, after you change the amount unit, automatically adjust the column width if (! column.resizedisabled && column.fielddefine&& column.fieldDefine.tf_isCurrency) {column.autosize () ;}})}});}

This method can also be used when binding:Vm.bind (' {Monetary.value} ',' Onmonetarychange ', This);

After these steps, you can change the amount unit on the basis of the previous section and refresh the Amount field in all open grids in real time, and refresh the column widths later for the Amount field.





Shown above shows the value of the Amount field after the converted amount unit. The process of the event flow is as follows:


for the grid column automatically adapt to the width, after a half-day study, make it clear that the renderer, the return should be non-tagged value, the specific style placed indefined in metadata. For example, the amount of the Renderer function is modified to: (the original function looks at a section)

Amount Field Monetaryrenderer:function (Val, metaData, model, row, col, store, GridView) {if (val) {if (Ext.monetaryunit && Amp Ext.monetaryunit! = 1) val = val/ext.monetaryunit;//positive number is shown in blue, negative numbers are shown in red, the CSS must be set separately from the returned values, otherwise it cannot be autosize () Metadata.style = ' Color: ' + (val > 0?) ' Blue ': ' Red ') + '; float:right; '; Return Ext.util.Format.number (Val, ' 0,000.00 ') + Ext.monetarytext;} Elsereturn "; If 0, the} is not displayed

The original attribute of the style is placed in the return value inside, so that in the automatic adaptation to the width of the time, ExtJS can not calculate how wide, so separate settings, automatically adapt to the width of normal. And then in the definition of column to be modified, can not be usedformatter, but to userenderer. For example, the data for an integral type is changed to this:

Case ' Integer ': ext.apply (field, {align: ' center ', xtype: ' Numbercolumn ', Format: ' # ', renderer:Ext.util.Format.intRend erer,//formatter: ' Intrenderer ', editor: {xtype: ' Numberfield '}};