Learn extjs5 with me (21 -- Multi-list solution of the module Grid)

Learn extjs5 with me (21 -- Multi-list solution of the module Grid)
Learn extjs5 with me (21 -- Multi-list solution of the module Grid)
For a module with many fields, displaying all fields in a grid will be very bloated, and the Field Types of different users vary, therefore, it is necessary to design multiple solutions for the Grid list. During the design of this custom system, I have designed this part of content in ModuleModel. in js, there is an attribute tf_gridSchemes under data that is of the array type. You can define all the solutions below, then, create a control to select the solution based on these definitions. After selecting the control, re-configure the new solution for the grid. First, let's take a look at the configuration information of the new solution. In ModuleModel. js, modify tf_gridSchemes to the following content:

// The grid scheme of the module. You can define multiple schemes tf_gridSchemes: [{tf_schemeOrder: 10, tf_schemeName: 'grid scheme 1', // The first Grid scheme // The table header group tf_schemeGroups: [{tf_gridGroupId: 1, // ID: tf_gridGroupOrder: 10, // 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 fields tf_groupFields: [{tf_gridFieldOrder: 5, tf_fieldId: 10100010 // Project ID}, {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: false, // whether headerspantf_isLocked: false, // whether to lock this group tf_groupFields: [{tf_gridFieldOrder: 10, tf_fieldId: 10100040 },{ tf_gridFieldOrder: 20, tf_fieldId: 10100050 },{ region: 30, tf_fieldId: 10100060 },{ tf_gridFieldOrder: 40, tf_fieldId: 10100070 },{ region: 50, tf_fieldId: 10100080 },{ tf_gridFieldOrder: 60, tf_fieldId: 10100090, // whether the tf_columnWidth: 80 has been accepted, {tf_gridFieldOrder: 70, tf_fieldId: 10100100, tf_columnWidth:-1, //-1 indicates that I can support the maximum width of tf_autoSizeDisabled: true // do not allow automatic adaptation width // engineering quantity}]}, {tf_schemeOrder: 20, tf_schemeName: 'grid solution 2', // The second Grid solution tf_schemeGroups: [{tf_gridGroupId: 1, // ID: tf_gridGroupOrder: 10, // the header Group No. tf_gridGroupName: 'Project main information', tf_isShowHeaderSpans: false, // whether to display the group tf_isLocked: false, // whether to lock this group tf_groupFields: [{tf_gridFieldOrder: 5, tf_fieldId: 10100010, tf_isLocked: true },{ tf_gridFieldOrder: 10, tf_fieldId: 10100020, // Project Name field tf_columnWidth: 200, tf_isLocked: true },{ tf_gridFieldOrder: 20, tf_fieldId: 10100030, // project code field tf_columnWidth: 120, tf_isLocked: true}, {tf_gridFieldOrder: 10, tf_fieldId: 10100040}, {tf_gridFieldOrder: 20, tf_fieldId: 10100050}]}, {tf_schemeOrder: 30, tf_schemeName: 'grid solution 3', // The third Grid solution // The table header group tf_schemeGroups: [{tf_gridGroupId: 1, // ID tf_gridGroupOrder: 10, // header Group No. tf_gridGroupName: 'Basic project information', tf_isShowHeaderSpans: true, // whether to display the group tf_isLocked: true, // whether to lock this group 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: false, // whether to lock this group tf_groupFields: [{dimensions: 10, tf_fieldId: 10100040}, {tf_gridFieldOrder: 20, tf_fieldId: 10100050}, {dimensions: 30, tf_fieldId: 10100060}, {tf_gridFieldOrder: 40, tf_fieldId: 40: 10100070 },{ tf_gridFieldOrder: 50, tf_fieldId: 10100080}]

Three gridScheme solutions are defined as "grid solution 1", "grid solution 2", and "grid solution 3". fields are grouped under each solution, some groups are set to two-layer headers that can be displayed, some do not display multi-layer headers, and the first few columns can be locked. The data is available, and a new control is inherited from the Combo field to select the three schemes. Create a folder widget under app/view/module and put all the controls used in the module under this widget. Create the file GridSchemeCombo. js in the widget directory.

