PDA

View Full Version : booleancolumn not rendered properly



prd
12 Mar 2011, 7:32 AM
Hi,

I've been trying to create a check column on my grid, but it always shows as true. The data as follows:

{
root: [{
uid: "christine",
name: "Christine Gozali",
active: true
}, {
uid: "herry",
name: "Herry P",
active: true
}, {
uid: "mega",
name: "Megawati",
active: true
}, {
uid: "prd",
name: "test user",
active: true
}]
}

And this is the code

System.security_useradmin = {
user: new Ext.data.JsonStore({
url: "/system/admin/user/list.htm",
root: 'root',
fields: [
{name: 'uid',type: 'string'},
{name: 'name', type: 'string'},
{name: 'active', type: 'bool'}
]
}),
init: function() {
var fm = Ext.form;
var cm = new Ext.grid.ColumnModel({
defaults: {
sortable: true
},
columns: [{
id: 'uid',
header: 'User ID',
dataIndex: 'uid',
width: 100
}, {
id: 'name',
header: 'Real Name',
dataIndex: 'name',
width: 300,
editor: new fm.TextField({
allowBlank: false
})
}, {
xtype: 'booleancolumn',
id: 'active',
dataIndex: 'active',
header: 'Active?',
width: 50
}
]
})
var window= new Ext.Window({
id: 'system-security_useradmin-window',
layout: 'border',
renderTo: "system-panel",
title: "User Management",
xtype: 'window',
width: 677,
height: 563,
layout: 'border',
maximizable: true,
items: [
{
xtype: 'editorgrid',
title: '',
region: 'center',
clicksToEdit: 1,
cm: cm,
store: System.security_useradmin.user,
tbar: {
xtype: 'toolbar',
items: [
{
xtype: 'button',
text: 'Add User',
icon: '/img/icons/add.png'
}
]
}
}
]
});
window.show();
this.user.load();
}
}


and this is the view I got
http://img193.imageshack.us/img193/8400/30172819.png

Thanks for helping me ;)

walldorff
12 Mar 2011, 6:40 PM
Look for Ext.ux.grid.CheckColumn.


xtype: 'checkcolumn',
id: 'active',
dataIndex: 'active',
header: 'Active?',

prd
12 Mar 2011, 10:36 PM
Changed to checkcolumn, and got this error:
http://img864.imageshack.us/img864/5479/error.png

EDIT: I've checked the column list, there are only actioncolumn, booleancolumn, datecolumn, gridcolumn, numbercolumn, and templatecolumn.
I am trying to download a newer extjs version.

walldorff
13 Mar 2011, 2:24 AM
If you have ExtJS < 3.3 then include Ext.ux.grid.CheckColumn.js in your project.
This is the code.

/*!
* Ext JS Library 3.3.1
* Copyright(c) 2006-2010 Sencha Inc.
* [email protected]
* http://www.sencha.com/license
*/
Ext.ns('Ext.ux.grid');

/**
* @class Ext.ux.grid.CheckColumn
* @extends Ext.grid.Column
* <p>A Column subclass which renders a checkbox in each column cell which toggles the truthiness of the associated data field on click.</p>
* <p><b>Note. As of ExtJS 3.3 this no longer has to be configured as a plugin of the GridPanel.</b></p>
* <p>Example usage:</p>
* <pre><code>
var cm = new Ext.grid.ColumnModel([{
header: 'Foo',
...
},{
xtype: 'checkcolumn',
header: 'Indoor?',
dataIndex: 'indoor',
width: 55
}
]);

// create the grid
var grid = new Ext.grid.EditorGridPanel({
...
colModel: cm,
...
});
* </code></pre>
* In addition to toggling a Boolean value within the record data, this
* class toggles a css class between <tt>'x-grid3-check-col'</tt> and
* <tt>'x-grid3-check-col-on'</tt> to alter the background image used for
* a column.
*/
Ext.ux.grid.CheckColumn = Ext.extend(Ext.grid.Column, {

/**
* @private
* Process and refire events routed from the GridView's processEvent method.
*/
processEvent : function(name, e, grid, rowIndex, colIndex){
if (name == 'mousedown') {
var record = grid.store.getAt(rowIndex);
// record.set(this.dataIndex, !record.data[this.dataIndex]);

// only if value is not negative
if (record.data[this.dataIndex] != -1) {
// bool to int, otherwise "false" will be an empty variable
record.set(this.dataIndex, (record.data[this.dataIndex] ? 0 : 1));
}
return false; // Cancel row selection.
} else {
return Ext.grid.ActionColumn.superclass.processEvent.apply(this, arguments);
}
},

// renderer : function(v, p, record){
// p.css += ' x-grid3-check-col-td';
// return String.format('<div class="x-grid3-check-col{0}">&#160;</div>', v ? '-on' : '');
// },

renderer : function(v, p, record){
// render only if value is not negative
if (v != -1) {
p.css += ' x-grid3-check-col-td';
return String.format('<div class="x-grid3-check-col{0}">&#160;</div>', v ? '-on' : '');
}
},

// Deprecate use as a plugin. Remove in 4.0
init: Ext.emptyFn
});

// register ptype. Deprecate. Remove in 4.0
Ext.preg('checkcolumn', Ext.ux.grid.CheckColumn);

// backwards compat. Remove in 4.0
Ext.grid.CheckColumn = Ext.ux.grid.CheckColumn;

// register Column xtype
Ext.grid.Column.types.checkcolumn = Ext.ux.grid.CheckColumn;

prd
13 Mar 2011, 2:25 AM
Wow... that works...
Thanks a lot.