15. Teach you Extjs5 (15) custom rendering of 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/.

/** * Here are a variety of custom methods that store the grid's column renderer*/Ext.onready (function () {    //you can make a control to modify these two properties to achieve the purpose of modifying the unit of amount.Ext.monetarytext = ' million ';//unit of amount added to the numberExt.monetaryunit = 10000; //ext.monetary = ' billion ';    //ext.monetaryunit = 10000*10000;    if(Ext.util &&Ext.util.Format) {ext.apply (Ext.util.Format, {//Amount FieldMonetaryrenderer:function(val) {if(val) {if(Ext.monetaryunit && Ext.monetaryunit! = 1) Val= val/Ext.monetaryunit; //positive numbers are shown in blue, negative numbers are shown in red                    return' <span style= ' color: ' + (val > 0?) ' Blue ': ' Red ')                            + '; float:right; > ' + Ext.util.Format.number (val, ' 0,000.00 ')                            + Ext.monetarytext + ' </span> '; } Else                    return‘‘;//if 0, it is not displayed            },            //DateDaterenderer:function(val) {return' <span style= ' color: #a40; " > ' + Ext.util.Format.date (val, ' y-m-d ') + ' </span> '; },            //integer variableFloatrenderer:function(Val, RD, model, row, col, store, gridview) {return' <span style= ' color: ' + (val > 0?) ' Blue ': ' Red ')                        + '; float:right; > ' + (val = = 0?) ": val) + ' </span> '; },            //integer variableIntrenderer:function(Val, RD, model, row, col, store, gridview) {return' <span style= ' color: ' + (val > 0?) ' Blue ': ' Red ')                        + '; float:right; > ' + (val = = 0?) ": val) + ' </span> '; },            //percentagePercentrenderer:function(V, RD, model) {v= v * 100; varV1 = v > 100? 100: v; V1= V1 < 0? 0: v1; varV2 = parseint (v1 * 2.55). toString (16); if(V2.length = = 1) V2= ' 0 ' +v2; returnext.string. Format (' <div> ' + ' <div style= ' float:left;border:1px solid #008000; height:15px;wid th: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); },            //bold display of the Namefields field of the moduleNamefieldrenderer: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",        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:' Daterenderer ',//The render function defined in Ext.util.Format can be called in this wayEditor: {//If you need inline modification, you need to include this propertyXtype: ' 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) {//by adding this sentence, you can 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:' Numbercolumn ', Width:110,            //renderer:Ext.util.Format.monetary,//This method is the same as the following methodFormatter:fd.tf_isMoney//determines whether the amount is of type? ' Monetaryrenderer '                    : ' Floatrenderer ',//This method can alsoEditor: {xtype:' Numberfield '            }        });  Break;  Case' Float ': ext.apply (field, {align:' Center ', Xtype:' Numbercolumn ', Width:110, Formatter:' Floatrenderer '//This method can also        });  Break;  Case' Percent ': ext.apply (field, {align:' Center ', Formatter:' Percentrenderer ',            //xtype: ' Widgetcolumn ',//commented out Here is the display method of the percentage type that EXTJS5 comes with            //Widget: {            //xtype: ' Progressbarwidget ',            //TEXTTPL: [' {Percent:number ("0.00")}% ']            // },Editor: {xtype:' Numberfield ', Step:0.01}, Width:110//Default Width        })         Break;  Case' String ':        //If this field is the Namefields of this module, the bold display        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.

15. Teach you Extjs5 (15) custom rendering of various grid columns