Extjs advanced application (1): implement multiple cell selection modules of GridPanel

In the past, I suddenly encountered a very strange requirement in the project, requiring that the unit lattice be the same as Excel for multiple selections. For example, select one of the rectangular areas in the box and copy them to another Grid on the same page !! And add the statistical report function. At that time, we were all overwhelmed by this demand! This module is a report-based statistical function that uses a third-party report tool, but the page display is very ugly ..... The customer told us why not use Ext to create reports. At the end, we finally rejected it because it was indeed too difficult for our team and the cost was too high. Ext Grid with statistical functions can be added and edited, and so on. It is almost a Web-based Excel. We don't think our team can name a problem with Google Doc .......

But afterwards, I looked at the source code of CellSelectionModel and RowSelectionModel, and found that it was not difficult to select multiple cells. So I did not talk to the project manager about my ideas, but took some time to study it, after a few days, the first version of the model came out. Hey, I am trying to persuade the project manager to apply the model to the system. OK. Let's go to the code and theoretical knowledge first:

Let's talk about the structure of the Ext GridPanel UI component. It consists of five parts: GridView, ColumnModel, SelectionModel, Store, and GridPanel. I have to admire the design philosophy of the Ext team, this is a typical MVC structure component. GridView is responsible for managing the content presentation of tables, ColumnModel is responsible for column definition, SelectionModel is the selection module, Store is the data layer, and finally they are all combined for GridPanel rendering, show in front of us. Because only focus on multiple cells, only the components that are useful to us are Gridview and SelecitonModel.

The implementation principle of the Grid selection model is as follows: the Ext component relationship is very complex. use charts to describe it.

On the left side is the operation during initialization and on the right side is the operation when the event is triggered.

Now our custom SelectionModel mainly focuses on the handleMouseDown method. The multiple selection rules are the same as those in Excel. shift is the region selection, and ctrl is the add selected cell.

Ext. hl. MultiCellSelectionModel=Ext. extend (Ext. grid. CellSelectionModel ,{

Last:False, // The last selected cell
Selections: [], // select Cache

Constructor:Function(){
Ext. hl. MultiCellSelectionModel. superclass. constructor. call (This);
},
InitEvents:Function(){
Ext. hl. MultiCellSelectionModel. superclass. initEvents. call (This);
},
// Execute the multiple-choice Logic Based on the row and column and whether to press Ctrl or shift.
HandleMouseDown:Function(Grid, row, col, event ){
        VarIsSelected;
        If(Event. button! = 0 | This. IsLocked ())
            Return;
        If(Event. shiftKey&& This. Last! = False) {// Whether to press shift
            This. SelectMatrix (row, col );
Grid. getView (). focusCell (row, col );
            Return;
}Else If(Event. ctrlKey) {// whether to press ctrl
IsSelected= This. IsSelected (row, col );
            If(Col=== 0 && This. Last [1]=== 0){
IsSelected? This. DeselectRow (row ):This. SelectRow (row,True);
}
            If(IsSelected) {// whether it is selected. If yes, It is deselected. Otherwise, it is selected.
                This. DeselectCell (row, col );
}Else{
                This. SelectCell (row, col,True);
                This. Last=[Row, col];
}
}Else If(Col=== 0) {// The first column is NumberColumn. Click it to select the column.
            This. SelectRow (row );
            This. Last=[Row, col];
}Else{// Select a single cell
            This. SelectCell (row, col );
            This. Last=[Row, col];
}
        If(This. Matrix)
            Delete This. Matrix;
},
// Clear the selected style of cells in the selected area
ClearCellSelections:Function(){
        VarL