We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 5340
    • 1,624 Posts
    Hi,

    I am trying to have a ext js grid with a checkbox. Currently the checkbox has correct values when I edit the item through the menu(Update, Create new) but I get a js error when I check the box directly in the grid.

    As example please install Redirector from the repository. Currently there is a bug with checking grid checkboxes.

    in firebug I get:

    e is undefined
    [Break On This Error] e.record.data.menu = null; 


    In chrome I get

    Uncaught TypeError: Cannot read property 'record' of undefined
    Ext.extend.saveRecord
    h.Event.firee
    h.Observable.fireEvent
    Ext.ux.grid.CheckColumn.onMouseDown
    K


    Do I need some sort of event listener? I just need to replicate the inline editing fiunctionality

    Thank you
      • 5340
      • 1,624 Posts
      Hi,

      I managed to fix the error but I am not sure how to send the the information to the db. I’m trying to fire a save with "mgr/survey/updateFromGrid" but I am not sure how
      var cb = new Ext.ux.grid.CheckColumn({
          header: _('survey.active')
          ,dataIndex: 'active'
          ,width: 40
          ,sortable: true
          ,onMouseDown: function(e, t){
             
              //onMouseDown removes the js error     
              //I need a way to send the grid row to updateFromGrid
      
          }
      });
      

      from redirects.grid.js

      Thanks
        • 28215
        • 4,149 Posts
        Can you post your entire grid code?
          shaun mccormick | bigcommerce mgr of software engineering, former modx co-architect | github | splittingred.com
          • 5340
          • 1,624 Posts
          Hi,

          Check/uncheck works
          I can send stuff to the connector

          I don’t know how do get the row information and put it in the data var

          Here’s the entire survey.grid.js. Basically it’s the redirects.grid.js with different names

          Survey.grid.Survey = function(config) {
              config = config || {};
              var cb = new Ext.ux.grid.CheckColumn({
                  header: _('survey.active')
                  ,dataIndex: 'active'
                  ,width: 40
                  ,sortable: true
                  ,onMouseDown: function(e, t){
                      
                      //checks/unchecks
                      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]);
                      }
                      
                      //send ajax request to update the data
                      Ext.Ajax.request({
                      	url : Survey.config.connectorUrl , 
                      	params : { action : 'mgr/survey/updateFromGrid', data: {/* how do I get the row */} },
                      	method: 'POST',
                      	success: function ( result, request ) { 
                      		//Ext.MessageBox.alert('Success', 'Data return from the server: '+ result.responseText); 
                      		console.log(1);
                      	},
                      	failure: function ( result, request) { 
                      		//Ext.MessageBox.alert('Failed', result.responseText);
                      		console.log(0); 
                      	} 
                      });
                      
                      
                  }
              });
              
              Ext.applyIf(config,{
                  id: 'survey-grid-survey'
                  ,url: Survey.config.connectorUrl
                  ,baseParams: { action: 'mgr/survey/getList' }
                  ,fields: ['id','name','description','active','menu']
                  ,paging: true
                  ,remoteSort: true
                  ,anchor: '95%'
                  ,autoExpandColumn: 'name'
                  ,save_action: 'mgr/survey/updateFromGrid'
                  ,autosave: true
                  ,plugins: [cb]
                  ,columns: [{
                      header: _('id')
                      ,dataIndex: 'id'
                      ,sortable: true
                      ,width: 60
                  },{
                      header: _('survey.name')
                      ,dataIndex: 'name'
                      ,sortable: true
                      ,width: 100
                      ,editor: { xtype: 'textfield' }
                  },{
                      header: _('survey.description')
                      ,dataIndex: 'description'
                      ,sortable: false
                      ,width: 350
                      ,editor: { xtype: 'textfield' }
                  }, cb]
                  ,tbar:[{
                      xtype: 'textfield'
                      ,id: 'survey-search-filter'
                      ,emptyText: _('survey.search...')
                      ,listeners: {
                          'change': {fn:this.search,scope:this}
                          ,'render': {fn: function(cmp) {
                              new Ext.KeyMap(cmp.getEl(), {
                                  key: Ext.EventObject.ENTER
                                  ,fn: function() {
                                      this.fireEvent('change',this);
                                      this.blur();
                                      return true;
                                  }
                                  ,scope: cmp
                              });
                          },scope:this}
                      }
                      
                  }
                  ,{
                      text: _('survey.survey_create')
                      ,handler: { xtype: 'survey-window-survey-create' ,blankValues: true }
                  }]
                  
                  
              });
              Survey.grid.Survey.superclass.constructor.call(this,config)
          };
          
          Ext.extend(Survey.grid.Survey,MODx.grid.Grid,{
              search: function(tf,nv,ov) {
                  var s = this.getStore();
                  s.baseParams.query = tf.getValue();
                  this.getBottomToolbar().changePage(1);
                  this.refresh();
              }
              ,getMenu: function() {
                  var m = [{
                      text: _('survey.survey_update')
                      ,handler: this.updateSurvey
                  },'-',{
                      text: _('survey.survey_remove')
                      ,handler: this.removeSurvey
                  }];
                  this.addContextMenuItem(m);
                  return true;
              }
              ,updateSurvey: function(btn,e) {
                  if (!this.updateSurveyWindow) {
                      this.updateSurveyWindow = MODx.load({
                          xtype: 'survey-window-survey-update'
                          ,record: this.menu.record
                          ,listeners: {
                              'success': {fn:this.refresh,scope:this}
                          }
                      });
                  } else {
                      this.updateSurveyWindow.setValues(this.menu.record);
                  }
                  this.updateSurveyWindow.show(e.target);
              }
              ,removeSurvey: function() {
                  MODx.msg.confirm({
                      title: _('survey.survey_remove')
                      ,text: _('survey.survey_remove_confirm')
                      ,url: this.config.url
                      ,params: {
                          action: 'mgr/survey/remove'
                          ,id: this.menu.record.id
                      }
                      ,listeners: {
                          'success': {fn:this.refresh,scope:this}
                      }
                  });
              }
          });
          Ext.reg('survey-grid-survey',Survey.grid.Survey);
          
          Survey.window.UpdateSurvey = function(config) {
              config = config || {};
              Ext.applyIf(config,{
                  title: _('survey.survey_update')
                  ,url: Survey.config.connectorUrl
                  ,baseParams: {
                      action: 'mgr/survey/update'
                  }
                  ,fields: [{
                      xtype: 'hidden'
                      ,name: 'id'
                  },{
                      xtype: 'textfield'
                      ,fieldLabel: _('survey.name')
                      ,name: 'name'
                      ,width: 300
                  },{
                      xtype: 'textarea'
                      ,fieldLabel: _('survey.description')
                      ,name: 'description'
                      ,width: 300
                  },{
                      xtype: 'checkbox'
                      ,fieldLabel: _('survey.active')
                      ,name: 'active'
                      ,inputValue: 1
                  }]
              });
              Survey.window.UpdateSurvey.superclass.constructor.call(this,config);
          };
          Ext.extend(Survey.window.UpdateSurvey,MODx.Window);
          Ext.reg('survey-window-survey-update',Survey.window.UpdateSurvey);
          
          
          Survey.window.CreateSurvey = function(config) {
              config = config || {};
              Ext.applyIf(config,{
                  title: _('survey.survey_create')
                  ,url: Survey.config.connectorUrl
                  ,baseParams: {
                      action: 'mgr/survey/create'
                  }
                  ,fields: [{
                      xtype: 'textfield'
                      ,fieldLabel: _('survey.name')
                      ,name: 'name'
                      ,width: 300
                  },{
                      xtype: 'textarea'
                      ,fieldLabel: _('survey.description')
                      ,name: 'description'
                      ,width: 300
                  },{
                      xtype: 'checkbox'
                      ,fieldLabel: _('survey.active')
                      ,name: 'active'
                      ,inputValue: 1
                      ,checked: false
                  }]
              });
              Survey.window.CreateSurvey.superclass.constructor.call(this,config);
          };
          Ext.extend(Survey.window.CreateSurvey,MODx.Window);
          Ext.reg('survey-window-survey-create',Survey.window.CreateSurvey);


            • 28215
            • 4,149 Posts
            Hrm, I’ve never tried an auto-save with a custom checkbox adapter like that before. Always used combo-boolean editor xtype for that case.

            That said, the answer’s in your code:

            var index = this.grid.getView().findRowIndex(t);
            var record = this.grid.store.getAt(index);
            

            Then access ’record.data’ to get all the data for the current active row.
              shaun mccormick | bigcommerce mgr of software engineering, former modx co-architect | github | splittingred.com
              • 5340
              • 1,624 Posts
              I’ll be glad to use a different solution but I have no other idea on how to fire an event when the checkbox is clicked.
                • 5340
                • 1,624 Posts
                Hi,

                I ended up with this and it seems to be working. This re-saves the entire row when the active checkbox is clicked.

                I have a few questions for the modx/extjs gurus:

                1. Is this the correct way to update the information on CheckColumn click?
                I know we can optimize it by using a different connector but I don’t think is necessary.
                Also have a look at my comments as I had to do some workarounds sending unneeded ajax requests
                2. Is there a recommended procedure for handling the ajax success and failure.
                Currently I think success and failure can be removed but I might be wrong


                Here’s the code:

                var cb = new Ext.ux.grid.CheckColumn({
                        header: _('survey.active')
                        ,dataIndex: 'active'
                        ,width: 40
                        ,sortable: true
                        ,onMouseDown: function(e, t){
                            
                            
                            var rowData = "";//holdes the 
                            //checks/unchecks
                            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]);
                                rowData = record.data;//save row records. will be used in the ajax request
                            }
                            
                            /*
                            !!!seems that this is triggered by a row click and checkbox click
                            don't send the ajax request if the rowData is empty. rowData is empty if the row is clicked.
                            */
                            if(rowData){
                                //send ajax request to update the data
                                Ext.Ajax.request({
                                	url : Survey.config.connectorUrl , 
                                	params : { action : 'mgr/survey/updateFromGrid', data: Ext.util.JSON.encode(rowData)},
                                	method: 'POST',
                                	success: function ( result, request ) { 
                                		//Ext.MessageBox.alert('Success', 'Data return from the server: '+ result.responseText); 
                                		//console.log(1);
                                	},
                                	failure: function ( result, request) { 
                                		//Ext.MessageBox.alert('Failed', result.responseText);
                                		//console.log(0); 
                                	} 
                                });
                            }
                        }
                    });
                  • 5340
                  • 1,624 Posts
                  Hi,

                  Another solution is to somehow trigger the save_action: ’myAction’ in the Grid.
                  Any ideas on how I can target the grid.

                  Thank you
                    • 31053
                    • 31 Posts
                    to cipa
                    Thank u for solution, actualy I hate Ext and can’t understad how it works sad

                    btw, I added code on success, this kill dirty red mark.
                    success: function ( result, request ) { 
                    	var classLinks = Ext.query('.x-grid3-dirty-cell');
                    	Ext.each(classLinks, function(item,index){
                    		var el = Ext.get( item ); 
                    		el.removeClass('x-grid3-dirty-cell')
                    	});
                    },
                    


                    Ok, it kill ALL dirty marks on page. I donno how remove exact mark smiley But it works fine for me.
                    Thanks agan!
                      for($i=0; $i<100; $i++) echo &#39;Why is it not working?&#39;;
                      • 5340
                      • 1,624 Posts
                      What dirty red mark? smiley