PDA

View Full Version : [solved] Problem getting value of CheckColumn



graveyardfashions
5 Feb 2008, 7:19 AM
I'm a bit mystified. :/


I've got an editor grid with a checkcolumn (see code below) that seems to be working fine - I can "check" the boxes on and off (ie - toggle the graphic) appropriately.

But, when I run through the grid to squish it into a string, the value of record.data[fieldName] is always empty. I can see that it should be getting set on the onMouseDown action, though.

What am I doing wrong?

Thank you for any help you can give!
Best wishes,
Cat

The parsing/squishing function:


function validate(){
reqFields = "title,sort,color";
tmpData = "";
var theStore=Ext.getCmp("groupTypes_id").getStore();
for( rowIndex= 0; rowIndex < theStore.getCount(); rowIndex++ ) {
record = theStore.getAt(rowIndex);
for ( cellIndex = 0; cellIndex < record.fields.length; cellIndex++ ) {

fieldName = record.fields.keys[cellIndex];

if (record.data[fieldName].length > 0) {
var cellValue = record.data[fieldName];
if (fieldName == "color") {
cellValue = cellValue.substr(1); // strip the #
}
tmpData += '&' + fieldName + '_' +rowIndex+ '='+ cellValue;
} else {
// double-check required fields
if (reqFields.indexOf(fieldName) > -1) {
alert(fieldName + " is required for all Group Types.");
return false;
}
tmpData += '&' + fieldName + '_' +rowIndex+ '= ';
}
}
}

document.f.dataDump.value = tmpData;
document.f.submit();
}
The definition of the grid:


Ext.onReady(function(){

var comboStore = new Ext.data.SimpleStore({
fields: ['id', 'desc'],
var comboStore = new Ext.data.SimpleStore({
fields: ['id', 'desc'],
data : [
["Area", "Area"]
,["District", "District"]
,["Division", "Division"]
,["Nation", "Nation"]
,["Region", "Region"]
,["Zone", "Zone"]
]
});
var combo = new Ext.form.ComboBox({
store: comboStore,
valueField:'id',
displayField:'desc',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
selectOnFocus:true,
editable:true,
listWidth:100
});

// custom column plugin example
var checkColumn = new Ext.grid.CheckColumn({
header: "Show Rollup?",
dataIndex: 'show',
width: 75
});


// ColorField
var color_field = new Ext.ux.ColorField({
fieldLabel: 'Color',
id: 'color',
width: 100,
allowBlank: false
});

var cm = new Ext.grid.ColumnModel([
{ id: 'title', header: "Title", width: 100, dataIndex: 'title', editor: combo },
{ id: 'color', header: "Bar Color", width: 100, dataIndex: 'color', editor: color_field },
checkColumn,
{ header: "Sort Order", dataIndex: 'sort', width: 75,
editor: new Ext.form.TextField({
allowBlank: false
}) },
{ header: "Manager Title", dataIndex: 'mgr', width: 150,
editor: new Ext.form.TextField({
allowBlank: true
}) }
]);
cm.defaultSortable = true;


Ext.grid.dummyData = [
['','#336699',true,'','']
];

var Group = Ext.data.Record.create([
{name: 'title'},
{name: 'color', type: 'string'},
{name: 'show', type: 'bool'},
{name: 'sort', type: 'string'},
{name: 'mgr', type: 'string'}
]);

var ds = new Ext.data.Store({
reader: new Ext.data.ArrayReader({record: 'group'}, Group),
data: Ext.grid.dummyData
});

// create the editor grid
var groups_grid = new Ext.grid.EditorGridPanel({
store: ds,
cm: cm,
id: "groupTypes_id",
renderTo: 'groups_grid',
width:550,
height:150,
title:'Create Group Types',
frame:true,
plugins:checkColumn,
clicksToEdit:1,
tbar: [{
text: 'Add a Group Type',
handler : function(){
var g = new Group({
title:'',
color:'<cfoutput>#ListGetAt(application.graph_colorList, defaultColor+1)#</cfoutput>',
show: true,
sort:'',
mgr:''
});
groups_grid.stopEditing();
ds.insert(0, g);
groups_grid.startEditing(0, 0);
}
}]
});


});
Ext.grid.CheckColumn = function(config){
Ext.apply(this, config);
if(!this.id){
this.id = Ext.id();
}
this.renderer = this.renderer.createDelegate(this);
};

Ext.grid.CheckColumn.prototype ={
init : function(grid){
this.grid = grid;
this.grid.on('render', function(){
var view = this.grid.getView();
view.mainBody.on('mousedown', this.onMouseDown, this);
}, this);
},

onMouseDown : function(e, t){
if(t.className && t.className.indexOf('x-grid3-cc-'+this.id) != -1){
e.stopEvent();
var index = this.grid.getView().findRowIndex(t);
var record = this.grid.store.getAt(index);
record.set(this.dataIndex, !record.data[this.dataIndex]);
}
},

renderer : function(v, p, record){
p.css += ' x-grid3-check-col-td';
return '<div class="x-grid3-check-col'+(v?'-on':'')+' x-grid3-cc-'+this.id+'"> </div>';
}
};

Condor
5 Feb 2008, 7:38 AM
record.data[fieldName].length > 0 will return false for a boolean field.

graveyardfashions
5 Feb 2008, 8:37 AM
*smacks forehead*

Of course!

Thank you! :)