Results 1 to 5 of 5

Thread: booleancolumn not rendered properly

  1. #1
    Sencha User
    Join Date
    Nov 2010
    Posts
    8

    Default booleancolumn not rendered properly

    Hi,

    I've been trying to create a check column on my grid, but it always shows as true. The data as follows:
    Code:
    {
        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
    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


    Thanks for helping me

  2. #2
    Sencha User walldorff's Avatar
    Join Date
    Mar 2008
    Location
    Antwerp, Belgium
    Posts
    165

    Default

    Look for Ext.ux.grid.CheckColumn.
    PHP Code:
    xtype'checkcolumn',
    id'active',
    dataIndex'active',
    header'Active?'
    ExtJS 3.4, WAMP Apache 2.2.17, PHP 5.3.5, MySQL 5.5.8

  3. #3
    Sencha User
    Join Date
    Nov 2010
    Posts
    8

    Default

    Changed to checkcolumn, and got this error:


    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.

  4. #4
    Sencha User walldorff's Avatar
    Join Date
    Mar 2008
    Location
    Antwerp, Belgium
    Posts
    165

    Default

    If you have ExtJS < 3.3 then include Ext.ux.grid.CheckColumn.js in your project.
    This is the code.
    PHP 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(nameegridrowIndexcolIndex){
            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] ? 1));
                }
                return 
    false// Cancel row selection.
            
    } else {
                return 
    Ext.grid.ActionColumn.superclass.processEvent.apply(thisarguments);
            }
        },

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

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

        
    // Deprecate use as a plugin. Remove in 4.0
        
    initExt.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
    ExtJS 3.4, WAMP Apache 2.2.17, PHP 5.3.5, MySQL 5.5.8

  5. #5
    Sencha User
    Join Date
    Nov 2010
    Posts
    8

    Default

    Wow... that works...
    Thanks a lot.

Similar Threads

  1. initially hidden panel not rendered properly
    By bhomass in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 6 Nov 2009, 2:03 PM
  2. ContentPanel ToolBar not rendered properly
    By nehaverma8 in forum Ext GWT: Discussion
    Replies: 0
    Last Post: 30 Jul 2009, 12:49 PM
  3. Modified LayoutContainer is not properly rendered.
    By zsakk in forum Ext GWT: Help & Discussion (1.x)
    Replies: 0
    Last Post: 5 May 2009, 9:03 AM
  4. [SOLVED] Container not rendered properly
    By ikul in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 8 Jan 2009, 7:55 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •