Learn EXTJS5 with me (multi-list scheme for 21--module grid)

Learn EXTJS5 with me (multi-list scheme for 21--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 Modulemodel.js, there is a property under DataTf_gridschemes is an array, how many scenarios do you have, defined below it, and then create a control that can be selected based on these definitions, and 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 :

The grid scheme of the module can define multiple scenarios tf_gridschemes: [{tf_schemeorder:10,tf_schemename: ' grid scheme 1 ',///First grid scheme//header grouping Tf_ Schemegroups: [{tf_gridgroupid:1,//ID number tf_gridgrouporder:10,//header group ordinal tf_gridgroupname: ' Basic project information ', Tf_isshowheaders Pans:true,//Whether the grouping tf_islocked:true is displayed,//Whether this grouping is locked//each header is grouped under the field tf_groupfields: [{tf_gridfieldorder:5,tf_fieldid:1 0100010//Project ID Number}, {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 ordinal tf_gridgroupname: ' Project additional information ', tf_isshowheaderspans:false,//Whether to show headerspantf_islocked:false,//whether to lock this grouping tf_groupfields: [{tf_gridfieldorder:10, tf_fieldid:10100040}, {tf_gridfieldorder:20,tf_fieldid:10100050}, {tf_gridfieldorder:30,tf_fieldid:10100060}, {T f_gridfieldorder:40,tf_fieldid:10100070}, {tf_gridfieldorder:50,tf_fieldid:10100080}, {Tf_gridfieldorder:60,tf_f ieldid:10100090,//whether through acceptance tf_columnWIDTH:80}, {tf_gridfieldorder:70,tf_fieldid:10100100,tf_columnwidth:-1,//-1 means I can support the maximum width tf_autosizedisabled:tr  UE//Do not automatically adapt width//engineering square Volume}]}]}, {tf_schemeorder:20,tf_schemename: ' grid scheme 2 ',//second grid scheme tf_schemegroups: [{tf_gridgroupid : 1,//ID number tf_gridgrouporder:10,//header group ordinal tf_gridgroupname: ' Project main information ', Tf_isshowheaderspans:false,//whether to show the grouping Tf_isloc Ked:false,//Whether this grouping tf_groupfields is locked: [{tf_gridfieldorder:5,tf_fieldid:10100010,tf_islocked:true}, {Tf_gridFieldOr der: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_gridFie LDORDER:20,TF_FIELDID:10100050}]}]}, {tf_schemeorder:30,tf_schemename: ' grid scheme 3 ',//Third grid scheme//header grouping Tf_schemegroup S: [{tf_gridgroupid:1,//ID number tf_gridgrouporder:10,//header group ordinal tf_gridgroupname: ' Basic project information ', Tf_isshowheaderspans:true ,//Whether the grouping tf_islocked is displayed: True,//whether to lock this grouping tf_groupfields: [{tf_gridfieldorder:10,tf_fieldid:10100020,//Project Name field tf_columnwidth:200}, {Tf_gr idfieldorder:20,tf_fieldid:10100030,//Project Code field TF_COLUMNWIDTH:120}]}, {tf_gridgrouporder:20,//header group ordinal Tf_gridgrou PName: ' Project additional information ', tf_isshowheaderspans:true,//Whether to show headerspantf_islocked:false,//Whether to lock this group tf_groupfields: [{Tf_grid  fieldorder: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}]}]}]

The three gridscheme schemes are defined above, with the names "grid scheme 1", respectively,"grid scheme 2","grid scheme 3", under each scenario, the fields are grouped, some groupings are set to the two-level header that can be displayed, some do not display multi-layer headers, and the preceding columns can be 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 */ext.define (' App.view.module.widget.GridSchemeCombo ', {extend ') on the pading that can select the switching scheme: ' Ext.form.field.ComboBox ', alias: ' Widget.gridschemecombo ', Fieldlabel: ' Scheme ', editable:false,labelwidth:40, LabelAlign: ' Right ', Width:200,querymode: ' Local ', Displayfield: ' Tf_schemename ',//Data list main case name Valuefield: ' Tf_sche Meorder ',//data in the list of the main case hidden:true,//default is not shown, if the number of gridscheme more than 1 is displayed. Bind: {hidden: ' {Gridschemehidden} ',//This is a calculated field in data that determines whether the control displays value according to the number of Gridscheme: ' {Gridschemeid} '// The value of the binding Gridschemeid, in the grid, is also bound to this value, where it is changed to execute the binding event in the grid},initcomponent:function () {//Get the ViewModel of the topmost container, if there is a better way to get it, Please advise, thank you var ViewModel = 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 scheme is the first 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: {title: ' {tf_title} {selectednames} ',//data bound to Tf_title in Modulemodel and the name of the selected record Gridschemeid: ' {Gridschemeid} '//attribute G ridschemeid//sets the binding, 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;//will generate columns of the first scheme, The first solution is to set up first, not Gridschemecombo trigger to generate This.columns = App.view.module.factory.ColumnsFactory.getColumns (ViewModel); This.dockeditems = [{xtype: ' Gridtoolbar ',//button Toolbardock: ' Top ', grid:this}, {xtype: ' Pagingtoolbar ',//grid Data Paging St Ore:this.store,displayinfo:true,prependbuttons:true,dock: ' Bottom ', items: [{//the selection of the grid scheme is first added Comboxtype: ' Grids Chemecombo '}]};

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

/** * Class */ext.define for generating grid columns (' App.view.module.factory.ColumnsFactory ', {statics: {getcolumns:function ( Modulemodel, Schemeorderid) {var scheme = modulemodel.get (' tf_gridschemes ') [0];//Get the scheme of the first grid if (Schemeorderid) {//Find to the corresponding SchemeExt.Array.each (modulemodel.get (' tf_gridschemes '), function (s) {if (S.tf_schemeorder = = Schemeorderid) { Scheme = S;return false;}})} var columns = [];

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.

Another: Who has the latest version of the EXTJS5 issued to me, I use the 45-day trial version.

Learn EXTJS5 with me (multi-list scheme for 21--module grid)