Learn extjs5 (16 -- custom rendering of various Grid columns) with me, extjs516 --

Learn extjs5 (16 -- custom rendering of various Grid columns) with me, extjs516 --
Join me to learn about extjs5 (16 -- custom rendering of various Grid columns). Each Grid column can be displayed. The column types include numeric, integer, floating point, currency, percentage, date, and Boolean. I have customized various rendering styles: 1. Integer: The title bar is centered, the value is displayed on the right. The positive value is blue, the negative value is red, and 0 is not displayed. 2. Float: The title bar is centered. The value is displayed on the right. The positive color is blue, the negative color is red, and the two decimal places are displayed. 3. Currency: the currency type is the same as the floating point type, but you can select different units, such as Yuan, thousand yuan, ten thousand yuan, one million yuan, and one million yuan. Data is displayed in different sections. 4. percent type: display of a custom percentage, indicating the percentage of a value and an image. 5. date type: the display format is Y-m-d, and the color is dark yellow.
Next, let's take a look at the results.

The following is a UDF used to generate these fields. Create File Renderer. js in app/ux.

/*** Various custom methods of the Grid column renderer are stored here */Ext. onReady (function () {// you can create a control to modify these two attributes to achieve Ext. monetaryText = 'wan'; // The unit of the sum after the number is Ext. monetaryUnit = 10000; // Ext. monetary = '100% '; // Ext. monetaryUnit = 10000*10000; if (Ext. util & Ext. util. format) {Ext. apply (Ext. util. format, {// amount field monetaryRenderer: function (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. return '<span style = "color:' + (val> 0? 'Blue': 'red') + '; float: right; ">' + Ext. util. format. number (val, '000000') + Ext. monetaryText + '</span>';} elsereturn ''; // if it is 0, it is not displayed.}, // Date dateRenderer: function (val) {return '<span style = "color: # a40;">' + Ext. util. format. date (val, 'Y-m-d') + '</span>';}, // integer variable floatRenderer: function (val, rd, model, row, col, store, 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>' ;}, // percentage percentRenderer: function (v, rd, model) {v = v * 100; var v1 = v> 100? 100: v; v1 = v1 <0? 0: v1; var v2 = parseInt (v1*2.55 ). toString (16); 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> ', v, v1, v2);}, // You Can bold the namefields field of the module to display nameFieldRenderer: function (val, rd, model, row, col, store, gridview) {return ('<strong>' + val + '</strong> ');}})};});

This file cannot be added using uses or requires during calling. It must be introduced in html. In extjs5, you can directly modify app. json and bootstrap. json under/war. First open app. json, find the meaning of "js", first add the International Chinese package, and then add Renderer. js. After the configuration is completed as follows:

    "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. After it is opened, format it, move the file, and add the above two js files. (If you do not want to perform this step manually, you can use the 'sencha app build 'command to automatically generate the latest bootstrap. json ).

After modifying the preceding two json configuration files, add the corresponding Rendering Method to ColumnFactory. js. Only part of the code in this file is listed below:

Switch (fd. tf_fieldType) {case 'date': Ext. apply (field, {xtype: 'datecolumn', align: 'center', width: 100, formatter: 'daterenderer', // defined in Ext. util. the rendering function in Format can use this method to call editor: {// if you need to modify it in the row, you need to add this attribute 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': f Ield. 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: 'numbercolumn', wid Th: 110, // renderer: Ext. util. Format. monetary, // This method is the same as the following formatter: fd. tf_isMoney // to determine whether it is of 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 be}); break; case 'percent ': Ext. apply (field, {align: 'center', formatter: 'percentrenderer', // xtype: 'widgetcolumn ', // The display method of the percentage type that extjs5 comes with is commented out here // widget: {// xtype: 'ssssbarcompon', // 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 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 ;}

After the above operations, various types of custom rendering can be correctly displayed.








Column rendering of grid in Ext

Of course you can, but your current writing is a bit problematic.
You can use return in the aaa function, and use return in the outer layer.
Renderer: function (value) {return aaa ("red", value }}