This section focuses on ExtJS4.2 grid multi-select line knowledge, example Image:
650) this.width=650; "alt=" ExtJS4.2 grid knowledge Point five: Multiple select rows (you can click on the row to select the record and only click on the Multi-box to select the record) "Src=" Http://www.itdatum.net/uploads/webui /2014/0814/20140814005.png "/>
Online Demo / Sample code
The main contents are as follows:
You can click on the row to select the record and only click the Multi box to select the record
Check grid to load data into form
Get multiple rows of data in a grid and generate JSON format
1. You can click on the row to select the record, at this time the multi-select grid only need to configure SelType: ' Checkboxmodel ', at this time there is a flaw, when you select more than one record through the multi-box, if you accidentally click on a row, the current click Row is selected, the other selected record lines are deselected.
2. Select the record only by clicking on the Multi-box, at this time the multi-select grid needs to configure Selmodel:new Ext.selection.CheckboxModel ({checkonly:true}), set Checkonly to True, When you click on a row record, the row is not selected, and you can select the line only by clicking the Multi box to the left of each row.
The core code is as follows:
App.js
Ext.onready (function () { //turns on hover hint function ext.quicktips.init (); //turn on dynamic load ext.loader.setconfig ({ enabled: true }); //create an instance of the application ext.application ({ //here requires need to be a number of groups, ExtJS source is not handled well only a requires situation requires: [' Ext.container.Viewport '], name: ' Itdatum ', appFolder: ' app ', controllers: [ ' UserController ' ], launch: function ()  {    &NBSp; ext.create (' Ext.panel.Panel ', { width:750, layout: ' Fit ', renderto: ' Form-itdatum ', items: { xtype: ' userlist ', id: ' TestGrid1 ', title: ' multi-select ' form-you can click on the row record selected ', selType: ' Checkboxmodel ' } }); ext.create (' Ext.panel.Panel ', { width : 750, layout: ' Fit ', Renderto: ' Form-itdatum-checkbox ', items: { xtype: ' userlist ', id: ' TestGrid2 ', title: ' multi-select ' form-only click on multi-Box selection ', selmodel: new ext.selection.checkboxmodel ({checkonly:true}) } }); } ( });});
To add an event to a button on a id=testgrid1 grid:
This.control ({' userlist[id=testgrid1] button[action=save] ': {click:this.saveUser}, ' Userlist[id=testgr ID1] Button[action=edit] ': {click:this.editUser}});
Get the selected row in Saveuser and organize the data into JSON format:
Saveuser:function (Button) {var testgrid1=ext.getcmp (' TestGrid1 '); var Records=testgrid1.getselectionmodel (). GetSelection (); if (records.length==0) {Ext.MessageBox.alert (' hint ', ' Please select Record '); }else {alert (Itdatum.net.grid.encodeRecords (records)); }}
Get the selected row in Edituser and load the data into the Formpanel:
Edituser:function (Button) {var testgrid1=ext.getcmp (' TestGrid1 '); var Records=testgrid1.getselectionmodel (). GetSelection (); if (records.length==0) {Ext.MessageBox.alert (' hint ', ' Please select Record '); }else if (records.length>1) {Ext.MessageBox.alert (' hint ', ' select only one record '); }else {ext.widget (' Useredit '). Down (' form '). Loadrecord (Records[0]); }}
This article is from the "itdatum" blog, make sure to keep this source http://1162235.blog.51cto.com/1152235/1540268