Home > Developer > Web Develop
The content of this article is to add line numbers, and check boxes for the table, and finally talk about the EXT selection model. The content is relatively simple, directly on the code.
first, set the line number
The main problem with line numbers is that you need to recalculate line numbers after you delete a row
Ext.onready (function () {
var cm = new Ext.grid.ColumnModel ([
New Ext.grid.RowNumberer (),---Set the line number here
{header: ' number ', Dataindex: ' ID '},
{header: ' Sex ', dataindex: ' Sex '},
{header: ' name ', Dataindex: ' Name '},
{header: ' description ', dataindex: ' Descn '}
]);
var data = [
[' 1 ', ' Male ', ' name1 ', ' descn1 '],
[' 2 ', ' female ', ' name2 ', ' descn2 '],
[' 3 ', ' Male ', ' name3 ', ' descn3 '],
[' 4 ', ' Female ', ' name4 ', ' descn4 '],
[' 5 ', ' Male ', ' name5 ', ' descn5 ']
];
var store = new Ext.data.Store ({
Proxy:new Ext.data.MemoryProxy (data),
Reader:new Ext.data.ArrayReader ({}, [
{name: ' ID '},
{name: ' Sex '},
{name: ' Name '},
{name: ' DESCN '}
])
});
Store.load ();
var Grid = new Ext.grid.GridPanel ({
Autoheight:true,
Renderto: ' Grid ',
Store:store,
cm:cm
});
Ext.get (' Remove '). On (' click ', Function () {--click event to listen for delete button
Store.remove (Store.getat (1)); --store.getat (1) Get the 2nd row of data
Grid.view.refresh (); --Force the grid to refresh and recalculate line numbers
});
});
Page code:
<body>
<div id= "Grid" ></div>
<input id= "Remove" type= "button" value= "delete second row of data"/>
</body>
Second, set the check box
The check box is set by Ext.grid.CheckboxSelectionModel, which adds a check box before each row of data, and it must be added to the column definition and table assembly definition 2 sections. By default, a row of the table is clicked, and the check box is automatically selected. You can deselect by clicking the following settings, and you need to click the check box to select:
var sm = Ext.grid.CheckboxSelectionModel ({handleMouseDown:Ext.emptyFn});
check box Setup code:
Ext.onready (function () {
var sm = Ext.grid.CheckboxSelectionModel ();
var cm = new Ext.grid.ColumnModel ([
New Ext.grid.RowNumberer (),---Set the line number here
SM,--Set check box
{header: ' number ', Dataindex: ' ID '},
{header: ' Sex ', dataindex: ' Sex '},
{header: ' name ', Dataindex: ' Name '},
{header: ' description ', dataindex: ' Descn '}
]);
var data = [
[' 1 ', ' Male ', ' name1 ', ' descn1 '],
[' 2 ', ' female ', ' name2 ', ' descn2 '],
[' 3 ', ' Male ', ' name3 ', ' descn3 '],
[' 4 ', ' Female ', ' name4 ', ' descn4 '],
[' 5 ', ' Male ', ' name5 ', ' descn5 ']
];
var store = new Ext.data.Store ({
Proxy:new Ext.data.MemoryProxy (data),
Reader:new Ext.data.ArrayReader ({}, [
{name: ' ID '},
{name: ' Sex '},
{name: ' Name '},
{name: ' DESCN '}
])
});
Store.load ();
var Grid = new Ext.grid.GridPanel ({
Autoheight:true,
Renderto: ' Grid ',
Store:store,
CM:CM,
Sm:sm
});
});
III. Selection Model
(1). Rowselectionmodel model
When defining Ext.grid.GridPanel, the default is to use the rowselectionmodel--row selection model, when you click a cell, the default is to select the whole row, select the model default
Multiple selections are supported, and multiple rows can be selected by holding down the shift or CTRL key while the mouse is clicked. If you want to select only one row, you need to set the Singleselect parameter.
(2). Cellselectionmodel model
Only one cell is allowed to be selected at a time, and Cellselectionmodel is used by default in Editorgrid. Of course, you can also set the Editorgrid selection model to Rowselectionmodel,
So that the effect of selecting a whole row is reached.
(3). Gets the selected row
Ext.get (' Remove '). On (' click ', function () {
var selections = Grid.getselectionmodel (). Getselections (); --Get the selection model first and then get the selected record from the selection model.
if (Selections.length > 0) {
Ext.Msg.confirm (' Hint ', ' Are you sure you want to delete the selected records? ', function (_BTN) {
if (_btn = = ' yes ') {
for (var i = 0; i < selections.length; i++) {
var record = Selections;
Store.remove (record);
}
Grid.view.refresh ();
}
});
}
Else
Ext.Msg.alert ("Hint", "you haven't checked the record yet.");
});
});
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
