20. Teach you EXTJS5 (20) Multi-list scheme of module grid

For a module with many fields to display all the fields in a grid, it becomes bloated, and for different users, the field types they focus on vary, so it is necessary to design multiple scenarios for the list of grids. In the design of this custom system, I have designed this part of the content, in the modulemodel.js, there is a property under the data tf_gridschemes array, you have how many options, are defined below this can be, Then create a control that can be selected according to these definitions, then choose to let the grid reconfigure the new schema.

Let's take a look at the configuration information for a new scenario, and in Modulemodel.js, modify the Tf_gridschemes to read as follows:

//module's grid scheme, you can define multiple scenariostf_gridschemes: [{tf_schemeorder:10, Tf_schemename:' Grid scheme 1 ',//The first grid scheme    //Table Header Groupingtf_schemegroups: [{tf_gridgroupid:1,//ID NumberTf_gridgrouporder:10,//table Header grouping sequence numberTf_gridgroupname: ' Basic information of Engineering project ', Tf_isshowheaderspans:true,//whether to show groupingTf_islocked:true,//whether this grouping is locked        //Each table header groups the following fieldsTf_groupfields: [{tf_gridfieldorder:5, Tf_fieldid:10100010//Project ID number}, {tf_gridfieldorder:10, Tf_fieldid:10100020,//Project project Name fieldtf_columnwidth:200}, {tf_gridfieldorder:20, Tf_fieldid:10100030,//Project Code fieldtf_columnwidth:120}]}, {tf_gridgrouporder:20,//table Header grouping sequence numberTf_gridgroupname: ' Project additional information ', Tf_isshowheaderspans:false,//whether to show HeaderspanTf_islocked:false,//whether this grouping is lockedTf_groupfields: [{tf_gridfieldorder:10, Tf_fieldid:10100040}, {tf_gridfieldorder:20, Tf_fieldid:10100050}, {tf_gridfieldorder:30, Tf_fieldid:10100060}, {tf_gridfieldorder:40, Tf_fieldid:10100070}, {tf_gridfieldorder:50, Tf_fieldid:10100080}, {tf_gridfieldorder:60, Tf_fieldid:10100090,//whether to pass acceptanceTf_columnwidth:80}, {tf_gridfieldorder:70, Tf_fieldid:10100100, Tf_columnwidth:-1,//1 means I can hold the maximum width .Tf_autosizedisabled:true //don't automatically adapt to width            //quantity of the engineering party}]}]}, {tf_schemeorder:20, Tf_schemename:' Grid Scheme 2 ',//A second grid schemetf_schemegroups: [{tf_gridgroupid:1,//ID NumberTf_gridgrouporder:10,//table Header grouping sequence numberTf_gridgroupname: ' Major project information ', Tf_isshowheaderspans:false,//whether to show groupingTf_islocked:false,//whether this grouping is lockedTf_groupfields: [{tf_gridfieldorder:5, Tf_fieldid:10100010, tf_islocked:true}, {tf_gridfieldorder:10, Tf_fieldid:10100020,//Project project Name fieldtf_columnwidth:200, tf_islocked:true}, {tf_gridfieldorder:20, Tf_fieldid:10100030,//Project Code fieldtf_columnwidth:120, tf_islocked:true}, {tf_gridfieldorder:10, Tf_fieldid:10100040}, {tf_gridfieldorder:20, Tf_fieldid:10100050}]}]}, {tf_schemeorder:30, Tf_schemename:' Grid Scheme 3 ',//A third grid scheme    //Table Header Groupingtf_schemegroups: [{tf_gridgroupid:1,//ID NumberTf_gridgrouporder:10,//table Header grouping sequence numberTf_gridgroupname: ' Basic information of Engineering project ', Tf_isshowheaderspans:true,//whether to show groupingTf_islocked:true,//whether this grouping is lockedTf_groupfields: [{tf_gridfieldorder:10, Tf_fieldid:10100020,//Project project Name fieldtf_columnwidth:200}, {tf_gridfieldorder:20, Tf_fieldid:10100030,//Project Code fieldtf_columnwidth:120}]}, {tf_gridgrouporder:20,//table Header grouping sequence numberTf_gridgroupname: ' Project additional information ', Tf_isshowheaderspans:true,//whether to show HeaderspanTf_islocked:false,//whether this grouping is lockedTf_groupfields: [{tf_gridfieldorder:10, Tf_fieldid:10100040}, {tf_gridfieldorder:20, Tf_fieldid:10100050}, {tf_gridfieldorder:30, Tf_fieldid:10100060}, {tf_gridfieldorder:40, Tf_fieldid:10100070}, {tf_gridfieldorder:50, Tf_fieldid:10100080        }]    }]}]

