multi grouping grid in coolite

Page 1 of 2 12 LastLast
  1. #1

    multi grouping grid in coolite

    ive been trying to adopt the multi grouping grid in coolite, so far i have managed to make a grid show in multi group by using what i got from EXTJS and adding it up to the coolite web project. but after the loading of the grid data i am having this error, although the data shows up fine

    <div role="listitem" class="errorTitle focusRow subLogRow ">this.fields.get(f) is undefined
    <div role="listitem" class="errorSourceBox errorSource-exec focusRow subLogRow ">[img]chrome://firebug/content/blank.gif[/img]<a class="errorSource a11yFocus ">this.fireEvent("load",this,r,options);if...data=th is.allData;delete this.allData;}\n

    i have added MultiGrouping.cs to the UX folder which contains this code

    </a>/********
     * @version   : 0.8.2 - Professional Edition (Coolite Professional License)
     * @author    : Coolite Inc. http://www.ext.net/
     * @date      : 2009-08-05
     * @copyright : Copyright (c) 2006-2009, Coolite Inc. (http://www.ext.net/). All rights reserved.
     * @license   : See license.txt and http://www.ext.net/license/. 
     ********/
    
    using System.ComponentModel;
    using System.Drawing;
    using System.Web.UI;
    using Coolite.Ext.Web;
    using System.Web.UI.WebControls;
    
    namespace Coolite.Ext.Web
    {
        [Xtype("multigroupstore")]
        [InstanceOf(ClassName = "Ext.ux.MultiGroupingStore")]
        [ClientScript(Type = typeof(MultiGroupingStore), FilePath = "/ux/extensions/multigrouping/multigrouping.js", WebResource = "Coolite.Ext.Web.Build.Resources.Coolite.ux.extensions.multigrouping.multigrouping.js")]
        [Designer(typeof(EmptyDesigner))]
        public class MultiGroupingStore : Store
        {
            /// <summary>
            /// The field name by which to sort the store's data (defaults to '').
            /// </summary>
            [ClientConfig("groupField", typeof(StringArrayJsonConverter))]
            [TypeConverter(typeof(StringArrayConverter))]
            [Category("Config Options")]
            [DefaultValue(null)]
            [Description("The field name by which to sort the store's data (defaults to '').")]
            public virtual string[] GroupFieldArray
            {
                get
                {
                    object obj = this.ViewState["GroupFieldArray"];
                    string[] groupfields = (obj == null) ? null : (string[])obj;
                    return groupfields;
                }
                set
                {
                    this.ViewState["GroupFieldArray"] = value;
                }
            }
        }
    
        [Xtype("multigroupview")]
        [InstanceOf(ClassName = "Ext.ux.MultiGroupingView")]
        [ClientScript(Type = typeof(MultiGroupingView), FilePath = "/ux/extensions/multigrouping/multigrouping.js", WebResource = "Coolite.Ext.Web.Build.Resources.Coolite.ux.extensions.multigrouping.multigrouping.js")]
        [Designer(typeof(EmptyDesigner))]
        public class MultiGroupingView : GroupingView
        {
        }
    
        [Xtype("multigroupgridpanel")]
        [InstanceOf(ClassName = "Ext.ux.MultiGroupingPanel")]
        [ClientScript(Type = typeof(MultiGroupingPanel), FilePath = "/ux/extensions/multigrouping/multigrouping.js", WebResource = "Coolite.Ext.Web.Build.Resources.Coolite.ux.extensions.multigrouping.multigrouping.js")]
        [Designer(typeof(EmptyDesigner))]
        public class MultiGroupingPanel : GridPanel
        {
        }
    }<a class="errorSource a11yFocus ">
    </a><a class="errorSource a11yFocus ">the appropriate multigrouping.js file is also in its corresponding ux folder (taken from the EXTJS forum, made some modifications to remove topbar which contains grouping columns)
    /**
     * @author chander
     */
    Ext.ux.MultiGroupingStore = Ext.extend(Ext.data.GroupingStore, {
        constructor: function(config){
            Ext.ux.MultiGroupingStore.superclass.constructor.apply(this, arguments);
        },
    
        sortInfo: [],
        
        sort: function(field, dir){
            //  alert('sort '+ field);
            var f = [];
            if (Ext.isArray(field)) {
                for (var i = 0, len = field.length; i < len; ++i) {
                    f.push(this.fields.get(field[i]));
                }
            } else {
            if(field){
                f.push(this.fields.get(field));
            } else {
                f.push(this.fields.get(0));
            }
            }
            
            if (f.length < 1) {
                return false;
            }
    
            if (!dir) {
                if (this.sortInfo &amp;&amp; this.sortInfo.length > 0 &amp;&amp; this.sortInfo[0].field == f[0].name) { // toggle sort dir
                    dir = (this.sortToggle[f[0].name] || "ASC").toggle("ASC", "DESC");
                } else {
                    dir = f[0].sortDir;
                }
            }
            
            var st = (this.sortToggle) ? this.sortToggle[f[0].name] : null;
            var si = (this.sortInfo) ? this.sortInfo : null;
            
            this.sortToggle[f[0].name] = dir;
            this.sortInfo = [];
            for (var i = 0, len = f.length; i < len; ++i) {
                this.sortInfo.push({
                    field: f[i].name,
                    direction: dir
                });
            }
            
            if (!this.remoteSort) {
                this.applySort();
                this.fireEvent("datachanged", this);
            } else {
                if (!this.load(this.lastOptions)) {
                    if (st) {
                        this.sortToggle[f[0].name] = st;
                    }
                    if (si) {
                        this.sortInfo = si;
                    }
                }
            }
            
        },
        
        setDefaultSort: function(field, dir){
            // alert('setDefaultSort '+ field);
            dir = dir ? dir.toUpperCase() : "ASC";
            this.sortInfo = [];
            
            if (!Ext.isArray(field)) 
                this.sortInfo.push({
                    field: field,
                    direction: dir
                });
            else {
                for (var i = 0, len = field.length; i < len; ++i) {
                    this.sortInfo.push({
                        field: field[i].field,
                        direction: dir
                    });
                    this.sortToggle[field[i]] = dir;
                }
            }
        },
        
        
        groupBy: function(field, forceRegroup){
          //  alert("groupBy   " + field + "   " + forceRegroup);
            if (!forceRegroup &amp;&amp; this.groupField == field) {
                return; // already grouped by this field
            }
            
            if (this.groupField &amp;&amp; !forceRegroup) {
                for (var z = 0; z < this.groupField.length; z++) 
                    if (field == this.groupField[z]) 
                        return;
                this.groupField.push(field);
            }
            else 
                this.groupField = [field];
            
            if (this.remoteGroup) {
                if (!this.baseParams) {
                    this.baseParams = {};
                }
                this.baseParams['groupBy'] = field;
            }
            if (this.groupOnSort) {
                this.sort(field);
                return;
            }
            if (this.remoteGroup) {
                this.reload();
            }
            else {
                var si = this.sortInfo || [];
                if (si.field != field) {
                    this.applySort();
                }
                else {
                  //  alert(field);
                    this.sortData(field);
                }
                this.fireEvent('datachanged', this);
            }
        },
        
        applySort: function(){
            //alert('applySort ');
            
            var si = this.sortInfo;
            
            if (si &amp;&amp; si.length > 0 &amp;&amp; !this.remoteSort) {
                this.sortData(si, si[0].direction);
            }
            
            if (!this.groupOnSort &amp;&amp; !this.remoteGroup) {
                var gs = this.getGroupState();
                if (gs &amp;&amp; gs != this.sortInfo) {
                
                    this.sortData(this.groupField);
                }
            }
        },
        
        getGroupState: function(){
            // alert('getGroupState '+ this.groupField);
            return this.groupOnSort &amp;&amp; this.groupField !== false ? (this.sortInfo ? this.sortInfo : undefined) : this.groupField;
        },
        
        sortData: function(flist, direction){
            //alert('sortData '+ direction);
            direction = direction || 'ASC';
            
            var st = [];
            
            var o;
            for (var i = 0, len = flist.length; i < len; ++i) {
                o = flist[i];
                st.push(this.fields.get(o.field ? o.field : o).sortType);
            }
    
            
            var fn = function(r1, r2){
            
                var v1 = [];
                var v2 = [];
                var len = flist.length;
                var o;
                var name;
                
                for (var i = 0; i < len; ++i) {
                    o = flist[i];
                    name = o.field ? o.field : o;
                    
                    v1.push(st[i](r1.data[name]));
                    v2.push(st[i](r2.data[name]));
                }
                
                var result;
                for (var i = 0; i < len; ++i) {
                    result = v1[i] > v2[i] ? 1 : (v1[i] < v2[i] ? -1 : 0);
                    if (result != 0) 
                        return result;
                }
                
                return result; //if it gets here, that means all fields are equal
            };
            this.data.sort(direction, fn);
            if (this.snapshot &amp;&amp; this.snapshot != this.data) {
                this.snapshot.sort(direction, fn);
            }
        }
        
    });
    
    
    Ext.ux.MultiGroupingView = Ext.extend(Ext.grid.GroupingView, {
       constructor: function(config){
         Ext.ux.MultiGroupingView.superclass.constructor.apply(this, arguments);
         // Added so we can clear cached rows each time the view is refreshed
         this.on("beforerefresh", function() {
           //console.debug("Cleared Row Cache");
           if(this.rowsCache) delete rowsCache;
         }, this);
       }
    
      ,displayEmptyFields: false
        
      ,displayFieldSeperator: ', '
        
      ,renderRows: function(){
         //alert('renderRows');
         var groupField = this.getGroupField();
         var eg = !!groupField;
         // if they turned off grouping and the last grouped field is hidden
         if (this.hideGroupedColumn) {
           var colIndexes = [];
           for (var i = 0, len = groupField.length; i < len; ++i) {
             var cidx=this.cm.findColumnIndex(groupField[i]);
             if(cidx>=0)   
               colIndexes.push(cidx);
             //else
               //console.debug("Ignore unknown column : ",groupField[i]);
           }
           if (!eg &amp;&amp; this.lastGroupField !== undefined) {
             this.mainBody.update('');
             for (var i = 0, len = this.lastGroupField.length; i < len; ++i) {
               var cidx=this.cm.findColumnIndex(this.lastGroupField[i]);
               if(cidx>=0)
                 this.cm.setHidden(cidx, false);
               else  
                 alert("Unhide Col: "+cidx);
             }
             delete this.lastGroupField;
             delete this.lgflen;
           }
           
           else if (eg &amp;&amp; colIndexes.length > 0 &amp;&amp; this.lastGroupField === undefined) {
             this.lastGroupField = groupField;
             this.lgflen = groupField.length;
             for (var i = 0, len = colIndexes.length; i < len; ++i) {
               //alert("Hide Col: "+colIndexes[i]);
               this.cm.setHidden(colIndexes[i], true);
             }
           }
    
           else if (eg &amp;&amp; this.lastGroupField !== undefined &amp;&amp; (groupField !== this.lastGroupField || this.lgflen != this.lastGroupField.length)) {
             this.mainBody.update('');
             for (var i = 0, len = this.lastGroupField.length; i < len; ++i) {
               var cidx=this.cm.findColumnIndex(this.lastGroupField[i]);
               if(cidx>=0)
                 this.cm.setHidden(cidx, false);
               else  
                 alert("Unhide Col: "+cidx);
             }
             this.lastGroupField = groupField;
             this.lgflen = groupField.length;
             for (var i = 0, len = colIndexes.length; i < len; ++i) {
               //alert("Hide Col: "+colIndexes[i]);
               this.cm.setHidden(colIndexes[i], true);
             }
           }
         }
         return Ext.ux.MultiGroupingView.superclass.renderRows.apply(this, arguments);
       }
    
        
    
       /** This sets up the toolbar for the grid based on what is grouped
        * It also iterates over all the rows and figures out where each group should appeaer
        * The store at this point is already stored based on the groups.
        */
      ,doRender: function(cs, rs, ds, startRow, colCount, stripe){
         //console.debug ("doRender: ",cs, rs, ds, startRow, colCount, stripe);
         var ss = this.grid.getTopToolbar();
         if (rs.length < 1) {
           return '';
         }
            
         var groupField = this.getGroupField();
         var gfLen = groupField.length;
        
        
    //removed this part to prevent grouping column topbar
    //     // Remove all entries alreay in the toolbar
    //     for (var hh = 0; hh < ss.items.length; hh++) {
    //       Ext.removeNode(Ext.getDom(ss.items.itemAt(hh).id));
    //     }
    
    //     if(gfLen==0) {
    //       ss.addItem(new Ext.Toolbar.TextItem("Drop Columns Here To Group"));
    //       //console.debug("No Groups");
    //     } 
    //     else {
    //       // Add back all entries to toolbar from GroupField[]    
    //       ss.addItem(new Ext.Toolbar.TextItem("Grouped By:"));
    //       for (var gfi = 0; gfi < gfLen; gfi++) {
    //         var t = groupField[gfi];
    //         if(gfi>0)
    //           ss.addItem(new Ext.Toolbar.Separator());
    //         var b = new Ext.Toolbar.Button({
    //            text: this.cm.lookup[this.cm.findColumnIndex(t)].header
    //         });
    //         b.fieldName = t;
    //         ss.addItem(b);
    //         //console.debug("Added Group to Toolbar :",this, t, b.text);
    //       }
    //     }
    //removed this part to prevent grouping column topbar
    
    
         this.enableGrouping = !!groupField;
            
         if (!this.enableGrouping || this.isUpdating) {
           return Ext.grid.GroupingView.superclass.doRender.apply(this, arguments);
         }
            
         var gstyle = 'width:' + this.getTotalWidth() + ';';
         var gidPrefix = this.grid.getGridEl().id;
         var groups = [], curGroup, i, len, gid;
         var lastvalues = [];
         var added = 0;
         var currGroups = [];
    
         // Create a specific style
         var st = Ext.get(gidPrefix+"-style");
         if(st) st.remove();
         Ext.getDoc().child("head").createChild({
           tag:'style',
           id:gidPrefix+"-style",
           html:"div#"+gidPrefix+" div.x-grid3-row {padding-left:"+(gfLen*12)+"px}"+
                "div#"+gidPrefix+" div.x-grid3-header {padding-left:"+(gfLen*12)+"px}"
         });
         
         for (var i = 0, len = rs.length; i < len; i++) {
           added = 0;
           var rowIndex = startRow + i;
           var r = rs[i];
           var differ = 0;
           var gvalue = [];
           var fieldName;
           var fieldLabel;
           var grpFieldNames = [];
           var grpFieldLabels = [];
           var v;
           var changed = 0;
           var addGroup = [];
               
           for (var j = 0; j < gfLen; j++) {
             fieldName = groupField[j];
             fieldLabel = this.cm.lookup[this.cm.findColumnIndex(fieldName)].header;
             v = r.data[fieldName];
             gr = this.cm.lookup[this.cm.findColumnIndex(fieldName)].groupRenderer||this.cm.lookup[this.cm.findColumnIndex(fieldName)].renderer;
         if(gr) renderedgroup = gr(v,{},r,rowIndex,this.cm.findColumnIndex(fieldName),ds); else renderedgroup = v;
             if (v !== "") {
               if (i == 0) {
                 // First record always starts a new group
                 addGroup.push({idx:j,dataIndex:fieldName,header:fieldLabel,value:v,renderedGroup:renderedgroup});
                 lastvalues[j] = v;
                 
                 gvalue.push(v);
                 grpFieldNames.push(fieldName);
                 grpFieldLabels.push(fieldLabel + ': ' + v);
                 //gvalue.push(v); ????
               } else {
                 if (lastvalues[j] != v) {
                   // This record is not in same group as previous one
                   //console.debug("Row ",i," added group. Values differ: prev=",lastvalues[j]," curr=",v);
                   addGroup.push({idx:j,dataIndex:fieldName,header:fieldLabel,value:v,renderedGroup:renderedgroup});
                   lastvalues[j] = v;
                   //differ = 1;
                   changed = 1;
                   
                   gvalue.push(v);
                   grpFieldNames.push(fieldName);
                   grpFieldLabels.push(fieldLabel + ': ' + v);
                 } else {
                    if (gfLen-1 == j &amp;&amp; changed != 1) {
                      // This row is in all the same groups to the previous group
                      curGroup.rs.push(r);
                      //console.debug("Row ",i," added to current group ",glbl);
                    } else if (changed == 1) {
                      // This group has changed because an earlier group changed.
                      addGroup.push({idx:j,dataIndex:fieldName,header:fieldLabel,value:v,renderedGroup:renderedgroup});
                      //console.debug("Row ",i," added group. Higher level group change");
       
                      gvalue.push(v);
                      grpFieldNames.push(fieldName);
                      grpFieldLabels.push(fieldLabel + ': ' + v);
                    } else if(j<gfLen-1) {
                        // This is a parent group, and this record is part of this parent so add it
                        if(currGroups[fieldName])
                            currGroups[fieldName].rs.push(r);
                        //else
                        //    console.error("Missing on row ",i," current group for ",fieldName);
                            
                    }
                 }
               }
             } else { 
               if (this.displayEmptyFields) {
                 addGroup.push({idx:j,dataIndex:fieldName,header:fieldLabel,value:this.emptyGroupText||'(none)',renderedGroup:renderedgroup});
                 grpFieldNames.push(fieldName);
                 grpFieldLabels.push(fieldLabel + ': ');
               }
             }  
           }//for j
                
           
           //if(addGroup.length>0) console.debug("Added groups for row=",i,", Groups=",addGroup);
           
    /*            
           if (gvalue.length < 1 &amp;&amp; this.emptyGroupText) 
             g = this.emptyGroupText;
           else 
             g = grpFieldNames;//.join(this.displayFieldSeperator);
    */
           for (var k = 0; k < addGroup.length; k++) {
             //g = grpFieldNames[k];
             //var glbl = grpFieldLabels[k];
             var gp=addGroup[k];
             g = gp.dataIndex;
             var glbl = addGroup[k].header;
             //var gv = addGroup[k].value;
             
             //console.debug("Create Group for ", glbl, r);
                    
    //         if (!curGroup || curGroup.group != gp.dataIndex || currGroup.gvalue != gp.value) {
               // There is no current group, or its not for the right field, so create one
               gid = gidPrefix + '-gp-' + gp.dataIndex + '-' + Ext.util.Format.htmlEncode(gp.value);
               
               // if state is defined use it, however state is in terms of expanded
               // so negate it, otherwise use the default.
               var isCollapsed = typeof this.state[gid] !== 'undefined' ? !this.state[gid] : this.startCollapsed;
               var gcls = isCollapsed ? 'x-grid-group-collapsed' : '';
             /*  
               if (gp.idx == gfLen-1) {
                 // final group
                 curGroup = {
                   group: g,
                   gvalue: gvalue[k],
                   text: glbl,
                   groupId: gid,
                   startRow: rowIndex,
                   rs: [r],
                   cls: gcls,
                   style: gstyle + 'padding-left:' + (gp.idx * 12) + 'px;'
                 };
               } else {*/
                 curGroup = {
                   group: gp.dataIndex,
                   rgroup: gp.renderedGroup,
                   gvalue: gp.value,
                   text: gp.header,
                   groupId: gid,
                   startRow: rowIndex,
                   rs: [r],
                   cls: gcls,
                   style: gstyle + 'padding-left:' + (gp.idx * 12) + 'px;'
                 };
               //}
               currGroups[gp.dataIndex]=curGroup;
               groups.push(curGroup);
               
    //         } else {
    //           curGroup.rs.push(r);
    //           console.debug("**** Added row ",i," to group ",curGroup);
    //         }
             r._groupId = gid; // Associate this row to a group
           }//for k
         }//for i
    
         var buf = [];
         var toEnd = 0;
         for (var ilen = 0, len = groups.length; ilen < len; ilen++) {
           toEnd++;
           var g = groups[ilen];
           var leaf = g.group == groupField[gfLen - 1] 
           this.doGroupStart(buf, g, cs, ds, colCount);
           
           //console.debug(g,buf.length,"=",buf[buf.length-1]);
           
           if (g.rs.length != 0 &amp;&amp; leaf) 
             buf[buf.length] = Ext.grid.GroupingView.superclass.doRender.call(this, cs, g.rs, ds, g.startRow, colCount, stripe);
           
           if (leaf) {
             var jj;
             var gg = groups[ilen + 1];
             if (gg != null) {
               for (var jj = 0; jj < groupField.length; jj++) {
                 if (gg.group == groupField[jj]) 
                   break;
               }
               toEnd = groupField.length - jj;
             }
             for (var k = 0; k < toEnd; k++) {
               this.doGroupEnd(buf, g, cs, ds, colCount);
             }
             toEnd = jj;
           }
             
         }
         
         return buf.join('');
       }
       
       
        
       /** Should return an array of all elements that represent a row, it should bypass
        *  all grouping sections
        */
      ,getRows: function(){
      
            // This function is called may times, so use a cache if it is available
            if(this.rowsCache)
              r = this.rowsCache.slice(0);
            else {
              //alert('getRows');
              if (!this.enableGrouping) {
                  return Ext.grid.GroupingView.superclass.getRows.call(this);
              }
              var groupField = this.getGroupField();
              var r = [];
              var g, gs = this.getGroups();
              // this.getGroups() contains an array of DIVS for the top level groups
              //console.debug("Get Rows", groupField, gs);
    
              r = this.getRowsFromGroup(r, gs, groupField[groupField.length - 1]);
         
              // Clone the array, but not the objects in it
              //this.rowsCache = r.slice(0);
            }    
            //console.debug("Found ", r.length, " rows");
            return r;
        }
        
       /** Return array of records under a given group
        * @param r Record array to append to in the returned object
        * @param gs Grouping Sections, an array of DIV element that represent a set of grouped records
        * @param lsField The name of the grouping section we want to count
        */
      ,getRowsFromGroup: function(r, gs, lsField){
            var rx = new RegExp(".*-gp-"+lsField+"-.*");
    
            // Loop over each section
            for (var i = 0, len = gs.length; i < len; i++) {
    
                // Get group name for this section
                var groupName = gs[i].id;
                if(rx.test(groupName)) {
                    //console.debug(groupName, " matched ", lsField);
                    g = gs[i].childNodes[1].childNodes;
                    for (var j = 0, jlen = g.length; j < jlen; j++) {
                        r[r.length] = g[j];
                    }
                    //console.debug("Found " + g.length + " rows for group " + lsField);
                } else {
                    if(!gs[i].childNodes[1]) {
                        //console.error("Can't get rowcount for field ",lsField," from ",gs,i);
                    } else 
                    // if its an interim level, each group needs to be traversed as well
                    r = this.getRowsFromGroup(r, gs[i].childNodes[1].childNodes, lsField);
                }
            }
            return r;
        }
    });
    
    
    Ext.ux.MultiGroupingPanel = function(config) {
        config = config||{};
        //removed this part to prevent grouping column topbar
        //config.tbar = new Ext.Toolbar({id:'grid-tbr'}); 
        //removed this part to prevent grouping column topbar
        Ext.ux.MultiGroupingPanel.superclass.constructor.call(this, config);
        //console.debug("Create MultiGroupingPanel",config);
    };
    Ext.extend(Ext.ux.MultiGroupingPanel, Ext.grid.GridPanel, {
    
       initComponent : function(){
         //console.debug("MultiGroupingPanel.initComponent",this);
         Ext.ux.MultiGroupingPanel.superclass.initComponent.call(this);
         
         // Initialise DragZone
         //removed this part to prevent grouping column topbar
         //this.on("render", this.setUpDragging, this);
         //removed this part to prevent grouping column topbar
       }
        
      ,setUpDragging: function() {
            //console.debug("SetUpDragging", this);
            this.dragZone = new Ext.dd.DragZone(this.getTopToolbar().getEl(), {
                ddGroup:"grid-body"
               ,panel:this 
               ,scroll:false
                // @todo - docs
               ,onInitDrag : function(e) {
                    // alert('init');
                    var clone = this.dragData.ddel;
                    clone.id = Ext.id('ven');
                    // clone.class='x-btn button';
                    this.proxy.update(clone);
                    return true;
                }
    
                // @todo - docs
               ,getDragData: function(e) {
                    var target = Ext.get(e.getTarget().id);
                    if(target.hasClass('x-toolbar x-small-editor')) {
                        return false;
                    }
                    
                    d = e.getTarget().cloneNode(true);
                    d.id = Ext.id();
                    //console.debug("getDragData",this, target);
                    
                    this.dragData = {
                        repairXY: Ext.fly(target).getXY(),
                        ddel: d,
                        btn:e.getTarget()
                    };
                    return this.dragData;
                }
    
                //Provide coordinates for the proxy to slide back to on failed drag.
                //This is the original XY coordinates of the draggable element.
               ,getRepairXY: function() {
                    return this.dragData.repairXY;
                }
    
            });
            
            // This is the target when columns are dropped onto the toolbar (ie added to the group)
            this.dropTarget2s = new Ext.dd.DropTarget('grid-tbr', {
                ddGroup: "gridHeader" + this.getGridEl().id
               ,panel:this 
               ,notifyDrop: function(dd, e, data) {
                    //console.debug("Adding Filter", data);
                    var btname= this.panel.getColumnModel().getDataIndex( this.panel.getView().getCellIndex(data.header));
                    this.panel.store.groupBy(btname);
                    return true;
                }
            });
    
            // This is the target when columns are dropped onto the grid (ie removed from the group)
            this.dropTarget22s = new Ext.dd.DropTarget(this.getView().el.dom.childNodes[0].childNodes[1], {
                ddGroup: "grid-body"
               ,panel:this 
               ,notifyDrop: function(dd, e, data) {
                    var txt = Ext.get(data.btn).dom.innerHTML;
                    var tb = this.panel.getTopToolbar();
                    //console.debug("Removing Filter", txt);
                    var bidx = tb.items.findIndexBy(function(b) {
                        //console.debug("Match button ",b.text);
                        return b.text==txt;
                    },this);
                    //console.debug("Found matching button", bidx);
                    if(bidx<0) return; // Error!
                    var fld = tb.items.get(bidx).fieldName;
                    
                    // Remove from toolbar
                    Ext.removeNode(Ext.getDom(tb.items.get(bidx).id));
                    if(bidx>0) Ext.removeNode(Ext.getDom(tb.items.get(bidx-1).id));;
    
                    //console.debug("Remove button", fld);
                    //console.dir(button);
                    var cidx=this.panel.view.cm.findColumnIndex(fld);
                    
                    //if(cidx<0)
                    //    console.error("Can't find column for field ", fld);
                    
                    this.panel.view.cm.setHidden(cidx, false);
    
                    //Ext.removeNode(Ext.getDom(data.btn.id));
    
                    var temp=[];
    
                    for(var i=this.panel.store.groupField.length-1;i>=0;i--) {
                        if(this.panel.store.groupField[i]==fld) {
                            this.panel.store.groupField.pop();
                            break;
                        }
                        temp.push(this.panel.store.groupField[i]);
                        this.panel.store.groupField.pop();
                    }
    
                    for(var i=temp.length-1;i>=0;i--) {
                            this.panel.store.groupField.push(temp[i]);
                    }
    
                    if(this.panel.store.groupField.length==0)
                        this.panel.store.groupField=false;
    
                    this.panel.store.fireEvent('datachanged', this);
                    return true;
                }
            }); 
    
        }
    });
    
    Ext.reg("multigroupstore", Ext.ux.MultiGroupingStore);
    Ext.reg("multigroupview", Ext.ux.MultiGroupingView);
    Ext.reg("multigroupgridpanel", Ext.ux.MultiGroupingPanel);
    if(typeof Sys!=="undefined"){Sys.Application.notifyScriptLoaded();}
    </a><a class="errorSource a11yFocus ">

    it seems that the MultiGroupingStore is still using the Store's sortData function (which is where the error lies) even if the </a><a class="errorSource a11yFocus ">MultiGroupingStore already have its own sortData function... this.fields.get(f) is undefined because in the multigrouping, f is an array and not a string so that is why it is causing an error, my problem is how can i make sure that the multigrouping grid will use the </a><a class="errorSource a11yFocus ">MultiGroupingStore's sortData function defined in multigrouping.js in order to avoid this error?
    </a>

    i know that converting a extjs item into coolite is not this simple but im just trying to make a simple step towards a new thing, please help
  2. #2

    RE: multi grouping grid in coolite

    Hi,

    I think the Store use old instance name. You need implement ICustomConfigSerialization for MultiGroupStore
    string ICustomConfigSerialization.Serialize(Control owner)
            {
                string className = "Ext.ux.MultiGroupingStore";
                return string.Concat("this.", this.ClientID, " = new ", className, "(", new ClientConfig().Serialize(this, true), ");");
            }
  3. #3

    RE: multi grouping grid in coolite

    ok, thanks for this info, i'll be trying it out later. also yesterday i tried that instead of implementing the Store, i made it implement the StoreDataBound, much like how the store.cs looks like and i just get all the existing attributes and methods of the store class... anyway i'll just experiment more later, thanks
  4. #4

    RE: multi grouping grid in coolite

    ok, this solves the issue for the load part, another issue now =) its throwing up an error "extstorePQS.callbackRefreshHandler is not a function" after i try to call a store.databind() again (if it already been binded with another data before)
  5. #5

    RE: multi grouping grid in coolite

    Hi,

    You need extend Coolite.Ext.Store instead Ext.data.GroupingStore
  6. #6

    RE: multi grouping grid in coolite

    ok, that did it, thanks a lot
  7. #7

    RE: multi grouping grid in coolite

    Do you have a final product for this? Can you please post an example of how to get multiple grouping in Grid?
  8. #8

    RE: multi grouping grid in coolite

    attached is the final code file which i have added to the Coolite project. This is a very raw implementation of what was done on the EXTJS forums. again, the JS file attached here was taken from the EXTJS forum, i just modified it to remove the ability of changing the grouped columns by dragging it to the top toolbar. anyway this is just an initial implementation anyway and i'm sure a lot of people here can make a better one soon enough when the time comes that i really need it for our project =)
  9. #9

    RE: multi grouping grid in coolite

    Great! Thanks.

    But, what does the coolite html markup look like?
  10. #10

    RE: multi grouping grid in coolite

    Joju. Is there anyway you can post the HTML markup for your implementation of this?
Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 1
    Last Post: Jan 17, 2014, 3:43 PM
  2. Coolite Desktop control with multi window
    By bernnabe in forum 1.x Help
    Replies: 0
    Last Post: May 20, 2010, 7:38 PM
  3. [CLOSED] Multi Column Grouping in 1.0????
    By rthiney in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Feb 25, 2010, 3:06 PM
  4. Multi-language in coolite
    By Amorim in forum 1.x Help
    Replies: 0
    Last Post: Dec 11, 2008, 7:33 AM

Posting Permissions