Editor on a new (custom) column does not refresh grid cell

Ask for help related to our 2.x versions.

Editor on a new (custom) column does not refresh grid cell

Postby alexandru » Wed Jan 16, 2013 4:45 pm

We are having problems with the extension of the grid on the left of the gantt chart. More precise, we added a new column called "Assigned Responsible". This column contains the name of a ressource (the responsible person for the oversight / stakeholder). We also added to this column the edit feature (double click on a cell, you get the list of all ressources, then choose one or more).


The issue we are are having is with the edit window. You can select a ressource, but when you click "Save and Close", the cell inside the grid is not being updated.

To better describe the issue, here are 2 scenarios that we tested:

1) if you double click a cell in the "Assigned Responsible" column, choose some other value, then click "Save and Close", the cell in the grid is not being updated. But if you double click the cell again, the edit dialog contains the edited / checked Ressources. Conclusion: the store gets the updates.

2) if you double click a cell in the "Assigned Responsible" column, choose some other value, then click "Save and Close", the cell in the grid is not being updated. But if you edit a cell in the "Assigned Resources" column, the original cell from "Assigned Responsible" also gets updated.


We suspect that somehow the column does not get refreshed properly.

For reference, here are the class deffinitions we used to create this column:


Code: Select all
Ext.define("Gnt.column.ResponsibleAssignment", {
    extend      : "Ext.grid.column.Column",
    alias       : "widget.responsiblecolumn",
   
    text        : 'Assigned Responsible',
   
    dataIndex   : 'id',     // The task id
    tdCls       : 'sch-responsible-cell',


Ext.define('Gnt.widget.ResponsibleCellEditor', {
    extend      : 'Ext.grid.CellEditor',
   
    requires    : [
        'Gnt.model.Assignment',
        'Gnt.widget.ResponsibleField'
    ],


Ext.define('Gnt.widget.ResponsibleField', {
    extend      : 'Ext.form.field.Picker',
   
    alias       : 'widget.responsibleeditor',
   
    requires    : [
        'Gnt.widget.ResponsibleGrid'
    ],


Ext.define('Gnt.widget.ResponsibleGrid', {
   
    requires    : [
        'Gnt.model.Resource',
        'Gnt.model.Assignment',
        'Gnt.column.ResourceName2',
        'Gnt.column.AssignmentUnits2',
        'Ext.grid.plugin.CellEditing'
    ],
    extend                  : 'Ext.grid.Panel',
    alias                   : 'widget.responsiblegrid',
   
   
    readOnly                : false,
    cls                     : 'gnt-responsiblegrid',


Thanks for reading such a long post! any ideas are really appreciated (i already looked into the extjs framework and its quite frustrating).

Attached you can find the full javascript code.
Attachments
roadmap-js.php.js
original file name: roadmap-js.php, mostly store deffinitions
(9.09 KiB) Downloaded 159 times
roadmap-GanttPanel.js
this contains the most logic, most likely the issue is in this file
(41.5 KiB) Downloaded 176 times
User avatar
alexandru
 
Posts: 10
Joined: Wed Jan 16, 2013 4:18 pm
Location: Linz, Austria

Re: Editor on a new (custom) column does not refresh grid ce

Postby mats » Wed Jan 16, 2013 5:25 pm

Your 'dataIndex' of your column points to 'id'? It should instead use a renderer to render the name of the assigned resource?
Tired of debugging javascript errors in web applications? Try our new error logging service RootCause, or read more on the Sencha blog

@bryntum
Facebook
API documentation
User avatar
mats
Core Developer
Core Developer
 
Posts: 12761
Joined: Sat Dec 19, 2009 11:41 pm
Location: Sweden

Re: Editor on a new (custom) column does not refresh grid ce

Postby alexandru » Wed Jan 16, 2013 6:05 pm

i dont think dataIndex is really needed, i removed it now and the behavior is the same. Anyway, i was using the renderer function to display the value.

Gnt.column.ResponsibleAssignment is almost a exact copy of Gnt.column.ResourceAssignment , the only change was regarding the renderer. This change was necessary because in renderer, responsible.getResourceName() always returned null.

I have attached the current file, with the commented out dataIndex. Inside you can the renderer function used.
Attachments
roadmap-GanttPanel.js
GanttPanel without dataIndex
(41.57 KiB) Downloaded 164 times
User avatar
alexandru
 
Posts: 10
Joined: Wed Jan 16, 2013 4:18 pm
Location: Linz, Austria

Re: Editor on a new (custom) column does not refresh grid ce

Postby mats » Wed Jan 16, 2013 11:02 pm

Where is the data you are trying to render? In the assignment store right? You need to use a renderer to solve this. Look at the source for the assignment column for guidance.
Tired of debugging javascript errors in web applications? Try our new error logging service RootCause, or read more on the Sencha blog

@bryntum
Facebook
API documentation
User avatar
mats
Core Developer
Core Developer
 
Posts: 12761
Joined: Sat Dec 19, 2009 11:41 pm
Location: Sweden

Re: Editor on a new (custom) column does not refresh grid ce

Postby alexandru » Thu Jan 17, 2013 11:02 am

the data is in a separate store (responsible store). Yes, i took the asssignment implementation as guidance (store, column and everything, its almost a copy / paste).

Here is the renderer function:

Code: Select all
renderer : function(value, meta, task, rowIndex, colIndex, store, view) {

 
       var names             = [],
   responsibleStore      = this.responsibleStore,
   responsible;
       taskId              = task.getInternalId();

        if(value==1){
            console.log("renderer called, store values => "+responsibleStore.resourceStore.getCount());
        }

              //console.log(responsibleStore);
               //console.log(responsibleStore.resourceStore.getCount());

        if (responsibleStore.resourceStore.getCount() > 0) {
            for (var i = 0, l = responsibleStore.getCount(); i < l; i++) {
                responsible  = responsibleStore.getAt(i);



          if (responsible.getTaskId() === taskId) {

                   //       console.log(responsible.data.ResourceId);
                   //       console.log(responsible.data.TaskId);
               //   console.log(responsibleStore.resourceStore.data);
                  //console.log(responsibleStore.resourceStore.getById(responsible.data.ResourceId).data.Name);

//                    names.push(Ext.String.format(this.formatString, responsible.getResourceName()));
                    names.push(Ext.String.format(this.formatString, responsibleStore.resourceStore.getById(responsible.data.ResourceId).data.Name));

                    //console.log(Ext.String.format(this.formatString, responsibleStore.resourceStore.getById(responsible.data.ResourceId).data.Name));
                }
            }
            return names.join(', ');
        }

     }
});


you can see that its almost the same as the one from the resource assignment column. The only change that we did was to replace responsible.getResourceName() , becaue it always returned null. As far as we found out, the store gets the updates (based on test number 2 from my first message), its just the grid (display) that apparently does not get refreshed.
User avatar
alexandru
 
Posts: 10
Joined: Wed Jan 16, 2013 4:18 pm
Location: Linz, Austria

Re: Editor on a new (custom) column does not refresh grid ce

Postby mats » Thu Jan 17, 2013 11:14 am

So you want to refresh the locked grid when there is a change in your own responsible store? Then all you have to do is to setup some listeners: "on record update, refresh locked view", "on record add, refresh locked view" etc
Tired of debugging javascript errors in web applications? Try our new error logging service RootCause, or read more on the Sencha blog

@bryntum
Facebook
API documentation
User avatar
mats
Core Developer
Core Developer
 
Posts: 12761
Joined: Sat Dec 19, 2009 11:41 pm
Location: Sweden

Re: Editor on a new (custom) column does not refresh grid ce

Postby alexandru » Thu Jan 17, 2013 11:21 am

just to make it clear: i don't think the renderer function is the issue. The infos are displayed properly when displaying the grid initially.

Its just after editing the values using ResponsibleCellEditor (a almost exact copy of AssignmentCellEditor ), that the new chosen value is not displayed in the grid. If you edit the cell with the old/wrong value, a new ResponsibleCellEditor opens and the right value is checked. That is consistent with our tests that show that the store gets updated, its just the grid that does not refresh.

For reference, here is the ResponsibleCellEditor function:

Code: Select all
Ext.define('Gnt.widget.ResponsibleCellEditor', {
    extend      : 'Ext.grid.CellEditor',
   
    requires    : [
        'Gnt.model.Assignment',
        'Gnt.widget.ResponsibleField'
    ],
   
    /**
     * @cfg {Ext.data.Store} assignmentStore A store with assignments
     */
    assignmentStore     : null,
   
    /**
     * @cfg {Ext.data.Store} resourceStore A store with resources
     */
    resourceStore       : null,
   
    /**
     * @property {String} taskId An id of the task assignments of which are currently being edited
     */
    taskId              : null,
   
    /**
     * @cfg {Object} fieldConfig An object with configuration options for the {@link Gnt.widget.ResponsibleField}
     */
    fieldConfig         : null,
   
    // Without this setting, the picker will be collapsed when clicking the unit spinner arrows.
    allowBlur           : false,

    constructor: function (config) {
        config              = config || {};
        var fieldConfig     = config.fieldConfig || {};
       
        this.field = Ext.create("Gnt.widget.ResponsibleField", Ext.apply(fieldConfig, {
            assignmentStore     : config.assignmentStore,
            resourceStore       : config.resourceStore
        }));
       
        this.field.on({
            select : this.onSelect,
            collapse : this.cancelEdit,
            scope : this
        });
        this.callParent(arguments);
    },
   

    startEdit : function(el, value, context) {
        // this causes the editor to be rendered into <body> and prevents the 1px displacement of view during editing
        this.parentEl = null;

        var cellText = el.child('div').dom.innerHTML;
        this.taskId = this.field.taskId = context.record.getInternalId();
       
        this.callParent([el, cellText === '&nbsp;' ? '' : cellText]);
       
        this.field.expand();
    },

   
    onSelect : function(field, assignments) {
        this.completeEdit();

        var aStore      = this.assignmentStore,
            taskId      = this.taskId;
       
        var assignmentsToStay   = {};
        var newAssignments      = [];
           
        assignments.each(function (resourceAssignmentRecord) {
            var units = resourceAssignmentRecord.getUnits();
           
            if (units > 0) {
                var id      = resourceAssignmentRecord.getId();
               
                if (id) {
                    assignmentsToStay[ id ] = true;
                   
                    aStore.getById(id).setUnits(units);
                } else {
                    var newAssignment = Ext.create(aStore.model);
                    newAssignment.setTaskId(taskId);
                    newAssignment.setResourceId(resourceAssignmentRecord.getResourceId());
                    newAssignment.setUnits(units);
                   
                    assignmentsToStay[ newAssignment.internalId ] = true;
                   
                    newAssignments.push(newAssignment);
                }
            }
        });

        var assignmentsToRemove     = [];
       
        // Remove any assignments that
        // - are not phantom
        // - and have been unchecked (and thus are not included in `assignmentsToStay`)
        aStore.each(function (assignment) {
            //   assignment is for our task       | not phantom |       was unchecked
            if (assignment.getTaskId() === taskId && !assignmentsToStay[ assignment.getId() || assignment.internalId ]) {
                assignmentsToRemove.push(assignment);
            }
        });

        aStore.suspendAutoSync();

        aStore.remove(assignmentsToRemove);

        // Add selected assignments for this task
        aStore.add(newAssignments);

        aStore.resumeAutoSync();

        if (aStore.autoSync) {
            aStore.sync();
        }
        console.log(aStore);
    }
});
User avatar
alexandru
 
Posts: 10
Joined: Wed Jan 16, 2013 4:18 pm
Location: Linz, Austria

Re: Editor on a new (custom) column does not refresh grid ce

Postby alexandru » Thu Jan 17, 2013 11:26 am

ok, thanks mats, i'll look into the listeners.

Based on the fact that i based the extension almost 1:1 on your objects, did not think its necessary to implement my own listeners.
User avatar
alexandru
 
Posts: 10
Joined: Wed Jan 16, 2013 4:18 pm
Location: Linz, Austria

Re: Editor on a new (custom) column does not refresh grid ce

Postby mats » Thu Jan 17, 2013 11:46 am

You're missing the fact that the gantt panel knows of the assignment store, and therefor refreshes itself upon changes.

Code: Select all
bindAssignmentStore : function(assignmentStore, initial) {
        var me = this;

        if (!initial && me.assignmentStore) {
            if (assignmentStore !== me.assignmentStore && me.assignmentStore.autoDestroy) {
                me.assignmentStore.destroy();
            }
            else {
                me.mun(me.assignmentStore, {
                    scope: me,
                    datachanged : me.onAssignmentStoreDataChanged
                });
            }
            if (!assignmentStore) {
                me.assignmentStore = null;
            }
        }
        if (assignmentStore) {
            assignmentStore = Ext.data.StoreManager.lookup(assignmentStore);
            me.mon(assignmentStore, {
                scope: me,
                datachanged : me.onAssignmentStoreDataChanged
            });
            this.taskStore.setAssignmentStore(assignmentStore);
        }

        me.assignmentStore = assignmentStore;

        if (assignmentStore && !initial) {
            me.getView().refreshKeepingScroll();
        }
    },
Tired of debugging javascript errors in web applications? Try our new error logging service RootCause, or read more on the Sencha blog

@bryntum
Facebook
API documentation
User avatar
mats
Core Developer
Core Developer
 
Posts: 12761
Joined: Sat Dec 19, 2009 11:41 pm
Location: Sweden

Re: Editor on a new (custom) column does not refresh grid ce

Postby alexandru » Thu Jan 17, 2013 3:02 pm

you are right, that makes sense.

with the listener i have the problem of not knowing the function to call to refresh the cell, i tried a couple of options, and they don't work (the listener gets triggered). I know its maybe somehow of a newbie question, but what should i write to do a refresh ? (something like Gnt.panel.Gantt.lockedGrid.getView.refresh(); ? , but it did not work)

Code: Select all
Ext.define('Gnt.data.ResponsibleStore', {   
          requires    : ['Gnt.model.Assignment'],
          extend      : 'Ext.data.Store',   
          model       : 'Gnt.model.Assignment',
          taskStore   : null,
      listeners   : { add    : function() {
                // do the refresh
               },
              remove : function() {
                         }

                             },

          getTaskStore: function(){
             return this.taskStore;
          },

          getResourceStore: function(){
              return this.getTaskStore().resourceStore;
          },
     
          getByInternalId : function (id) {
              return this.data.getByKey(id) || this.getById(id);
          }
   });



Thanks for your patience!
User avatar
alexandru
 
Posts: 10
Joined: Wed Jan 16, 2013 4:18 pm
Location: Linz, Austria

Next

Return to Help (v2.x)

Who is online

Users browsing this forum: No registered users and 3 guests