Learn extjs5 with me (17 -- select the Grid amount field unit MVVM mode)

Learn extjs5 with me (17 -- select the Grid amount field unit MVVM mode)
Learn extjs5 with me (17 -- select the Grid amount field unit MVVM mode)
This section converts the amount unit of the amount field in the Grid. The conversion pipeline uses the MVVM feature, which is similar to the control menu mode in general. First, create the file Monetary. js under the app/view/main/menu Directory, which is used to store the amount unit data and generate the menu items.

/*** Management class of the amount unit */Ext. define ('app. view. main. menu. monetary ', {statics: {values: null, getAllMonetary: function () {if (! This. values) {// initialize various amounts of RMB, 000 yuan, million yuan, and Yuan. this. values = new Ext. util. mixedCollection (); this. values. add ('unit ', this. createAMonetary ('', 1, 'meta'); this. values. add ('thousand', this. createAMonetary ('kilobytes, 1000, 'kilobytes '); this. values. add ('tenthousand', this. createAMonetary ('000000', 10000, '000000'); this. values. add ('million', this. createAMonetary ('M', 100*10000, 'Million yuan '); this. values. add ('hundredmillion', this. createAMonetary ('100 billion ', 10000*10000, '100 billion yuan');} return this. values;}, // generate itemsgetMonetaryMenu in the menu: 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 unit text following the value, for example, 1 million monetaryUnit: monetaryUnit. // The displayed value must be divided into unitText: unitText // The unit following the field, such as the contract amount (CNY) }}, getMonetary: function (key) {return this. getAllMonetary (). get (key );}}})

Add a single dish in SettingMenu. js

{Text: 'amount unit ', menu: [{xtype: 'segmentedbutton', reference: 'Monetary ', // adds this sentence, when changing data, you can trigger the bind binding event defaultUI: 'default', value: 'tenthousand', items: app. view. main. menu. monetary. getMonetaryMenu ()}]}

The generated menu is as follows:

Add the following content to the data attribute in MainModels. js:

Monetary: {// unit value: 'tenthousand' // The default value is RMB. You can obtain your personal preference settings from the background or store them in cookies },

Add the amount change event in MainController. js to bind and execute functions.

Init: function () {var vm = this. getView (). getViewModel (); // The vm of the program to be executed after the bound amount unit is modified. bind ('{monetary. value} ', function (value) {this. onMonetaryChange (value) ;}, this)}, // The 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 monetary unit Ext. monetaryUnit = m. monetaryUnit; Ext. each (this. getVi Ew (). query ('lelegrid'), function (grid) {if (grid. rendered) {grid. getView (). refresh (); Ext. array. forEach (grid. columnManager. getColumns (), function (column) {// if the size can be changed and the value field is used, the if (! Column. resizeDisabled & column. fieldDefine & column. fieldDefine. tf_isCurrency) {column. autoSize ();}})}});}

You can also use this method when binding: vm. bind ('{monetary. value}', 'onmonetarychang', this );

After the above steps, you can change the amount unit on the basis of the previous section, and refresh all the amount fields in the opened Grid in real time, after refreshing, the column width will be adjusted again for the amount field.





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


After half a day of research, I learned that the column of the Grid automatically adapts to the width, that is, in Renderer, the returned value should be the value without tags. The specific style is defined in metaData. For example, the Renderer function of the amount is changed to: (the original function is shown in the previous section)

// Amount field monetaryRenderer: function (val, metaData, model, row, col, store, gridview) {if (val) {if (Ext. monetaryUnit & Ext. monetaryUnit! = 1) val = val/Ext. monetaryUnit; // The positive value is displayed in blue, and the negative value is displayed in red. The css and returned values must be set separately. Otherwise, autoSize () metaData is not allowed. style = 'color: '+ (val> 0? 'Blue': 'red') + '; float: right;'; return Ext. util. format. number (val, '000000') + Ext. monetaryText;} elsereturn ''; // if it is 0, it is not displayed}

The original attribute of the style is placed in the returned value. In this way, extjs cannot calculate how wide it is when it automatically adapts to the width. In this way, it is normal to automatically adapt to the width after being set separately. Then you need to modify the column definition. You must use renderer instead of formatter. For example, you need to change the integer data to the following:

case 'Integer' :Ext.apply(field, {align : 'center',xtype : 'numbercolumn',format : '#',renderer : Ext.util.Format.intRenderer,// formatter : 'intRenderer',editor : {xtype : 'numberfield'}});break;