1. #1
    Ext User SpiderMac's Avatar
    Join Date
    Apr 2007
    Posts
    14
    Vote Rating
    0
    SpiderMac is on a distinguished road

      0  

    Default grid checkbox renders incorrectly first then works fine

    grid checkbox renders incorrectly first then works fine


    I have a gris with 4 checkboxes per row. the first checkbox renders fine (unchecked for a null value - I haven't checked with a zero value yet), the other 3 on each row render correctly as unchecked but are apparently checked but falsely rendered while the ones that are checked are correctly rendered and respond correctly.

    i.e.
    row one has 1st unchecked, 2nd checked, 3rd unchecked, 4th checked
    if you click 1st, it responds correctly, 2nd responds correctly, 3rd requires 2 clicks, 4th responds fine.

    http://michaelmcculley.com/Popups/

    I have an example set up. This is the only thing keeping me from making this live on our site.

    here is the code:

    PHP Code:
    Ext.BLANK_IMAGE_URL '../../resources/images/default/s.gif';

    Ext.namespace('myNameSpace'); //define namespace with some 'name'

    myNameSpace.myModule = function(){

        var 
    colModel;                    //definition of the columns
        
    var ds;                             //primary data store
        
    var grid;                        //the grid component (object)
        
    var myReader;                    //reader
        
    var myRecordObj;                 //data record object
        
    var primaryKey='IDProsp';     //primary key is used several times throughout
        
    var win;                         //pop up window

        
    var setupDataSource = function(){
            
    myRecordObj Ext.data.Record.create([
                {
    nameprimaryKey},        //this corresponds to 'companyID', I assigned a
                                           //variable to this value since it is used
                                           //multiple times throughout this code (see the
                                           //Private Variable definitions)
                
    {name'IDProsp'type'int'mapping'IDProsp'},
                {
    name'Customer'type'string'mapping'Customer'},
                {
    name'Salesperson'type'string'mapping'Salesperson'},
                {
    name'Time'type'string'mapping'Time'},
                {
    name'Home'type'string'mapping'Home'},
                {
    name'Work'type'string'mapping'Work'},
                {
    name'Mobile'type'string'mapping'Mobile'},
                {
    name'Show'},
                {
    name'NoShow'},
                {
    name'Sold'},
                {
    name'Confirmed'}
            ]);

            
    myReader = new Ext.data.JsonReader//creates array from JSON response
            
    {
                
    root'results'//delimiter tag for each record (row of data)
                
    totalProperty'total',//element containing total dataset size (opt 
                
    idprimaryKey //used several times so a Private Variable is used
            
    },
                
    myRecordObj//pass a reference to the object 
            
    );

            
    ds = new Ext.data.GroupingStore({ //if grouping
                
    proxy: new Ext.data.HttpProxy({
                    
    url'appts.php'//url to data object (server side script)
                    
    method'POST'
                
    }),   
                
    baseParams:{task"readAppts"},//This parameter is passed for any
                
    readermyReader,
                
    sortInfo:{field'Time'direction"ASC"}
            });
    //end ds
        
    };//end setupDataSource  

        
    var getColumnModel = function(){
            if(!
    colModel) { //only need to create columnModel if it doesn't already exist

                
    function renderDate(value){
                    
    //Ext.util.Format.dateRenderer('m/d/Y')
                    
    return value value.dateFormat('M d, Y') : '';
                };

                
    this.checkShow = new Ext.grid.CheckColumn({
                    
    header"Show",
                    
    dataIndex'Show'
                    
    width:80,
                    
    sortabletrue
                
    });

                
    this.checkNoShow = new Ext.grid.CheckColumn({
                    
    header"No Show",
                    
    dataIndex'NoShow'
                    
    width:80,
                    
    sortabletrue
                
    });

                
    this.checkSold = new Ext.grid.CheckColumn({
                    
    header"Sold",
                    
    dataIndex'Sold'
                    
    width:80,
                    
    sortabletrue
                
    });

                
    this.checkConfirmed = new Ext.grid.CheckColumn({
                    
    header"Confirmed",
                    
    dataIndex'Confirmed'
                    
    width:80,
                    
    sortabletrue
                
    });

                
    colModel = new Ext.grid.ColumnModel([ //instantiate ColumnModel
                    
    {
                        
    header'#',
                        
    dataIndex'IDProsp',
                        
    readOnlytrue,
                        
    autoWidth:true,
                        
    hiddentrue
                    
    },{
                        
    header'Customer',
                        
    dataIndex'Customer',
                        
    readOnlytrue,
                        
    autoWidth:true
                    
    },{
                        
    header'Salesperson',
                        
    dataIndex'Salesperson',
                        
    readOnlytrue,
                        
    autoWidth:true
                    
    },{
                        
    header'Appt Time',
                        
    dataIndex'Time',
                        
    format:"H:i",
                        
    width:80
                    
    },{
                        
    header'Home',
                        
    dataIndex'Home',
                        
    readOnlytrue,
                        
    autoWidth:true
                    
    },{
                        
    header'Work',
                        
    dataIndex'Work',
                        
    readOnlytrue,
                        
    autoWidth:true
                    
    },{
                        
    header'Mobile',
                        
    dataIndex'Mobile',
                        
    readOnlytrue,
                        
    autoWidth:true,
                        
    hiddentrue
                    
    },
                    
    checkConfirmed,
                    
    checkShow,
                    
    checkNoShow,
                    
    checkSold
                
    ]);//end colModel
            
    }//end if colModel
            
            
    return colModel;//if colModel already exists return it
            
        
    }//end getColumnModel


        
    var buildGrid = function(){

            function 
    handleEdit(editEvent) {
                
    //determine what column is being edited
                
    var gridField editEvent.field;
                
                
    //start the process to update the db with cell contents
                
    updateDB(editEvent);
                
                
    //I don't want to wait for server update to update the Total Column
                
    if (gridField == 'price'){
                    
    getTax(editEvent);//start the process to update the Tax Field
                
    }
            }

            function 
    onCheckColumn(elementerecord) {
                
    //remember 'on' is just a shortcut for 'addListener'
                //maybe this should listen to 'dblclick' instead?
                
                  //alert(record.get('check'));
                
    var myField this.dataIndex;//the field name
                
    var check record.data[this.dataIndex];//same as record.data.check (but more abstract)
                
    var checkStatus check 'checked' 'unchecked';
                var 
    checkItem record.data.Customer;
                var 
    checkID record.data.IDProsp;
                
    alert('myField: ' myField '\n' 'check: ' check '\n' 'checkStatus: ' checkStatus '\n' 'checkItem: ' checkItem '\n' 'checkID: ' checkID '\n');
                var 
    checkBoolean check 0;

                
    //update the database
                
    Ext.Ajax.request(
                    { 
    //ajax request configuration  
                        
    waitMsg'Saving changes...',
                        
    url'appts.php'//url to server side script
                        
    params: { //these will be available via $_POST or $_REQUEST:
                            
    task"update"//pass task to do to the server script
                            
    keyprimaryKey,//pass to server same 'id' that the reader used
                            
    keyIDcheckID,//for existing records this is the unique id (we need this one to relate to the db)
                            
    fieldmyField,//the column name
                            
    valuecheckBoolean,//the updated value
                            
    originalValue: !checkBoolean
                            
    //the original value (oGrid_Event.orginalValue does not work for some reason)
                        
    },//end params
                        
    failure:function(response,options){
                            
    Ext.MessageBox.alert('Warning','Oops...');
                        },
    //end failure block                                      
                        
    success:function(response,options){
                            
    //Ext.MessageBox.alert('Success','Yeah...');
                            
    if(checkID == 0){
                                var 
    responseData Ext.util.JSON.decode(response.responseText);//passed back from server
                                
    var newID responseData.newID;//extract the ID provided by the server
                                
    record.set('newRecord','no');//reset the indicator since update succeeded
                                
    record.set('IDProsp',newID);//assign the id to the record
                                
    ds.commitChanges();//commit changes (removes the red triangle which indicates a 'dirty' field)
                            
    } else {
                                
    ds.commitChanges();//commit changes (removes the red triangle which indicates a 'dirty' field)
                            
    }
                        }
    //end success block                                      
                     
    }//end ajax request config
                
    ); //end ajax request  
            
    }; // end onCheckColumn handler
            
            
    function onItemCheck(itemchecked){
                
    Ext.example.msg('Item Check''You {1} the "{0}" menu item.'item.textchecked 'checked' 'unchecked');
            }

            function 
    refreshGrid() {
                
    ds.reload();//
            
    }; // end refresh 


            
    function updateDB(oGrid_Event) {
                if (
    oGrid_Event.value instanceof Date)
                {   
    //format the value for easy insertion into MySQL
                    
    var fieldValue oGrid_Event.value.format('Y-m-d H:i:s');
                } else
                {
                    var 
    fieldValue oGrid_Event.value;
                }    
                        
                
    Ext.Ajax.request//alternative to Ext.form.FormPanel? or Ext.BasicForm
                    
    {   //Specify options (note success/failure below that
                        
    waitMsg'Saving changes...',
                        
    url'grid-editor-mysql-php.php'
                        
    params: { 
                            
    task"update"//pass task to do to the server script
                            
    keyprimaryKey,//pass to server same 'id' that the reader used
                            
    keyIDoGrid_Event.record.data.companyID,
                            
    fieldoGrid_Event.field,//the column name
                            
    valuefieldValue,//the updated value
                            
    originalValueoGrid_Event.record.modified
                            
                        
    },//end params
                        
                        
    failure:function(response,options){
                            
    Ext.MessageBox.alert('Warning','Oops...');
                            
    //ds.rejectChanges();//undo any changes
                        
    },//end failure block   
                        
                        
    success:function(response,options){
                            if(
    oGrid_Event.record.data.companyID == 0){
                                var 
    responseData Ext.util.JSON.decode(response.responseText);//passed back from server
                                
    var newID responseData.newID;
                                
    oGrid_Event.record.set('newRecord','no');
                                
    oGrid_Event.record.set('companyID',newID);
                                
    ds.commitChanges();
                            } else {
                                
    ds.commitChanges();
                            }
                        }
    //end success block                                      
                     
    }//end request config
                
    ); //end request  
            
    }; //end updateDB 

            
    grid = new Ext.grid.EditorGridPanel({ //to instantiate editor grid
                
    autoExpandColumn'Customer'
                
    clicksToEdit:1,//number of clicks to activate cell editor, default = 2        
                
    colModelgetColumnModel(), //gets the ColumnModel object to use (cm: is shorthand)
                
    height:350,//you must specify height or autoHeight
                 
    iconCls'icon-grid',//we create our own css with a class called 'icon-grid'
                
    id'myGridID',//unique id of this component (defaults to an auto-assigned id).        
                
    loadMasktrue,//use true to mask the grid while loading (default = false)
                
    plugins:[this.checkShowthis.checkNoShowthis.checkConfirmedthis.checkSold],//object or array of objects (filters = enable filtering of records)
                
    selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),//true to limit row selection to 1 row})
                
    storeds,       //the DataStore object to use (ds: is shorthand)
                
    stripeRowstrue,//applies css classname to alternate rows, defaults to false
                
    title:'Appointments for Today',
                
    width:740,

                
                
    view: new Ext.grid.GroupingView({
                    
    forceFit:true,
                    
    groupTextTpl'{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
                
    })
            });
    //end grid


    //        grid.addListener('rowcontextmenu', onMessageContextMenu);
            
    grid.addListener('afteredit'handleEdit);//give event name, handler (can use 'on' shorthand for addListener) 
            
    this.checkShow.on('click'onCheckColumn); 
            
    this.checkNoShow.on('click'onCheckColumn); 
            
    this.checkConfirmed.on('click'onCheckColumn); 
            
    this.checkSold.on('click'onCheckColumn); 
        }
    //end function buildGrid


        
    var renderGrid = function() {  
            
    grid.render('grid-company');//1st argument is the container,
        
    };//end function renderGrid

        
    var loadStore = function() {  
            
    ds.load({
                
    params: { //this is only parameters for the FIRST page load,
                          //use baseParams above for ALL pages.
    //                start: 0, //pass start/limit parameters for paging
    //                limit: myNameSpace.myModule.perPage//
                
    }
            }); 
            
    grid.getSelectionModel().selectFirstRow();
        };
    //end loadStore

        
    return {//returns an object=myNameSpace.myModule with the following
            
    myPublicProperty"I'm accessible as myNameSpace.myModule.myPublicProperty.",
    //        perPage: 10, //page limit
            
    myPublicMethod: function(){
                var 
    myOtherProperty this.myPublicProperty 
                
    return myPrivateVar
            },

            
    init : function(){

                
    Ext.grid.CheckColumn = function(config){
                    
    this.addEvents({
                        
    clicktrue
                    
    });
                    
    Ext.grid.CheckColumn.superclass.constructor.call(this);
                    
                    
    Ext.apply(thisconfig, {
                        
    init : function(grid){
                            
    this.grid grid;
                            
    this.grid.on('render', function(){
                                var 
    view this.grid.getView();
                                
    view.mainBody.on('mousedown'this.onMouseDownthis);
                            }, 
    this);
                        },
                    
                        
    onMouseDown : function(et){
                            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]);
                                
    this.fireEvent('click'thiserecord);
                            }
                        },

                        
    renderer : function(vprecord){
                            
    //the +v type converts to a number (json returns a string
                            //which always evaluates true)
                            
    var checkState = (+v=='0') ? '' '-on';
                            
                            
    p.css += ' x-grid3-check-col-td'
                          
                          
    //return '<div class="x-grid3-check-col'+(v?'-on':'')+' x-grid3-cc-'+this.id+'"> </div>';
                            
    return '<div class="x-grid3-check-col'checkState +' x-grid3-cc-'+this.id+'"> </div>';
                        }
                    });
                    
                  if(!
    this.id){
                      
    this.id Ext.id();
                  }
                  
    this.renderer this.renderer.createDelegate(this);
                };
                
    Ext.extend(Ext.grid.CheckColumnExt.util.Observable);
                
    this.getMyGrid();
            },
    //end of init method
            
    getMyGrid: function() {  
                
                var 
    myStep = -1;
                
    Ext.QuickTips.init();//Enable Quicktips
                
    setupDataSource();   //Setup the Data Source
                
    buildGrid();         //Build the Grid
                
    renderGrid();        //Render the Grid
                
    loadStore();         //Load the Store
            
    },
            
    getDataSource: function() {  
                return 
    ds;
            }
        }
    //end of return
    }(); /* End of application. */
    Ext.onReady(
                    
    myNameSpace.myModule.init
                    
    myNameSpace.myModule
                    
    true
                
    ); 


    P.S. the back side (database) is currently disconnected for any changes that you make so play around with it without fear.

    Thanks for any help on this.

  2. #2
    Ext User SpiderMac's Avatar
    Join Date
    Apr 2007
    Posts
    14
    Vote Rating
    0
    SpiderMac is on a distinguished road

      0  

    Default Figured it out

    Figured it out


    I probably won't explain this right, but json was returning 1's and 0's for true and false. I changed the array that json was returning to return true and false. I am not sure what the difference was as far as json was concerned but changing the array that json processed did the trick.