EXT selection mode and table features

1. Select the mode's root class Ext. selection. Model
Important Methods
1. Undo select deselect (ext. Data. Model/index records, Boolean sippressevent): void
2. Get the selected data getselection (): Array
3. Get the last selected data getlastselected (): returns the model class object.
4. Determine whether the specified data is selected as isselected (record/number record): Boolean
5. Select the row selectrange (ext. Data. Model/number startrow, model/number endrow, Boolean keepexisting) you specified)
If the parameter is set to keepexisting for the start row and end row, true indicates that the previously selected false value is retained.
The selection mode seltype of a cell is hidden: "cellmodel" (from the Ext. Grid. plugin. cellediting found here)
Important methods:
1. Get the selected cell getcurrentposition () object
Ext. JSON. encode ()
Itemclick (ext. View. view this, ext. Data. Model record, htmlelement item, number index, ext. eventobject E, object options)
2. selectbyposition ({"row:" 5, "column": 6}) it is very useful to select the specified cell to process special data.
Ii. Ext. selection. checkboxmodel multi-choice box Selector
Detailed descriptions are provided in article 12.
3. Ext. selection. rowmodel row Selector
Important attributes:
1. multiselect allows you to press Ctrl + on the keyboard for multiple selections
2. The simpleselect single choice function allows you to select multiple
3. enablekeynav allows you to use the keyboard's upper and lower keys for selection.
Iv. gird features Ext. Grid. feature. Feature
1. Ext. Grid. feature. rowbody row body of the table
Important methods:
1. getadditionaldata (Object Data, number idx, ext. Data. Model record, object orig)
1) If you want to display this template, you must rewrite this method.
Features :[
Ext. Create ("Ext. Grid. feature. rowbody ",{
Getadditionaldata: function (data, idx, record, orig ){
.......
}
});
],
2) The object method body of the row body must be returned for write implementation.
VaR headerct = This. View. headerct,
Colspan = headerct. getcolumncount ();
Return {
Rowbody: "", // returns the row body
Rowbodycls: This. rowbodycls,
Rowbodycolspan: colspan // sets cross-Column
};
2. Ext. Grid. feature. abstractsummary
Ext. Grid. feature. Summary // sets the summary information of the table.
In
1) Step 1
Features :[{
FTYPE: "summary"
}]
2) Step 2
In columns, configure summarytype: "count", (count, sum, Min, Max, average)
Summaryrenderer: function (value, summarydata, dataindex ){
Return Ext. util. format. Number (value, "00.0 ");
}
3. Ext. Grid. feature. Grouping
1. Set attributes that can be grouped in the store Layer
Groupfield :""
2. Add code to the view layer
Ext. Create ("Ext. Grid. feature. Grouping ",{
Groupbytext: "Gender Group ",
Groupheadertpl: "Gender {name} total (rows. Length ",
Showgroupstext: "display group ",
Startcollapsed: True // whether to collapse the group
})
Important events:
Groupclick
Groupblclick
Groupcontextmenu

Groupexpand

Groupcollapse
Ext. Grid. feature. groupingsummary, ext. Grid. feature. Chunking can be configured by referring to the API.

