Learn With Me extjs5 (14 -- module field and Grid column Definition [1]), extjs514 --

Learn With Me extjs5 (14 -- module field and Grid column Definition [1]), extjs514 --
Join me to learn the extjs5 (14 -- module field and Grid column Definition [1]) Section, add module custom fields, and generate model based on these fields. Then define the group and column in the grid. From this point on, we have truly entered the custom module rhythm, and the complexity and skill of the Code have been greatly improved. Start with customizing the module fields. Let's take a look at the new definition added to ModuleModel. js:

/*** Data model of the module */Ext. define ('app. view. module. moduleModel ', {extend: 'ext. app. viewModel ', alias: 'viewmodel. module ', // during the development process, I first put the set value in data. When you customize it later, the values in data are obtained from the background // all fields in the database. I start with tf _ to indicate that this is the data: {tf_moduleId: '20140901', // module ID: the ID number of a number. You can place modules of the same group in the order of ID numbers. Tf_ModuleGroup: 'Project management', // module grouping: group to which the module is assigned, such as business module 1, business module 2, system settings, and system management. Tf_moduleName: 'global', // module identifier: the identifier of a unique module in the system. tf_title: 'Project Project', // Module name: the name that can describe the module information. Tf_glyph: 0xf0f7, // The icon character value tf_shortname: null, // module Abbreviation: if the name is too long, it can be replaced by abbreviation in some places. Tf_englishName: null, // English name of the module: in case you want to make an English version, you can use an English name. Tf_englishShortName: null, // module Abbreviation: can be used to generate encoding fields. Tf_description: null, // module Description: tf_remark: null, // remarks: // there are still a number of fields not added, and tf_primaryKey: 'tf _ id' will be added for later use ', // primary key tf_nameFields: 'tf _ name', // The field that can be used to describe the record. // The Custom field of this module is manually defined here, in the future, replace tf_fields: [{tf_fieldId: 10100010, // The id value of this field. All fields are saved in the field table, which is the primary key value tf_fieldName: 'tf _ id', // field name tf_title: 'sequence number ', // field description tf_fieldType: 'integer', // field type tf_isHidden: true, // whether it is a hidden field tf_fieldGroup: 'Project basic information' // field group // whether the field is hidden}, {tf_fieldId: 10100020, tf_fieldName: 'tf _ name', tf_title: 'Project name', tf_fieldType: 'string', tf_fieldLen: 50, tf_isRequired: true, // is it required? tf_fieldGroup: 'Project basic information'}, {tf_fieldId: 10100030, tf_fieldName: 'tf _ Code ', tf_title: 'Project Code', tf_fieldType: 'string', tf_fieldLen: 20, tf_isRequired: true, tf_fieldGroup: 'Project basic information' // field group}, {tf_fieldId: 10100040, // Add an Integer field tf_fieldName: 'tf _ squaremeter ', tf_title: 'Building area', tf_fieldType: 'integer ', tf_unitText: 'square meters', // The Unit of the Field tf_fieldGroup: 'additional project information', tf_allowSummary: true // You Can subtotal this field}, {tf_fieldId: 10100050, // Add an amount field tf_fieldName: 'tf _ budget ', tf_title: 'Total investment ', tf_fieldType: 'double', tf_isMoney: true, // This field is an amount field tf_fieldGroup: 'additional project information', tf_allowSummary: true}, {tf_fieldId: 10100060, // Add a percentage field tf_fieldName: 'tf _ 0000l', tf_title: 'area ratio ', tf_fieldType: 'percent', tf_fieldGroup: 'additional project information'}, {tf_fieldId: 10100070, // Add a Date tf_fieldName: 'tf _ startdate', tf_title: 'scheduled start time ', tf_fieldType: 'date', tf_fieldGroup: 'additional project information '}, {tf_fieldId: 10100080, // Add a Date tf_fieldName: 'tf _ enddate', tf_title: 'planned completion time', tf_fieldType: 'date', tf_fieldGroup: 'additional project information'}, {tf_fieldId: 10100090, // Add a Boolean field tf_fieldName: 'tf _ isvalid', tf_title: 'pass acceptance ', tf_fieldType: 'boolean ', tf_fieldGroup: 'additional project information'}, {tf_fieldId: 10100100, // Add a Value Field tf_fieldName: 'tf _ m3', tf_title: 'Project quantity ', tf_fieldType: 'double', tf_fieldGroup: 'additional project information'}], // The grid solution of the module. You can define multiple solutions tf_gridSchemes: [{tf_schemeOrder: 10, tf_schemeName: 'grid scheme 1', // first Grid scheme // table header group tf_schemeGroups: [{tf_gridGroupId: 1, // ID: tf_gridGroupOrder: 10, // table header Group No. tf_gridGroupName: 'Project basic information', tf_isShowHeaderSpans: true, // whether to display the group tf_isLocked: true, // whether to lock this group // The Field tf_groupFields: [{tf_gridFieldOrder: 10, tf_fieldId: 10100020, // Project Name field tf_columnWidth: 200}, {tf_gridFieldOrder: 20, tf_fieldId: 10100030, // project code field tf_columnWidth: 120}]}, {tf_gridGroupOrder: 20, // header Group No. tf_gridGroupName: 'additional project information', tf_isShowHeaderSpans: true, // whether headerspantf_isLocked is displayed: false, // whether to lock this group // The fields tf_groupFields: [{tf_gridFieldOrder: 10, tf_fieldId: 10100040 // building area}, {tf_gridFieldOrder: 20, tf_fieldId: 10100050 // total investment}, {tf_gridFieldOrder: 30, tf_fieldId: 10100060 // volumetric ratio}, {tf_gridFieldOrder: 40, tf_fieldId: 10100070 // planned start time}, {tf_gridFieldOrder: 50, tf_fieldId: 10100080 // planned completion time}, {tf_gridFieldOrder: 60, tf_fieldId: 10100090, // whether the tf_columnWidth: 80 },{ tf_gridFieldOrder: 70, tf_fieldId: 10100100 // Project Quantity}]}, // Based on the field id, find the corresponding field definition getFieldDefine: function (fieldId) {var result = null; Ext. array. each (this. data. tf_fields, function (field) {if (field. tf_fieldId = fieldId) {result = field; return false ;}}); return result ;}})

In the code above, the tf_fields array is added to data. Each element in this array is a field, for example:

{Tf_fieldId: 10100020, tf_fieldName: 'tf _ name', tf_title: 'Project name', tf_fieldType: 'string', tf_fieldLen: 50, tf_isRequired: true, // is it required? tf_fieldGroup: 'Basic project information '}

The above defines a Project Name field, including the ID number, field name, type, length, whether it is a required item, group information, and so on. In this project module, I added various types of fields, such as struct, integer, floating point, amount, date, and Boolean, to demonstrate the results. After the field is defined, you must be able to automatically generate a model based on the field definition. Below I have compiled a model factory class that can automatically generate a model according to the definition in ModuleModel. First create a new directory factory Under the module Directory, and then create a file ModelFactory. js under it. The content is as follows:

/*** Generate the model */Ext of the module based on the module data. define ('app. view. module. factory. modelFactory ', {// static variable or function statics: {// generate the module model. The input data is datagetModelByModule: function (moduleModel) {console. log ('lelemodel'); console. log (moduleModel); var module = moduleModel. data; return Ext. define ('app. model. '+ module. tf_moduleName, {extend: 'ext. data. model ', module: module, idProperty: module. tf_primaryKey, // Set the primary key nameFields of the module model: module. tf_nameFields, // set the name field fields of the module model: this. getFields (module), // set the field // obtain the primary key value getIdValue: function () {return this. get (this. idProperty) ;}, // get the name field getNameValue: function () {if (this. nameFields) return this. get (this. nameFields); elsereturn null ;}}) ;}, // generate the getFields: function (module) {var fields = [] for each field in the model based on the field literal array; for (var I in module. tf_fields) {var f D = module. tf_fields [I]; var field = {name: fd. tf_fieldName, title: fd. tf_title, type: this. getTypeByStr (fd. tf_fieldType)}; if (field. type = 'string') {field. useNull = true; field. serialize = this. convertToNull;} if (field. type = 'date') {field. dateWriteFormat = 'Y-m-d'; // you can specify the read/write format field of the date field. dateReadFormat = 'Y-m-d';} if (field. type = 'datetime') field. dateReadFormat = 'Y-m-d H: I: s'; fields. push (field );} Return fields;}, // convert the Data Type in java to the field type getTypeByStr: function (str) {switch (str) {case 'string ': return 'string'; case 'boolean': return 'boolean'; case 'integer': return 'int'; case 'date': return 'date'; case 'datetime ': return 'date'; case 'double': case 'float': case 'percent ': return 'float'; default: return 'string ';}}, // if it is an empty string, return nullconvertToNull: function (v) {return v? V: null ;}}});

The above is a class that generates the model. Next we will continue to look at the top ModuleModel. another attribute under data in js: tf_gridSchemes. The data under this attribute is used to define the group and column of the grid. tf_schemeGroups defines several groups, tf_groupFields defines the specific columns under these groups. These data will also be stored in the database. You only need to create three tables, one with the solution name, one with the group name, and the other with the field definitions under the group. When the table is modified, the data can be transmitted to the foreground. Re-presentation is a new grid column solution. In addition, multiple solutions can be developed to achieve full switchover on the interface. The following task is to generate columns for the grid, which is the same as the method used to generate the model above. A ColumnFactory. js program is created to generate columns Based on the configuration file.

/*** Class used to generate the Columns of the Grid */Ext. define ('app. view. module. factory. columnsFactory ', {statics: {getColumns: function (moduleModel, schemeOrderId) {var scheme = moduleModel. get ('tf _ gridSchemes ') [0]; // obtain the first grid scheme var columns = []; for (var I in scheme. tf_schemeGroups) {var sg = scheme. tf_schemeGroups [I]; // whether to display the group var isgroup = sg. tf_isShowHeaderSpans; var group = {gridGroupId: sg. tf_gridGroupId, text: sg. tf_gridGroupName, locked: sg. tf_isLocked, // flex: 1, columns: []} for (var j in sg. tf_groupFields) {var gf = sg. tf_groupFields [j]; var fd = moduleModel. getFieldDefine (gf. tf_fieldId); var field; if (fd. tf_isHidden) continue; field = this. getColumn (gf, fd, moduleModel); field. locked = sg. tf_isLocked; if (isgroup) {this. canReduceTitle (group, field); group. columns. push (field);} elsecolumns. push (field);} if (isgroup) {this. canReduceTitle (group, field); columns. push (group) ;}} console. log (columns); return columns ;}, // check whether the group name is the beginning of the column. If the group name is the beginning of the column, and the column name is followed by content, the same part of the // is truncated. canReduceTitle: function (group, field) {if (field. text. indexOf (group. text) = 0) {field. text = field. text. slice (group. text. length ). replace ('(',''). replace (')',''). replace ('(',''). replace (')', ''); if (field. text. indexOf ("<br/>") = 0) field. text = field. text. slice (5) ;}},/*** generate a column definition based on the definition of groupField and fieldDefine */getColumn: function (gf, fd, module) {// console. log (fd); var ft = fd. tf_title.replace (new RegExp ('--', 'GM '),' <br/> '); if (fd. behindText) ft + = '<br/> (' + fd. behindText + ')'; var field = {filter :{}, maxWidth: 800, gridFieldId: gf. tf_gridFieldId, // Add this attribute to the backend sortable: true, text: ft, dataIndex: fd after the column width is changed. tf_fieldName} switch (fd. tf_fieldType) {case 'date': Ext. apply (field, {xtype: 'datecolumn', align: 'center', width: 100}); break; case 'datetime': Ext. apply (field, {xtype: 'datecolumn', align: 'center', width: 130}); break; case 'boolean': field. xtype = 'checkcolumn'; field. stopSelection = false; field. processEvent = function (type) {if (type = 'click') return false ;}; break; case 'integer': Ext. apply (field, {align: 'center', xtype: 'numbercolumn', tdCls: 'intcolor', format: '#'}); break; case 'double': Ext. apply (field, {align: 'center', xtype: 'numbercolumn', width: 110}); break; case 'float': Ext. apply (field, {align: 'center', xtype: 'numbercolumn', width: 110}); break; case 'percent ': Ext. apply (field, {align: 'center', xtype: 'numbercolumn', width: 110}) break; case 'string': break; default: break;} if (fd. tf_allowSummary) {Ext. apply (field, {hasSummary: true, summaryType: 'sum'})} if (gf. tf_columnWidth> 0) field. width = gf. tf_columnWidth; else if (gf. tf_columnWidth =-1) {field. flex = 1; field. minWidth = 120;} return field;},/*** for the name field of the current module, bold display */nameFieldRenderer: function (val, rd, model, row, col, store, gridview) {return filterTextSetBk (store, '<strong>' + val + '</strong> ');}}});

File structure:








How does GridView1 define its fixed width, and how does it control the header field length during database connection?

It is estimated that you are experiencing the gridview deformation due to the long data? If yes, you can write an article in an SQL statement to capture the length of the queried string, or control it when binding data. Added the string truncation function to the bound data.