1. #1
    Ext User
    Join Date
    Nov 2007
    Posts
    4
    Vote Rating
    0
    enc0de is on a distinguished road

      0  

    Default boolean from json -> checkbox

    boolean from json -> checkbox


    i'm using a grid that has a checkbox in it and basically when the box is checked or unchecked, an ajax request is built which will update the table that the grid pulls from.
    of course, all json values are passed as strings, and are stored as strings in the oracle table in question. i have tried to get this to work for a day now and im out of options. how would i make it so that when a certain result set is returned from the table that has a true/false string passed, that the true/false string in the json data is interpreted as a boolean that will actually show the checkboxes as checked or unchecked, depending on whether 'true' or 'false' is passed from the resultset to the datastore?

    thanks!

    Code:
    var ds = new Ext.data.Store({
    		proxy: new Ext.data.HttpProxy({
    		url: 'grid_data'
    		}),
    		reader: new Ext.data.JsonReader({
    		root: 'data',
    		remoteSort: true,
    		sortable: true,
    		id: 'function_id'
    		},
    		[
    		{name: 'function_id'},
    		{name: 'function_name'},
    		{name: 'function_section'},
    		{name: 'employee_id'},
    		{name: 'updated_on'},
    		{name: 'updated_by'},
    		{name: 'granted',type: 'bool'}
    		])
    		});
    
    var checkColumn = new Ext.grid.CheckColumn({
           header: "Has Access?",
           dataIndex: 'granted',
           width: 55
        });
    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]);
                var o = {function_id: record.data['function_id'],granted: record.data['access'],employee_id: record.data['employee_id']};
                conn.request({
    				url:'ajax',
    				method:'POST',
    				params: o,
    				success: function(responseObject) {
    				    Ext.example.msg('AutoSave','Access was updated for the selected record');
    				},
    				failure: function() {
    				alert('fail');
    				}
    			});
            }
        },
    
        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>';
        }
    };
    i think i posted all relevant code

    i guess i forgot to mention that as it stands, the checkboxes actually work when you check/uncheck them (as in they add the entry to the table from the ajax call) but when i load results in the grid that actually have entries in that table with true/false passing to the 'granted' name, i get an error that says something like the object doesn't support the property or method which i would assume is the result of datatype mismatching.

  2. #2
    Ext User
    Join Date
    Nov 2007
    Posts
    4
    Vote Rating
    0
    enc0de is on a distinguished road

      0  

    Default


    anyone have any ideas?

  3. #3
    Sencha User
    Join Date
    Aug 2007
    Location
    Edinburgh
    Posts
    49
    Vote Rating
    0
    lburgess is on a distinguished road

      0  

    Default more detail?

    more detail?


    Hi there,

    Can you post an exmple of the data you are getting from the server so I can replicate easily?


    Thanks
    Last edited by lburgess; 27 Jul 2008 at 1:06 AM. Reason: typo

  4. #4
    Ext User
    Join Date
    Nov 2007
    Posts
    4
    Vote Rating
    0
    enc0de is on a distinguished road

      0  

    Default


    this is the exact output of my php oracle query

    Code:
    {"data":[{"function_id":"3","function_name":"Marquee","function_section":"CMR Operations","employee_id":"admin","updated_on":null,"updated_by":null,"granted":"false"},{"function_id":"10","function_name":"GMail","function_section":"Google","employee_id":"admin","updated_on":null,"updated_by":null,"granted":"false"},{"function_id":"11","function_name":"Google Images","function_section":"Google","employee_id":"admin","updated_on":null,"updated_by":null,"granted":"false"},{"function_id":"14","function_name":"Recorder","function_section":"CMR QA","employee_id":"admin","updated_on":null,"updated_by":null,"granted":"false"},{"function_id":"2","function_name":"Salaried Time Entry","function_section":"CMR IT","employee_id":"admin","updated_on":null,"updated_by":null,"granted":"false"},{"function_id":"12","function_name":"Google Home","function_section":"Google","employee_id":"admin","updated_on":null,"updated_by":null,"granted":"false"},{"function_id":"1","function_name":"Asset Management","function_section":"CMR IT","employee_id":"admin","updated_on":null,"updated_by":null,"granted":"false"}]}

  5. #5
    Ext JS Premium Member saJoshua's Avatar
    Join Date
    Nov 2007
    Location
    South Africa
    Posts
    521
    Vote Rating
    5
    saJoshua is on a distinguished road

      0  

    Default


    true / false must be outside of quotes, otherwise it's interpreted as a string value, not a boolean.

  6. #6
    Ext User
    Join Date
    Nov 2007
    Posts
    4
    Vote Rating
    0
    enc0de is on a distinguished road

      0  

    Default


    sorry i forgot to mention that i already tried that. i tried boolean text inside and outside quotes, and for kicks, 1 and 0 values inside and outside quotes, with no avail.
    any ideas?
    Code:
    {"data":[{"function_id":"3","function_name":"Marquee","function_section":"CMR Operations","employee_id":"admin","updated_on":null,"updated_by":null,"granted":false},{"function_id":"10","function_name":"GMail","function_section":"Google","employee_id":"admin","updated_on":null,"updated_by":null,"granted":false},{"function_id":"11","function_name":"Google Images","function_section":"Google","employee_id":"admin","updated_on":null,"updated_by":null,"granted":false},{"function_id":"14","function_name":"Recorder","function_section":"CMR QA","employee_id":"admin","updated_on":null,"updated_by":null,"granted":false},{"function_id":"2","function_name":"Salaried Time Entry","function_section":"CMR IT","employee_id":"admin","updated_on":null,"updated_by":null,"granted":false},{"function_id":"12","function_name":"Google Home","function_section":"Google","employee_id":"admin","updated_on":null,"updated_by":null,"granted":false},{"function_id":"1","function_name":"Asset Management","function_section":"CMR IT","employee_id":"admin","updated_on":null,"updated_by":null,"granted":false}]}

  7. #7
    Ext JS Premium Member saJoshua's Avatar
    Join Date
    Nov 2007
    Location
    South Africa
    Posts
    521
    Vote Rating
    5
    saJoshua is on a distinguished road

      0  

    Default


    yeah, I have no problem loading the data into the checkbox.

    Code:
    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]);
                var o = {function_id: record.data['function_id'],granted: record.data['access'],employee_id: record.data['employee_id']};
                conn.request({
    				url:'ajax',
    				method:'POST',
    				params: o,
    				success: function(responseObject) {
    				    Ext.example.msg('AutoSave','Access was updated for the selected record');
    				},
    				failure: function() {
    				alert('fail');
    				}
    			});
            }
        },
    
        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+'">&#160;</div>';
        }
    };
    
    Ext.onReady(function(){
    
        var checkColumn = new Ext.grid.CheckColumn({
           header: "Has Access?",
           dataIndex: 'granted',
           width: 55
        });
    
        // the column model has information about grid columns
        // dataIndex maps the column to the specific data field in
        // the data store (created below)
        var cm = new Ext.grid.ColumnModel([{
               header: "function name",
               dataIndex: 'function_name',
               editor: new Ext.form.TextField()
            },{
               header: "function section",
               dataIndex: 'function_section',
               editor: new Ext.form.TextField()
            },
            checkColumn
        ]);
        
        
        // create the Data Store
        var store = new Ext.data.JsonStore({
            fields: [
    		    {name: 'function_id'},
    		    {name: 'function_name'},
    		    {name: 'function_section'},
    		    {name: 'employee_id'},
    		    {name: 'updated_on'},
    		    {name: 'updated_by'},
    		    {name: 'granted',type: 'bool'}
    	    ],
            root: 'data'
        });
        
        
        // create the editor grid
        var grid = new Ext.grid.EditorGridPanel({
            id:'myGrid',
            renderTo : document.body,
            store: store,
            cm: cm,
            width:600,
            height:300,
            frame:true,
            plugins:checkColumn,
            clicksToEdit:1,
            viewConfig:{
                forceFit:true
            },
            bbar : [{
                text : 'load',
                handler: function(){
                    Ext.getCmp('myGrid').store.loadData({"data":[{"function_id":"3","function_name":"Marquee","function_section":"CMR Operations","employee_id":"admin","updated_on":null,"updated_by":null,"granted":true},{"function_id":"10","function_name":"GMail","function_section":"Google","employee_id":"admin","updated_on":null,"updated_by":null,"granted":false},{"function_id":"11","function_name":"Google Images","function_section":"Google","employee_id":"admin","updated_on":null,"updated_by":null,"granted":true},{"function_id":"14","function_name":"Recorder","function_section":"CMR QA","employee_id":"admin","updated_on":null,"updated_by":null,"granted":false},{"function_id":"2","function_name":"Salaried Time Entry","function_section":"CMR IT","employee_id":"admin","updated_on":null,"updated_by":null,"granted":false},{"function_id":"12","function_name":"Google Home","function_section":"Google","employee_id":"admin","updated_on":null,"updated_by":null,"granted":true},{"function_id":"1","function_name":"Asset Management","function_section":"CMR IT","employee_id":"admin","updated_on":null,"updated_by":null,"granted":false}]})
                }
            }]
        });
    });

  8. #8
    Sencha User
    Join Date
    Aug 2007
    Location
    Edinburgh
    Posts
    49
    Vote Rating
    0
    lburgess is on a distinguished road

      0  

    Default


    Me neither. I used your code and data without any problems at all.

Thread Participants: 2