PDA

View Full Version : giving unique id to checkbox element in grid with checkbox selection model



amitkumarchauhan
2 Feb 2012, 2:00 AM
can we specify hardcoded id for checkbox n if possible can we add custom attribute like status = "Open" to extjs grid row or not

mitchellsimoens
2 Feb 2012, 9:16 AM
Not sure why you would want to do this. If the row is checked then you can assume it is open or if you have a field in the model that is for status then you can listen for the selection and update the field value.

amitkumarchauhan
6 Feb 2012, 4:00 AM
Requirement is something like this:
Lets say we have 5 rows in grid & user checks any 3 of them & there is print icon on top which will print data for selected 3 rows...now printing of this data requires some primary keys & other useful information to fetch data from server.
For example:

html for checkbox of 1st row:

<input name="checkItem" id="DEF9775" type="checkbox" value="159507" status="checkedin"/>

Now while print we can use value "159507" & status "checkedin" at server side processing, let me know how same can be handled.

vietits
6 Feb 2012, 5:41 AM
You can try this:
1. Use <grid>.getSelectionModel().getSelection() to get all the selected records.
2. Loop through the selected records to get out their 'id' and 'status' or whatever you want.
3. Use Ext.Ajax.request() to send what you got from step 2 to your server for further processing.

amitkumarchauhan
6 Feb 2012, 9:48 PM
vietits,
let me know how can i set
name="checkItem"; id="DEF9775"; value="159507" & status="checkedin" attributes via extjs so that when grid is rendered this will get assigned to each checkbox of each row(each checkbox will have different id,value & status attributes) & i will get these values using <grid>.getSelectionModel().getSelection()

vietits
6 Feb 2012, 11:29 PM
Hi amitkumarchauhan,

I did not mean how to set chechboxes' attributes but how to get what you mentioned in the previous post:


Requirement is something like this:
Lets say we have 5 rows in grid & user checks any 3 of them & there is print icon on top which will print data for selected 3 rows...now printing of this data requires some primary keys & other useful information to fetch data from server.

To get what you mentioned, we don't have to set checkbox attributes, but get them from the store attached to the grid. Suppose grid is your grid object, below is my suggestion for the print button's handler:


onPrintBtnClick: function(){
var selectedRecords = grid.getSelectionModel().getSelection();
var selectedParams = [];
for(var i = 0, len = selectedRecords.length; i < len; i++){
var record = selectedRecords[i];
selectedParams.push({
id: record.getId(),
status: record.getStatus(),
...
});
}
Ext.Ajax.request({
url: 'URL to script on server',
jsonData: {
params: selectedParams
},
success: function(response){
// successful response
},
.....
});
}

amitkumarchauhan
6 Feb 2012, 11:52 PM
vietits, my intention for setting same id & custom attributes to checkbox is that , i have an existing normal table which i am going to render now using extjs grid; i need to get same ids & custom attributes because i have lots of other testing tools which are dependent on this id & attributes also i have lots of other code outside of this table which is dependent on this id & rest attributes; now extjs is not going to allow me to put these custom attributes & ids to such checkbox then i will have to change code in my testing tool scripts as well as other logic/operations around jsp which is very very big work for me; hence i want way by which i can keep id/custom attributes as it is so my testing tool code & other area code will remain as it is.

vietits
7 Feb 2012, 1:04 AM
Ah, I see. All you want is how to set the input attributes, don't you? If so, you can try the following:


var checkbox = Ext.create('Ext.form.field.Checkbox', {...});
var inputEl = checkbox.getEl().down('input'); // get INPUT element inside checkbox component
inputEl.set({
id: 'value of id',
status: 'value of status',
....
});

amitkumarchauhan
7 Feb 2012, 1:13 AM
Thanks, i can use this code to create checkbox in each row of grid correct?1st column of each row is this checkbox having different ids & other attributes.

vietits
7 Feb 2012, 1:31 AM
I think you have to create checkboxes by yourself by using Ext.form.field.Checkbox. The 'checkbox' in the firstcolumn in the grid with checkboxmodel selection is in fact not checkbox component. It does not contain INPUT element inside.

amitkumarchauhan
7 Feb 2012, 2:30 AM
Thanks, correct it is image in case of checkbox mode selection, not input type checkbox ; i will try out with
Ext.form.field.Checkbox

amitkumarchauhan
2 Mar 2012, 2:14 AM
vietits (http://www.sencha.com/forum/member.php?362966-vietits) if i use new checkbox field then i am not able to get select all/deselect all..ie parent checkbox on headers; how can i get that?

vietits
2 Mar 2012, 5:17 AM
I am afraid that you have to implement this feature by yourself. Here are some suggestions:

Register to process the 'headerclick' event.
On headerclick, check to see whether this is the header of the column you want. If so foward to step 3
Loop thru the store and set field values respectively.

You can refer this by looking at the source of Ext.selection.CheckboxModel

amitkumarchauhan
5 Mar 2012, 9:24 PM
vietits (http://www.sencha.com/forum/member.php?362966-vietits) , on headclick event & rest all things are manageable that is ok but how do we get that select all/de select all checkbox in header itself ?

amitkumarchauhan
12 Mar 2012, 8:44 PM
vietits (http://www.sencha.com/forum/member.php?362966-vietits), help me to close this issue as per workaround suggested by you

vietits
12 Mar 2012, 10:32 PM
Do you mean that you are stuck at how to register headerclick event handling?

amitkumarchauhan
13 Mar 2012, 8:36 PM
Do you mean that you are stuck at how to register headerclick event handling?

No I am stuck at place...that how would I show the checkbox at header rest I have done like showing checkbox in each row...Just I need to place the Checkbox at header.

Thanks Vietits for replying..

vietits
13 Mar 2012, 8:56 PM
This is just a matter of using and switching CSS classes. You should have a look at source code of Ext.selection.CheckboxModel to see how to implement this feature.