PDA

View Full Version : How to give an ID for Select all Checkbox(Top Most Checkbox)



Mahesh Sakunala
26 Jul 2012, 2:26 AM
Hi Guys,
I am stuck up with an checkbox issue.It would be great if you guys can help me out.
Here is my scenario:
Whenever i click on 'CheckBox' which is out of the grid ,remaining all checkboxes present within the grid must be selected.Whenever i Uncheck the 'CheckBox' ,it should be affected in the same way.For example,it functions just as GMail 'CheckAll' checkbox wher we have differnet conditions to select the read and unread mails.


Here is my Code to select all checkboxes :

var Checkbox = new Ext.grid.CheckboxSelectionModel({dataIndex:'all'});

listeners:{
cellclick :function(grid,rowIndex,columnIndex,e){
var record = grid.getStore().getAt(rowIndex); // Get the Record
var fieldName = grid.getColumnModel().getDataIndex(columnIndex); // Get field name
recordId2=record.get('id');
//checkBoxSelMod(recordId2);
}
},

viewConfig: {forceFit: true},
bbar: new Ext.PagingToolbar({
pageSize:10,
store: store,
displayInfo: true,
sidebar: true,
plugins: new Ext.ux.ProgressBarPager(),
align:'right'
}),

sm: new Ext.grid.CheckboxSelectionModel(
{
singleSelect:false
}
)
});
grid.render('items-grid1');
grid.getSelectionModel().on('selectionchange',function(sm)
{
if(sm.getSelections()!=null || sm.getSelections()!='')
{
strNamesmult='';
strCategory='';
selectedCheckboxLength=0;
if(sm.getSelections().length>0)
{
selectedCheckboxLength=sm.getSelections().length ;
if(selectedCheckboxLength == 10)
{
deleteall();
}
for(var cnt=0;cnt<=selectedCheckboxLength-1;cnt++)
{
if(strNamesmult!=null && strNamesmult=='')
{
strNamesmult=sm.getSelections()[cnt].get('id');
}
else if((strNamesmult!=null) && (strNamesmult!=''))
{
strNamesmult=strNamesmult+','+sm.getSelections()[cnt].get('id');
}
}
}
}
else
{
alert('--------------');
}
});
store.load({params:{start:0, limit:10}});
});

friend
26 Jul 2012, 4:28 AM
I'm not 100% sure if this is what you're after, but an Ext.selection.CheckboxModel provides a checkbox in the first column header which will allow you to select/deselect all. Does that help?



<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ExtJs Demo</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">

<script type="text/javascript" src="extjs/ext-all-debug-w-comments.js"></script>

<script type="text/javascript">
Ext.onReady(function() {
var checkboxModel = Ext.create('Ext.selection.CheckboxModel', {
mode: 'MULTI'
});

Ext.create('Ext.window.Window', {
height: 300,
layout: 'fit',
title: 'Checkbox Selection All Demo',
width: 500,
items: [{
xtype: 'grid',
columns: [
{header: 'Last Name', dataIndex: 'lastName', sortable: true, width: 100},
{header: 'First Name', dataIndex: 'firstName', sortable: true, width: 100},
{header: 'Likes', dataIndex: 'likes', sortable: true, flex: 1},
],
columnLines: true,
selModel: checkboxModel,
store: {
xtype: 'arraystore',
fields: ['lastName', 'firstName', 'sex', 'likes'],
data: [
{lastName: 'Ellison', firstName: 'Larry', likes: 'Decimating the competition.'},
{lastName: 'Jobs', firstName: 'Steve', likes: 'Anything without buttons.'},
{lastName: 'Gates', firstName: 'Bill', likes: 'Designing insecure software.'},
{lastName: 'Fiorina', firstName: 'Carly', likes: 'Cashing out.'},
{lastName: 'Bush', firstName: 'George Jr.', likes: 'Horsies and chocolate.'},
{lastName: 'VanPharten',firstName: 'Rip', likes: 'A rootin, tootin good time.'},
]
}
}]
}).show();

});
</script>

</head>

<body>
</body>
</html>

Mahesh Sakunala
26 Jul 2012, 4:42 AM
Hello Friend,
I think you did not understand what our requirement.what exactly we want is when we click on one HTML check box which is out side of the grid will be affect the all extjs check boxes which are under the grid.
Right now we are able to get all check boxes in the grid and all those are working fine with respect to the top most check box.
My Html check box shoul work for all the extjs checkboxes as same as extjs top most checkbox.

friend
26 Jul 2012, 9:00 AM
Ok, sorry about the misunderstanding.

Here's the code to manually select/deselect all checkboxes/rows in the grid:



yourGrid.getSelectionModel().selectAll()
or
yourGrid.getSelectionModel().deselectAll()