Code implementation:
Controller-Layer Code Implementation
Two event mechanisms are added:
"Userlist ":{
Itemclick: function (view, record, item, index, E, options ){
VaR Sm = view. getselectionmodel (); // gets the selection mode object
// Alert (ext. JSON. encode (Sm. getcurrentposition (); // You can traverse the coordinate address through record for a long time.
// SM. selectbyposition ({row: 2, column: 3 });
}
},
"Userlist button [ID = Selection]": {
Click: function (o ){
VaR grid = O. ownerct. ownerct;
VaR Sm = grid. getselectionmodel ();
// SM. deselect (1); // undo the selection and input the index coordinates
// Getselection () gets the selected object Array
// Alert (Sm. getlastselected (). Get ("name"); // obtain the last selected data object.
// Alert (Sm. isselected (1); // determines whether the data is
// SM. selectrange (, true); // select the specified start and end rows and save the previous selection
SM. selectbyposition ({row: 2, column: 3 });
}
},
View-Layer Code (full ):
Ext. Define ("am. View. list ",{
Extend: "Ext. Grid. Panel ",
Title: "Grid Demo", // Title
Frame: True, // panel Rendering
Alias: "widget. userlist", // sets the alias
// Forcefit: True, // sets whether to automatically fill
Width: 1300,
Height: 350,
Features: [// Add Table features
// Set the row body of the table
Ext. Create ("Ext. Grid. feature. rowbody ",{
Getadditionaldata: function (data, idx, record, orig ){
VaR headerct = This. View. headerct,
Colspan = headerct. getcolumncount ();
Return {
Rowbody: record. Get ("email"), // returns the row body.
Rowbodycls: This. rowbodycls,
Rowbodycolspan: colspan // sets cross-Column
};
}

}), {// Set the summary of the table
FTYPE: "summary"
},
// Set the table Group
Ext. Create ("Ext. Grid. feature. Grouping ",{
Groupbytext: "Gender Group ",
Groupheadertpl: "Gender {name} total (rows. Length ",
Showgroupstext: "display group ",
Startcollapsed: false // you can specify whether to display a group.
})
],
Columns: [// column mode and set the foreground editing
Ext. Create ("Ext. Grid. rownumberer ",{}),
{Text: "name", dataindex: "name", width: 100 },
{Text: "Age", dataindex: "Age", width: 100,
// Configure the summary
Summarytype: "average ",
Summaryrenderer: function (value, summarydata, dataindex ){
Return Ext. util. format. Number (value, "00.0 ");
}
},
{// Personalized display data
Text: "gender ",
Dataindex: "sex ",
Renderer: function (value ){
If (value = ""){
Return "<font color = 'green'> female </font> ";
} Else if (value = "male "){
Return "<font color = 'red'> male </font> ";
}
}
},
{Text: "email", dataindex: "email", width: 200,
Field :{
Xtype: "textfield ",
Allowblank: false
}
}, {// Boolean Type
Text: "isit ",
Xtype: "booleancolumn ",
Dataindex: "isit ",
Truetext: "Yes ",
Falsetext: "no"
},{
Text: "Birthday ",
Xtype: "datecolumn ",
Dataindex: "Birthday ",
Format: "Y, M, D ",
Width: 150
}, {// Display the number type
Text: "income ",
Xtype: "numbercolumn ",
Dataindex: "deposit ",
Format: "0,000 ",
Width: 150
}, {// Use of the templatecolumn Mode
Text: "Description ",
Xtype: "templatecolumn ",
TPL: "The name is {name} and the age is {age }",
Width: 150
}, {// Use of action mode. The event mechanism is added. You can use the alias lookup method on the Controller layer to specify the event. You can also use the handler field.
Text: "action ",
Xtype: "actioncolumn ",
ID: 'del ',
Icon: "app/View/image/delete.jpg ",
Width: 50
}
],
Tbar: [// toolbar above
{Xtype: "button", text: "add", iconcls: "table_add "},
{Xtype: "button", ID: 'delete', text: "delete", iconcls: "table_delete "},
{Xtype: "button", text: "modify", iconcls: "table_edit "},
{Xtype: "button", text: "View", iconcls: "table_comm "},
{Xtype: "button", ID: "selection", text: "selection", iconcls: "table_comm "}
],
Dockeditems :[{
Xtype: "pagingtoolbar ",
Store: "users ",
DOCK: "bottom", // specifies the location
Displayinfo: True // set display

}],
// Set the foreground editing. First, specify it in column mode, and then use the plug-in mechanism to add the plug-in.
Plugins :[
Ext. Create ("Ext. Grid. plugin. cellediting ",{
Clickstoedit: 2
})
],
// Seltype: "checkboxmodel", // sets the selection mode to the mode of multiple selection boxes.
// Multiselect: True, // set to multiple
// Seltype: "rowmodel", // sets the row selection mode as the row selection mode.
// Multiselect: True, // You can select multiple
// Simpleselect: True, // You can select multiple values by clicking
// Enablekeynav: True, // allow keyboard Selection
Seltype: "cellmodel", // cell selection mode
Multiselect: True,
// Renderto: "griddemo ",
Store: "users", // specify a dataset
Initcomponent: function (){
This. callparent (arguments );
}
});
The store layer is also modified: The above prompt indicates that
Groupfield: "sex ",