In the above definition of three gridscheme scheme, the name is "grid scheme 1", "grid scheme 2", "grid scheme 3", each scenario below the field grouping, some groups are set to display the two-level header, some do not display multi-layer headers, The previous columns are also set to be column locked. The data is then inherited from the combo field to create a new control that can be used to select these three scenarios. Create a folder widget under App/view/module and place the controls used in the module underneath. Create the file Gridschemecombo.js in the widget directory.

/** * If a module has multiple grid schemes, add a combo on the pading that can choose the switching scheme*/Ext.define (' App.view.module.widget.GridSchemeCombo ', {extend:' Ext.form.field.ComboBox ', alias:' Widget.gridschemecombo ', Fieldlabel:Solution, Editable:false, Labelwidth:40, LabelAlign:' Right ', Width:200, Querymode:' Local ', Displayfield:' Tf_schemename ',//name of the list main case in dataValuefield: ' Tf_schemeorder ',//serial number of the list main case in dataHiddentrue,//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 that determines whether the control is displayed according to the number of GridschemeValue: ' {Gridschemeid} '//The value of the bound Gridschemeid, which is also bound in the grid, is changed to execute the binding event in the grid.}, InitComponent:function () {        //get the top-level container viewmodel, if there is a better way to get it, please inform, thank you        varViewModel = This. Up (' Modulepanel '). 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 scenario is the first one         This. Callparent (arguments); }});

This control is added to the navigation area of the grid below. First in the uses to introduce the above control, and then modify bind, so that after setting the bind, the above control after selecting another scheme, will be executed in the grid Setgridschemeid this function, which is actually the nature of MVVM.

bind: {        //  data bound to Tf_title in Modulemodel and name        // property of selected record Gridschemeid     //  set bindings, and Gridschemecombo is the same as the value binding },

Following the change of the programme after the implementation of the letter steroids:

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//Default first grid scheme This. Gridschemeid = Viewmodel.get (' tf_gridschemes ') [0].tf_schemeorder;//columns of the first scenario is generated, the first scenario is set up first, not the Gridschemecombo trigger to generate the This. Columns =App.view.module.factory.ColumnsFactory.getColumns (ViewModel); This. Dockeditems =[{xtype:' Gridtoolbar ',//Button ToolbarDock: ' Top ', Grid: This}, {xtype:' Pagingtoolbar ',//Grid Data PagingStore This. Store, DisplayInfo:true, Prependbuttons:true, Dock:' Bottom ', items: [{//The choice of adding a grid scheme to the front comboXtype: ' Gridschemecombo '    }]}];

The previous part of the Columnsfactory.js has also been modified:

/** * Class for generating the columns of a grid*/Ext.define (' App.view.module.factory.ColumnsFactory ', {statics: {getcolumns:function(Modulemodel, Schemeorderid) {varScheme = modulemodel.get (' tf_gridschemes ') [0];//get the scheme for the first grid            if(Schemeorderid) {//Find the appropriate schemeExt.Array.each (Modulemodel.get (' Tf_gridschemes '),function(s) {if(S.tf_schemeorder = =Schemeorderid) {Scheme=s; return false; }                })            }            varcolumns = [];

In order to add this function, changed a lot of code, and encountered a lot of bugs, you can switch the program when you will see the bug. After the above operation, when the module opens, you can see that there is a more control on the Pagingtoolbar, you can choose to change the grid's column scheme. The steps to change the scenario are also features of the MVVM, which does not see the execution code of the event, because the event is executed automatically after bind.

Paste the following to join this feature.

After a second scenario is selected

After a third scenario is selected

For a management system, your grid has the functions written in the above sections, the system immediately improved a lot of grades. But in the case you do not understand the situation do not blindly join, to the system design to the function of the internal operation process are aware of and then add the corresponding functions. There is no duplicate interface class in this custom system, and each class is built to complete the new functionality, and by now this section has been manually set up with more than 20 classes to work together, and internal processes have become very complex. And so the system is fully done, the front desk will have more than 200 custom classes, backstage also has hundreds of control classes, without a certain degree of programming skills and design capabilities, it is difficult to control. In addition, the deeper the function, the more ExtJS bugs will appear, which is a headache.

The operation of the grid is temporarily over, starting with the development process of customizing the form and customizing the chart.

20. Teach you EXTJS5 (20) Multi-list scheme of module grid