PDA

View Full Version : How to do invisible checkbox in header CheckboxSelectionModel



Ex_Soft
29 Oct 2010, 2:20 AM
checkboxSel = new Ext.grid.CheckboxSelectionModel({
header: "My header"
});
But


<div class="x-grid3-hd-inner x-grid3-hd-checker" unselectable="on" style="">
My header
<img class="x-grid3-sort-icon" src="./ext/resources/images/default/s.gif">
</div>
x-grid3-hd-checker is added.


checkboxSel = new Ext.grid.CheckboxSelectionModel({
header: "<div class=\"x-grid3-hd-inner x-grid3-hd-1\" style=\"\" unselectable=\"on\">My header</div>"
});


<div style="" unselectable="on" class="x-grid3-hd-inner x-grid3-hd-checker">
<div unselectable="on" style="" class="x-grid3-hd-inner x-grid3-hd-1">My header</div>
<img src="./ext/resources/images/default/s.gif" class="x-grid3-sort-icon">
</div>
And then I set width


checkboxSel = new Ext.grid.CheckboxSelectionModel({
header: "My header",
width: 100
});
two checkbox states are showed in each rows

Tim Toady
29 Oct 2010, 4:12 AM
Try giving your CheckboxSelectionModel an id.

Ex_Soft
29 Oct 2010, 4:23 AM
Try giving your CheckboxSelectionModel an id.
ChekBox in header hasn't been shown. But two checkbox states in each rows are showed still (e.g. with width=100)

Tim Toady
29 Oct 2010, 4:41 AM
If I recall correctly, the checkboxes used are css sprites. You probably just need to apply some css to limit the size of the checkbox for the rows.

Ex_Soft
29 Oct 2010, 11:46 AM
You probably just need to apply some css to limit the size of the checkbox for the rows.
And how should I do it?

Elwood_76
29 Oct 2010, 2:32 PM
Add this in the grid component



cls:'no_check_header',


and add the css rule to in the html file



<style type="text/css">
.no_check_header .x-grid3-hd-checker {background-image: none;}
</style>

Ex_Soft
30 Oct 2010, 12:29 AM
It works, too. And what about two checkboxes in each rows?

Tim Toady
30 Oct 2010, 7:16 PM
http://www.sencha.com/forum/showthread.php?15260-CheckboxSelectionModel-replace-header-checkbox

Ex_Soft
31 Oct 2010, 10:14 AM
http://www.sencha.com/forum/showthread.php?15260-CheckboxSelectionModel-replace-header-checkbox


.x-grid3-row .x-grid3-row-checker {
width: 18px;
}
works. Many thanks.