PDA

View Full Version : Asign value for checkbox and then to get the value.



fabbydesign
27 Apr 2012, 12:56 AM
Hello.
I have a small problem, that i have to assign a value for a checkbox that is in a grid.
so, i have:



var sm = new Ext.selection.CheckboxModel();

then



Ext.create('Ext.grid.Panel', { itemId:'gridSubpagesList', overflow:'auto', selModel: sm, columns: [ {header: "ID", dataIndex: 'objid', align: 'center', width:50, hidden: true}, {header: "Name", width: 200, dataIndex: 'name', sortable: true}, {header: "Short Description", flex: 1, width: 380, dataIndex: 'sDescription', sortable: true}, {header: "Last update", width: 130, dataIndex: 'lastUpdate', sortable: true} ], store : new Ext.data.JsonStore({ storeId:'storeTextSubPages', fields:['objid','name', 'sDescription', 'lastUpdate'], autoLoad: true, proxy:{ url:'showtextsubpages/cities', type:'ajax', reader:{ root:'data', type:'json' } } }),

and for the checkbox, i don't know how to make the link between field status from database(that has the values 0 or 1) and the checkbox (0=not checked, 1=checked).

thanks!

vietits
27 Apr 2012, 1:42 AM
Ext.selection.CheckboxModel is a selection model that renders a column of checkboxes that can be toggled to select or deselect rows. It's a way to select records on grid by clicking on checkboxes. So it reflects the selection of records on grid and does not link to a specific field in each record. To set checkbox of CheckboxModel to on/off basing on value of a field, you should use <grid>.getSelectionModel.select().

Example:


function initGrid(grid){
var store = grid.getStore();
var select = [];
store.each(function(record){
if(record.get('status')) select.push(record);
});
grid.getSelectionModel.select(select);
}

fabbydesign
27 Apr 2012, 5:34 AM
i tryed what you sayed, and i have an error.
i inserted a listener on the store
listeners: {
load : {
fn : function(store,records,options){
var select = [];
store.each(function(record){
// id = record.data.objid
select.push(record);
});
var list = Ext.getCmp('listSubpages'); // getting id
var grid = list.down('#gridSubpagesList');
//console.log(grid.getSelectionModel);
grid.getSelectionModel.selectFirstRow();

}
}

and i got this error:

TypeError: Object function (){if(!this.selModel){this.selModel={}}var b="SINGLE",a;if(this.simpleSelect){b="SIMPLE"}else{if(this.multiSelect){b="MULTI"}}Ext.applyIf(this.selModel,{allowDeselect:this.allowDeselect,mode:b});if(!this.selModel.events){a=this.selModel.selType||this.selType;this.selModel=Ext.create("selection."+a,this.selModel)}if(!this.selModel.hasRelaySetup){this.relayEvents(this.selModel,["selectionchange","beforeselect","beforedeselect","select","deselect"]);this.selModel.hasRelaySetup=true}if(this.disableSelection){this.selModel.locked=true}return this.selModel} has no method 'selectFirstRow'
do you know why?
thanks

fabbydesign
27 Apr 2012, 5:55 AM
i changed to:
fn : function(grid, index, record){
var select = [];
store.each(function(record){
// id = record.data.objid
select.push(record);
});
grid.getSelectionModel().getSelected().select(select);

}

but when i refresh the page, is no error, nothing, just the grid loaded, and the image in front that show's that the data is loaded, and nothing selected..

vietits
27 Apr 2012, 6:36 AM
i changed to:
fn : function(grid, index, record){
var select = [];
store.each(function(record){
// id = record.data.objid
select.push(record);
});
grid.getSelectionModel().getSelected().select(select);

}

but when i refresh the page, is no error, nothing, just the grid loaded, and the image in front that show's that the data is loaded, and nothing selected..

Replace red code line with grid.getSelectionModel().select(select);
Also make sure you call this when store has been loaded and grid has been rendered.

fabbydesign
1 May 2012, 11:55 PM
Hello Vietits,
Sorry, for the late replay, but i was gone, for some days.
Now, i get the error: TypeError: Object [object Object] has no method 'getSelectionModel'

vietits
2 May 2012, 12:02 AM
What does your code look like?

fabbydesign
2 May 2012, 12:03 AM
this is for store:


store : new Ext.data.JsonStore({
storeId:'storeTextSubPages',
fields:['objid','name', 'sDescription', 'lastUpdate'],
autoLoad: true,
proxy:{
url:'showtextsubpages/cities',
type:'ajax',
reader:{
root:'data',
type:'json'
}
},listeners: {
load : {
fn : function(grid, index, record){
var select = [];
store.each(function(record){
// id = record.data.objid
select.push(record);
});
//console.log(select);
grid.getSelectionModel().select(select);
}
}
}

})

vietits
2 May 2012, 12:18 AM
this is for store:


store : new Ext.data.JsonStore({
storeId:'storeTextSubPages',
fields:['objid','name', 'sDescription', 'lastUpdate'],
autoLoad: true,
proxy:{
url:'showtextsubpages/cities',
type:'ajax',
reader:{
root:'data',
type:'json'
}
},listeners: {
load : {
fn : function(grid, index, record){
var select = [];
store.each(function(record){
// id = record.data.objid
select.push(record);
});
//console.log(select);
grid.getSelectionModel().select(select);
}
}
}

})

You have a mistake at red line color above. Arguments of 'load' event handler should be (store, records, successful, eOpts) not (grid, index, record).

Re-looking at your code on the first post, I suggest you fix your code as below:


var grid = Ext.create('Ext.grid.Panel', {
itemId:'gridSubpagesList',
overflow:'auto',
selModel: sm,
columns: [{
header: "ID",
dataIndex: 'objid',
align: 'center',
width:50,
hidden: true
},{
...
}],
store: new Ext.data.JsonStore({
storeId:'storeTextSubPages',
fields:['objid','name', 'sDescription', 'lastUpdate'],
autoLoad: true,
proxy:{
url:'showtextsubpages/cities',
type:'ajax',
reader:{
root:'data',
type:'json'
}
},
listeners: {
load : {
fn: function(store){
var select = [];
store.each(function(record){
// id = record.data.objid
select.push(record);
});
//console.log(select);
grid.getSelectionModel().select(select);
}
}
}
})

fabbydesign
2 May 2012, 11:54 PM
thanks vietits, works fine now.

i did something like this:



handler: function() { selected = ''; var sm = gridSubpagesList.getSelectionModel().getSelection(); Ext.each(sm, function (item) { selected=selected + ','+item.data.objid; }); console.log(selected); var param=getSelectedMenu(); Ext.Ajax.request({ url: 'showtextsubpagesadd', success: function(){ Ext.MessageBox.alert('Status', 'Data changed!'); }, failure: function(){ Ext.MessageBox.alert('Status', 'Error on changing data!'); }, params: {param: param, action: 'editStatus', id:selected} // your json data }); }