/*** If a module has multiple Grid schemes, add a Combo */Ext. define ('app. view. module. widget. gridSchemeCombo ', {extend: 'ext. form. field. combobox', alias: 'widget. gridschemecombo ', fieldLabel: 'scheme', editable: false, labelWidth: 40, labelAlign: 'right', width: 200, queryMode: 'local', displayField: 'tf _ schemename', // name of the List case in data: valueField: 'tf _ schemeorder', // the serial number of the List case in data: hidden: true, // It is not displayed by default, if The number of GridScheme is greater than 1. Bind: {hidden: '{gridSchemeHidden}', // This is a calculated field in data. Determine whether the control displays value based on the number of gridscheme: '{gridSchemeId}' // The value of the gridSchemeId bound to the grid. This value is also bound to the grid. After this value is changed, the binding event in the grid will be executed.}, initComponent: function () {// obtain the viewModel of the top-level container. If there is a better way to obtain the viewModel, please let us know, thank you var viewModel = this. up ('lelepanel '). getViewModel (); this. store = Ext. create ('ext. data. store', {fields: ['tf _ schemeorder', 'tf _ schemename'], data: viewModel. get ('tf _ gridSchemes ')}); this. value = viewModel. get ('tf _ gridSchemes ') [0]. tf_schemeOrder; // The default solution is the first this. callParent (arguments );}});

Add this control to the Grid navigation area. First introduce the above control in uses, and then modify the bind. After bind is set, the above control will execute the setGridSchemeId function in the grid after another scheme is selected, this is actually the essence of MVVM.

Bind: {title: '{tf_title} {selectedNames}', // bind the data to tf_title in ModuleModel and the name of the selected record gridSchemeId: '{gridSchemeId}' // attribute gridSchemeId // set binding, which is the same as the value binding of GridSchemeCombo },

The execution letter after the change scheme is added below:

setGridSchemeId : function(value) {if (this.gridSchemeId != value) {this.gridSchemeId = value;Ext.suspendLayouts();this.columns = app.view.module.factory.ColumnsFactory.getColumns(this.up('modulepanel').getViewModel(), value);this.reconfigure(this.store, this.columns);Ext.resumeLayouts(true);this.columnAutoSize();}},

Add this control to pagingtoolbar:

// Create a grid column // The first grid scheme by default this. gridSchemeId = viewModel. get ('tf _ gridSchemes ') [0]. tf_schemeOrder; // generate columns of the first scheme. The first scheme is to set it first, not this generated by gridschemecombo. columns = javaskeditems = [{xtype: 'gridtoolbar', // button toolbardock: 'top', grid: this}, {xtype: 'pagingtoolbar ', // grid data paging store: this. store, displayInfo: true, prependButtons: true, dock: 'bottom ', items: [{// select the Comboxtype: 'gridschemecombo'}] to add the grid scheme at the beginning];

The previous section of ColumnsFactory. js has also been modified:

/*** 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 solution if (schemeOrderId) {// find the corresponding schemeExt. array. each (moduleModel. get ('tf _ gridSchemes '), function (s) {if (s. tf_schemeOrder = schemeOrderId) {scheme = s; return false ;}})} var columns = [];

To add this function, we have changed a lot of code and encountered many bugs. When switching the solution, we will see the bug. After the above operations, when the module is opened, you can see that there is an additional control on the pagingtoolbar, you can choose to change the column solution of the grid. The steps to change the scheme are also the characteristics of the application MVVM. The Execution Code of the event is not seen in the code above, because the event is automatically executed after bind.

The following is a post with this function.

After selecting the second solution

After selecting the third solution

Programming Skills and design capabilities are hard to control. In addition, the deeper the function, the more bugs extjs will appear. This is a headache.

Another: Who has the latest extjs5 version sent to me, I still use the 45-day trial version.