Ext4.2 grid extension, extended selection policy, auto-set paging component, make grid use more concise

1. Overview:

In Ext project development, the grid is one of the most used components, in the process found a lot of configuration is similar, here a simple package for the grid.

Task 1. In the grid toolbar is often added, edit, delete, etc., we hope that when the user selects a record to edit and delete can be clicked, when the selection of multiple records is deleted clickable, editing is disabled, when not selected, edit and delete are not available, In general, this work is done by adding SelectionChange events and render events to the controller, which is tedious and laborious, and the more concise solution here is to add two selection attributes to the grid. Singleselects and Multiselects, that is, the single-choice strategy and the multi-select strategy to complete, the specific method is described below.

The paging toolbar in task 2.grid is generally necessary, so it's also a wrapper, without having to set up the paging component in a specific grid.

2. Effect: (Nothing to see, is a normal grid)

3. Code (focus here)

Ext.define (' App.view.LinkView ', { Extend: ' UX. Grid ' , alias:' Widget.linkview ', singleselects:[   ' edit '], // Radio Policy ID  multiselects:[' delete '], // Multi-Select policy Store: ' Linkstore ', Columns: [{text:' Line number ', Xtype: ' Rownumberer ', align: ' center ', width:40}, {text:' title ', Dataindex: ' LinkTitle ', align: ' left '}, {text:' Connection ', Dataindex: ' Linkurl ', align: ' left '}], Tbar: [{ID:' Add ', Text:New, Iconcls:' Plus-circle '            },            ‘-‘, {ID:' Edit ', Text:Edit,                //glyph:0xf044,Iconcls: ' Pencil-color '            },            ‘-‘, {ID:' Delete ', Text:Delete,                //Glyph:0xf1f8,Iconcls: ' Minus-circle '            },            ' and ', {xtype:' TextField ', ID:' Key ', Name:"Key", Emptytext:' Title ... ', enablekeyevents:true, Width:148}, {ID:' Usersearch ', Glyph:0xf002, ID:' Search ', tooltip:Search, Text:Search}], InitComponent:function() {ext.setglyphfontfamily (' Fontawesome ');  This. Callparent (arguments); }});

Description: It has become a little bit more concise, the red part is the extension part.

①singleselects:[' edit ': indicates that only one row of records is edit to click, other cases are disabled, and edit indicates the ID of the button.

② multiselects:[' delete ']: indicates that you can click when more than one record is selected. Delete is the button ID

③ does not see the code that sets the paging component, but there are pagination components, which are all in the UX. Completed in Grid.js.

④ also has many other default properties that are in the UX. Set in Grid.js.

4.ux. Grid.js

/** * Extension ext Grid, add singleselects and multiselects, default has pagination component, explain below*/Ext.define (' UX. Grid ', {extend:' Ext.grid.Panel ', alias:' Widget.uxgrid ', Frame:false, border:false, layout:' Fit ', Forcefit:true, Columnlines:true,    //Select a policySingleselects:NULL,//Radio Policy//When selecting a record is enabled, other conditions are prohibitedMultiselects:NULL,//Multi-Select policy//When selecting one or more records is enabled, do not select Yes to disableSelType:' Checkboxmodel ', MultiSelect:true, Store:' Linkstore ', Emptytext:' No data Found! ', InitComponent:function(){         This. Callparent (arguments); varGrid = This; varSingles = This. singleselects! =NULL? This. singleselects:[]; varMultis = This. multiselects! =NULL? This. multiselects:[]; Grid.on (' Render ',function(){                 for(vari=0;i<singles.length;i++) {ext.getcmp (singles[i]). Disable (true); }                 for(vari=0;i<multis.length;i++) {ext.getcmp (multis[i]). Disable (true);        }        }); Grid.on (' SelectionChange ',function(Selectmodel, selected, eopts) {if(selected.length==1){                 for(vari=0;i<singles.length;i++) {ext.getcmp (Singles[i]). Enable (true); }                 for(vari=0;i<multis.length;i++) {ext.getcmp (Multis[i]). Enable (true); }            }Else if(Selected.length > 1){                 for(vari=0;i<singles.length;i++) {ext.getcmp (singles[i]). Disable (true); }                 for(vari=0;i<multis.length;i++) {ext.getcmp (Multis[i]). Enable (true); }            }Else{                 for(vari=0;i<singles.length;i++) {ext.getcmp (singles[i]). Disable (true); }                 for(vari=0;i<multis.length;i++) {ext.getcmp (multis[i]). Disable (true);        }            }        }); //set the progress bargrid.adddocked ({xtype:' Pagingtoolbar ', Store:grid.getStore (), Dock:' Bottom ', DisplayInfo:true, plugins:[//page Progress on the left                    //ext.create (' Ext.ux.SlidingPager ', {}),                    //Show Progress on the rightExt.create (' Ext.ux.ProgressBarPager ',{})                ]    }        ); }});

Description

Ext.create (' Ext.ux.SlidingPager ', {}), Ext.create (' Ext.ux.ProgressBarPager ', {}), which is the paging component in the ext.ux.* package style, to be used, They must be imported into your project, by default in the EXT examples package, they will be tested in the SRC directory.
Load path:

Ext4.2 grid extension, extended selection policy, auto-set paging component, make grid use more concise