Learn Extjs5 with me (16--custom rendering for various grid columns)

Learn Extjs5 with me (16--custom rendering for various grid columns)grid columns can be displayed. The types of columns include character, integer, float, currency, percent, date, and Boolean, and I've customized various types of rendering styles:1. Integer: The title bar is centered, the value is displayed on the right, the positive color is blue, the negative color is red, and 0 is not displayed. 2, floating point: The title bar is centered, the value is displayed on the right, the positive color is blue, the negative color is red , two decimal places are displayed, and 0 is not displayed. 3, currency type: With floating-point type, but can choose different units, such as yuan, thousand, million, million yuan, billion yuan. The data is displayed in a sub-section. 4, Percent type: a percentage of the custom display, with values and images to represent the percentage of the image. 5, Date type: The display format is y-m-d, the color is dark yellow.
Let's take a look at the finished results.

The following are the functions that generate custom renderer for these fields. Create a file renderer.js under app/ux/.

/** * This stores the various custom methods of the grid's column renderer */ext.onready (function () {//can make a control to modify these two properties to achieve the purpose of modifying the unit of amount Ext.monetarytext = ' million ' ; The amount to be appended to the number unit Ext.monetaryunit = 10000;//ext.monetary = ' billion ';//Ext.monetaryunit = 10000*10000;if (ext.util && Ext . util. Format) {ext.apply (Ext.util.Format, {//Amount field Monetaryrenderer:function (val) {if (val) {if (Ext.monetaryunit && E Xt.monetaryunit! = 1) val = val/ext.monetaryunit;//positive number is shown in blue, negative numbers show return ' <span style= ' color: ' + (val > 0?) ' Blue ': ' Red ') + '; float:right; > ' + Ext.util.Format.number (val, ' 0,000.00 ') + ext.monetarytext + ' </span> ';} Elsereturn "; If 0, the},//date Daterenderer:function (val) {return ' <span style= "color: #a40;" is not displayed. > ' + Ext.util.Format.date (val, ' y-m-d ') + ' </span> ';},//integer variable floatrenderer:function (val, RD, model, row, col, St Ore, GridView) {return ' <span style= ' color: ' + (val > 0?) ' Blue ': ' Red ') + '; float:right; > ' + (val = = 0?) ": val) + ' </span> ';},//integer variable intrenderer:function (Val, RD, model, row, col, store, GridView) {return ' <span style= ' color: ' + (val > 0?) ' Blue ': ' Red ') + '; float:right; > ' + (val = = 0?)  ": val) + ' </span> ';},//percent Percentrenderer:function (v, RD, model) {v = v * 100;var v1 = v > 100:v;v1 = V1 < 0? 0:v1;var v2 = parseint (v1 * 2.55). ToString (+); if (v2.length = = 1) v2 = ' 0 ' + v2;return Ext.String.format (' <div> ' + ' <div style= ' float:left;border:1px solid #008000; height:15px;width:100%; > ' + ' <div style= "float:left;text-align:center;width:100%;color:blue;" >{0}%</div> ' + ' <div style= "background: #FAB2 {2};width:{1}%;height:13px;" ></div> ' + ' </div></div> ', V, v1, v2)},//the Namefields field of the module is shown in bold Namefieldrenderer:function (Val, Rd, model, row, col, store, GridView) {return (' <strong> ' + val + ' </strong> ');}})};

This file cannot be added with uses or requires when it is called, and it needs to be introduced in HTML. In the EXTJS5, you can directly modify the App.json and Bootstrap.json under/war/to enter. First open the App.json, find the meaning of "JS", first add the international Chinese package, and then add Renderer.js. Add the following:

    "JS": [        {            "path": "App.js",            "bundle": True        }, {        "path": "Ext/packages/ext-locale/build/ Ext-locale-zh_cn.js "        }, {        " path ":" App/ux/renderer.js "        }    ],

Open Bootstrap.json, this file is very large, open after the first format, and then move the file Finally, add the above two JS file. (If you don't want to do this manually, you can use the ' Sencha app build ' command to automatically generate the latest Bootstrap.json).

after modifying the above two JSON configuration file, you need to add the corresponding rendering method in Columnfactory.js. Only some of the code in the file is listed below:

Switch (fd.tf_fieldtype) {case ' Date ': ext.apply (field, {xtype: ' Datecolumn ', align: ' center ', Width:100,formatter: ' Da Terenderer ',//the render function defined in Ext.util.Format can call editor in this way: {//If you need inline modification, you need to include this property xtype: ' Datefield ', format: ' y-m-d ',  Editable:false}}); Break;case ' Datetime ': ext.apply (field, {xtype: ' Datecolumn ', align: ' center ', Width:130,formatter: ' Daterenderer '}); Break;case ' Boolean ': field.xtype = ' checkcolumn '; field.stopselection = False;field.processevent = function (type) {//Add this sentence to prevent the point from modifying if (type = = ' click ') return false;};  Break;case ' Integer ': ext.apply (field, {align: ' center ', xtype: ' Numbercolumn ', tdcls: ' Intcolor ', Format: ' # ', formatter : ' Intrenderer ', editor: {xtype: ' Numberfield '}}); Break;case ' Double ': ext.apply (field, {align: ' center ', xtype: ' Numbe Rcolumn ', width:110,//renderer:Ext.util.Format.monetary,//This method is the same as the following method Formatter:fd.tf_isMoney//Judging is the amount type? ' Monetaryrenderer ': ' Floatrenderer ',//This method can also be editor: {xtype: ' Numberfield '}}); break;case' Float ': ext.apply (field, {align: ' center ', xtype: ' Numbercolumn ', Width:110,formatter: ' floatrenderer '//This method can also}); BR Eak;case ' Percent ': ext.apply (field, {align: ' center ', Formatter: ' Percentrenderer ',//xtype: ' Widgetcolumn ',//commented out Here Extjs5 the display method of the percentage type that comes with//widget: {//xtype: ' Progressbarwidget ',//TEXTTPL: [' {Percent:number ("0.00")}% ']//},editor: {xt ype: ' Numberfield ', step:0.01},width:110//Default width}) break;case ' String '://If this field is the Namefields of this module then bold displays if (Module.get ( ' tf_namefields ') = = Fd.tf_fieldname) ext.apply (field, {text: ' <strong> ' + fd.tf_title + ' </strong> ', Formatter: ' Namefieldrenderer '}); elseext.apply (field, {}); break;default:break;}

With the above operation, various types of custom rendering can be displayed correctly.