1. #121
    Ext JS Premium Member Matt Bittner's Avatar
    Join Date
    Aug 2008
    Posts
    106
    Vote Rating
    1
    Matt Bittner is on a distinguished road

      0  

    Default


    Quote Originally Posted by corsons View Post
    Should variables be _id, _parent_id and _is_leaf?
    We have constraints on our database that don't allow an underscore as the first character. I changed everything I could within TreeGrid.js. I hope I found everything.

    Never mind, figured it out.
    Matt Bittner

  2. #122
    Sencha User
    Join Date
    Dec 2010
    Posts
    1
    Vote Rating
    0
    ustim is on a distinguished road

      0  

    Default Странность в поведении TreeGrid

    Странность в поведении TreeGrid


    Привет, Максим.
    Используя Ваш компонент заметил одну странность:
    Снимок.png
    В этом примере используется AdjacencyListStore. Исследование разметки показало, что это не из-за стилей, он физически вставляет разметку в конец списка.
    Версия ExtJS 3.3.0.

  3. #123
    Sencha User
    Join Date
    Jun 2009
    Posts
    17
    Vote Rating
    0
    sureace is on a distinguished road

      0  

    Default Unable to load the data in to grid....

    Unable to load the data in to grid....


    Hi everybody,
    I am new this plug-in. When i try with the below code, i am not able to see the list in the code. Can any one tell me where i did the mistake.
    Code:
    var fields = [
     {name: 'acctClient'},
     {name: 'account'},
     {name: 'shortName'},
     {name: 'forms'},
     {name: 'doc'},
     {name: 'desc'},
     {name: 'revision'},
     {name: 'scan'},
     {name: 'statusDate'},
     {name: 'frame'},
     {name: 'loc'},
     {name: 'status'},
     {name: '_id', type: 'int'},
     {name: '_parent', type: 'int'},
     {name: '_is_leaf', type: 'bool'}
    ];
    var data = [
     {
      "rows": [
         {
          "_id":1,"_parent":null,"_is_leaf":false,"acctClient":"","account":"","shortName":"","forms":"CL-SVC-SEL","doc":"","desc":"ACCOUNT SERVICES SELECTION","revision":"11-2005","scan":"03/15/2006","statusDate":"","frame":"SEZ","loc":"CMD","status":"Accepted"
         },
         {
          "_id":2,"_parent":1,"_is_leaf":true,"acctClient":"","account":"","shortName":"","forms":"","doc":"DF","desc":"FDIC ADDENDUM FOR TRUST ACCTS","revision":"","scan":"","statusDate":"","frame":"","loc":"","status":""
         }
      ],
      "success":true,
      "total":2
     }
    ];
    var acctMaintStore = new Ext.ux.maximgb.tg.AdjacencyListStore({
      autoLoad : true,
      leaf_field_name: "_is_leaf",
      parent_id_field_name: "_parent",
      reader: new Ext.data.JsonReader({
        idProperty: '_id', 
        root: 'rows',
        fields: fields
      }),
      proxy: new Ext.data.MemoryProxy(data)
    });
    var resultPanel = new Ext.ux.maximgb.tg.GridPanel({
     store: acctMaintStore,
     enableHdMenu : false,
     master_column_id : "forms",
     disableSelection : true,
     columns: [
      {header: "Account/Client", hidden: true, width: 100, sortable: true, dataIndex: 'acctClient'},
      {header: "Account", hidden: true, width: 100, sortable: true, dataIndex: 'account'},
      {header: "Short Name (Friendly)", hidden: true, width: 150, sortable: true, dataIndex: 'shortName'},
      {header: "Forms", width: 100, sortable: true, dataIndex: 'forms',id:"forms"},
      {header: "Doc Cd", width: 125, sortable: true, dataIndex: 'doc'},
      {header: "Description", width: 125, sortable: true, dataIndex: 'desc',id:'auto-expand-column-acct-maint'},
      {header: "Revision", hidden: false, width: 125, sortable: true, dataIndex: 'revision'},
      {header: "Scan", hidden: false, width: 125, sortable: true, dataIndex: 'scan'},
      {header: "Status Date", width: 75, sortable: true, dataIndex: 'statusDate'},
      {header: "Frame", hidden: false, width: 75, sortable: true, dataIndex: 'frame'},
      {header: "Loc", hidden: false, width: 75, sortable: true, dataIndex: 'loc'},
      {header: "Status", width: 75, sortable: true, dataIndex: 'status'},
      {header: "Action", width: 150, sortable: false,dataIndex:'action'}
     ],
     stripeRows: true,
     autoExpandColumn: 'auto-expand-column-acct-maint',
     region: 'center',
     margins : '0 0 0 0',
     header : false,
     border: false,
     title:'Results Panel'
    });
      var vp = new Ext.Viewport({
       layout : 'fit',
       items : resultPanel 
      });
    Thanks
    Sureace

  4. #124
    Ext JS Premium Member
    Join Date
    Nov 2008
    Posts
    289
    Vote Rating
    3
    wki01 is on a distinguished road

      0  

    Default


    Hello Maximgb.

    Is available a version of your grid (and in particular for adiacent store) for version 4.1 of extjs?
    If yes, what is the cost of the license?

    (PS: I can not send you a PM message, your mailbox has exceeded stored private messages quota and can not accept further top messages)

    Thank you.

  5. #125
    Sencha User
    Join Date
    May 2009
    Posts
    2
    Vote Rating
    0
    jkliou is on a distinguished road

      0  

    Default


    to shr1975:
    did you solve you problem?
    Code:
    ...
    var store = new Ext.ux.maximgb.tg.AdjacencyListStore({ //Ext.ux.maximgb.tg.NestedSetStore({
            autoLoad: true,
            url: '....',
            reader: new Ext.data.JsonReader(
    				{
    				    id: '_id',
    				    root: 'data',
    				    totalProperty: 'total',
    				    successProperty: 'success'
    				},
    				record
    			),
            listeners: {
                'beforeload': function() {
                    var el = this.getEl();
                    if (el) {
                        el.mask(GO.lang.waitMsgLoad);
                    }
                },
                'load': function() {
                    var el = this.getEl();
                    if (el) {
                        el.unmask();
                    }
                },
                scope: this
            }
        });
    ...
    Quote Originally Posted by shr1975 View Post
    Thanks for this great plugin MaximGB.

    It perfectly fits in for our requirement.

    However, there's one problem that we are facing and cannot put a finger on the exact problem area. Our grid has about 150 rows but the performance in IE (we tried with 7 and 8) is very low. After the rows are loaded into the grid, it takes ages to respond to anything - expanding, rendering the editor, scrolling.

    Here's my code:
    Code:
    /**
     *  Config options
     *  **************
     *  taskId
     *  mainTaskId
     *  columnModel
     *  formName
     *  containerEl
     *  isStateChanged
     *  stateJSON
     *  sortField
     *  sortDirection
     *  groupField
     *  gridTitle
     *  inDetailPage
     */
    
    function GSCompare(config)
    {
      /*
       * Config member variables.
       */
      this.taskId         = config.taskId;
      this.mainTaskId     = config.mainTaskId;
      this.columnModel    = config.columnModel;
      this.formName       = config.formName;
      this.containerEl    = config.containerEl;
      this.isStateChanged = config.isStateChanged;
      this.stateJSON      = config.stateJSON;
      this.sortField      = config.sortField;
      this.sortDirection  = config.sortDirection;
      this.groupField     = config.groupField;
      this.gridTitle      = config.gridTitle;
      this.inDetailPage   = config.inDetailPage;
    
      /*
       * Member variables
       */
      this.grid;
      this.ds;
      this.cm;
      this.storeList = {};
      this.fixedWidth = 550;
      //this.fixedHeight = 375;
      this.firstTimeRender = true;    //This is to check if the compare grid is being rendered for the first time.
                                      //If it is so, then after the grid data is loaded, the criteria section will be hidden.
      this.init = function()
      {
        /*
         *  Whatever initializations have to be done will be done here. 
         */
        this.initCompareGrid();
        this.adjustGridSize();
        Ext.EventManager.onWindowResize(this.adjustGridSize, this, false);
      };
      /**
      * This function set the height of the grid.
      * If no fixed height is specified the height is set to the
      * maximum value that does not require scrolling on a page level.
      */
      this.adjustGridSize = function()
      {
        var el = this.grid.getEl();
        var gridObj = this.grid;
        
        // this is to adjust the width to the width of the parent element needed for FF3 and IE6
        gridObj.setWidth(this.fixedWidth);
        gridObj.setWidth(el.findParent('td', null, true).getComputedWidth());
    
        var tblHeight = this.fixedHeight;
        if(!tblHeight)
        {
          var curTblHeight = el.getHeight();
          var winHeight = Ext.getBody().getHeight();
          var footer = Ext.fly('footerTbl');
          var menuTD = Ext.fly('menuTD');
          var compareEntities = Ext.fly('gs_compareEntities_' + this.taskId);
          //var curDomHeight = footer.getHeight() + footer.getTop() ; //+ compareEntities.getHeight();
          var curDomHeight = footer.getHeight() + menuTD.getBottom(false) + compareEntities.getHeight(); 
          tblHeight = (winHeight - curDomHeight -20);// + curTblHeight);
          if (tblHeight < 350)
          {
            tblHeight = 350;
          }
        }
    
        logger.info("Table height: " + tblHeight);
    
        gridObj.setSize({height: tblHeight});
        el.setHeight(tblHeight);
      };
      
      this.renderDate = function(dateString, frmt)
      {
        try
        {
        var fmtDate = Date.parseDate(dateString, frmt);
        if (fmtDate != undefined)
          return fmtDate.format(frmt);
        else
          return Ext.util.Format.date(dateString, frmt);
        }
        catch(e) 
        {
          return dateString; 
        }
      };
    
      this.checkGridDates = function(value)
      {
        if(value=='n' || value=='N')
        {
          this.setValue(new Date());
        }
        else if(value=='t' || value=='T')
        {
          var dte = new Date();
          dte.setHours(00,00,00,00);
          this.setValue(dte);
        }
        else
          return true;
      };
    
      this.syncCompareGridWithState = function()
      {
        var parentObj = this;
        if (this.isStateChanged)
        {
          this.stateJSON = Ext.util.JSON.decode(this.stateJSON)     // Convert the JSON string to a JSON object.
    
          var grid = this.grid;
          var store = grid.getStore();
          var gcColIndex = grid.getColumnModel().findColumnIndex('gc');
          store.modified = [];
    
          for (var i=0; i < parentObj.stateJSON.length; i++)
          {
            var row = parentObj.stateJSON[i];                // Each item in this JSON is a row.
    
            var recIndex = store.findBy(function(rec){
              if (rec.get('datagroup') === row.datagroup && rec.get('fieldLabel') === row.modifiedCol)
                return true;
            });
    
            Ext.fly(grid.getView().getCell(recIndex, gcColIndex)).addClass('x-grid3-dirty-cell');      //Show the indicator that the cell has been edited.
          }
        }
      };
    
      this.showDifference = function()
      {
        var parentObj = this;
        var store = this.ds;
        var grid = this.grid;
        var gcColIndex = grid.getColumnModel().findColumnIndex('gc');
       
        store.each(function(rec)
          {
            var valuesDifferent = rec.get('valuesDifferent');
            var lockStatus = rec.get('lock-status');
            var rowIndex = store.indexOf(rec);
        var elem = Ext.fly(grid.getView().getCell(rowIndex, gcColIndex));
            if (valuesDifferent)
            {
              /*var index = store.indexOf(rec);
    
              var rowElem = Ext.get(parentObj.grid.getView().getRow(index));
              rowElem.addClass('gs_compareDiff');*/
                var value = rec.get('fieldLabel');
                value = "*" + value;
                rec.set('fieldLabel', value);
            }
            if(lockStatus === 'ATTR')
            {
                 elem.addClass('gs_locked');
            }else if(lockStatus === 'PERP')
            {
                elem.addClass('gs_permlocked');
            }else
            {
                
          elem.removeClass([ 'gs_locked', 'gs_permlocked']);
              
            }
            
          }
        );
      };
    
      this.alignNumberFields = function()
      {
          var parentObj = this;
    
        var store = this.ds;
    
        store.each(function(rec)
        {
            var dataType = rec.get('dataType');
          if (dataType === 'number')
          {
            var columnModel = parentObj.grid.getColumnModel();
            var columnCount = columnModel.getColumnCount(true);
            var gridView = parentObj.grid.getView();
      
            for (var i = 0; i < columnCount; i++)
            {
              if (columnModel.getDataIndex(i) != 'fieldLabel')
              {
                gridView.getCell(rec.store.indexOf(rec), i).align = "right";
              }
            }
          }
        });
      };
    
      this.submitCompareState = function(params)
      {
        if(this.inDetailPage)
          GS.submitFormPPR(this.formName, GS.noResponseId, params, null, false, false);
        else
          GS.submitFormPPR(this.formName, GS.noResponseId,
          {event: params.event,
           modifiedCol: params.modifiedCol,
           colValue: params.colValue,
           datagroup: params.datagroup,
           recordId: params.recordId,
           taskId: params.taskId
          }, null, false, false);
      };
    
      this.adjustColumnWidths = function()
      {
        var minWidth = 100;
        var maxWidth = 250;
        var colWidth = 100;
        var finalColWidth = 100;
        var header = '';
        var colValue = '';
        var colModel = this.grid.getColumnModel();
        var store = this.grid.getStore();
        var rec;
    
        var conversionFactor = 6;
        
        /*var j = this.selectionType === 'none' ? 1 : 2;*/
        for (var j = 0; j < this.columnModel.length; j++)
        {
          minWidth = 100;
          maxWidth = 250;
          colWidth = 100;
          finalColWidth = 100;
          var colConfig = colModel.getColumnById(colModel.getColumnId(j));
    
          if (!colModel.isHidden(j)) // && !colConfig.userSetWidth
          {
            header = colModel.getColumnHeader(j);
            colWidth = header.length *conversionFactor;
    
            finalColWidth = colWidth;
            /*if (colWidth < minWidth)
              finalColWidth = minWidth;*/
            if (colWidth > maxWidth)
              finalColWidth = maxWidth;
    
            for (i =0; i < store.getCount(); i++)
            {
              rec = store.getAt(i);
              colValue = rec.get(colModel.getDataIndex(j));
    
              // Check if it is a domval field.
              /*if (colConfig.isDomValFld)
              {
                colValue = this.convertDomVal(colConfig.domValStore, colValue);
              }*/
    
              if (!colValue)
                colValue = '';
    
              colWidth = colValue.length *conversionFactor;
    
              if (colWidth > finalColWidth)
                finalColWidth = colWidth;
    
              /*if (finalColWidth < minWidth)
                finalColWidth = minWidth;*/
              if (finalColWidth > maxWidth)
                finalColWidth = maxWidth;
    
              if (j === 0)
                finalColWidth += 50;
            }
            finalColWidth += 70;
            colModel.setColumnWidth(j, finalColWidth);
          }
        }
      };
    
      this.attachGridTooltips = function()
      {
        var grid = this.grid;
        grid.tip = new Ext.ToolTip({
            view: grid.getView(),
            target: grid.getView().mainBody,
            delegate: '.x-grid3-col',
            trackMouse: true,
            renderTo: document.body,
            listeners: {
                beforeshow: function updateTipBody(tip)
                {
                  var rowIndex = tip.view.findRowIndex(tip.triggerElement);
                  var colIndex = tip.view.findCellIndex(tip.triggerElement);
                  var tTip = Ext.fly(tip.view.getCell(rowIndex, colIndex)).dom.innerHTML;
    
                  if (tTip.substring(tTip.indexOf('>') +1, tTip.lastIndexOf('</')) === '&nbsp;')
                    return false;
    
                  if (tTip.indexOf('<div class="ux-maximgb-tg-mastercell-wrap">') == 0)
                    tTip = Ext.util.Format.stripTags(tTip);
    
                  if (tTip === "" || tTip === "&nbsp;")
                    return false;
    
                  tip.body.dom.innerHTML = tTip;
                }
            }
        });
      };
    
      this.showHideIcons = function(type, cellAction, records, action)
      {
        var record = undefined;
    
        for (var i = 0; i < records.length; i++)
        {
          record = records[i];
          
          var iconType = type+'-icon';
          if(type === 'vddb' && record.get('vddbStatType')!= undefined && record.get('vddbStatType')!='')
           iconType = type+record.get('vddbStatType')+'-icon';
                 
          if (action === 'hide')
          {
            if (record.get(cellAction) === iconType )
            {
              record.set(cellAction, 'hidden');
            }
          }
          else
          {
            if (record.get(cellAction) === 'hidden')
            record.set(cellAction, iconType);
          }
        }
      }
    
      this.initCompareGrid = function()
      {
        //create the dataStore:
        var colMapping = new Array();
        var i=0;
        for(i=0; i<this.columnModel.length; i++)
        {
          colMapping[i]={'name': this.columnModel[i].dataIndex};
        }
    
        var storeUrl;
        storeUrl = '../Finders/getCompareResults.vm?allowRedirect=false&taskId=' + this.mainTaskId + '&srchTaskId=' + this.taskId;
    
        colMapping.push({name: '_id', type: 'int'});
        colMapping.push({name: '_level', type: 'int'});
        colMapping.push({name: '_lft', type: 'int'});
        colMapping.push({name: '_rgt', type: 'int'});
        colMapping.push({name: '_is_leaf', type: 'bool'});
    
        this.currTime = new Date();
        this.finishTime = undefined;
        var record = Ext.data.Record.create(colMapping);
        this.ds = new Ext.ux.maximgb.tg.NestedSetStore({
          reader: new Ext.data.JsonReader({id: '_id'}, record),
          proxy: new Ext.data.HttpProxy({
            url: storeUrl,
            onBeforeLoad: function(dataProxy, params)
            {
                parentObj.currTime = new Date();
                logger.info('before load proxy: ' + currTime);
            },
            onLoad: function(dataProxy, reqTransObj, options)
            {
                parentObj.finishTime = new Date();
                logger.info('after load proxy: ' + finishTime);
                logger.info('time difference proxy: ' + (finishTime - currTime) + ' ms.');
            }
          })
        });
    
        this.renderCompareGrid();
      };
    
      this.renderCompareGrid = function()
      {
        var parentObj = this;
        if (!this.cm)
        {
          this.cm = new Ext.grid.ColumnModel({
            columns: this.columnModel,
            editors: {
              'string': new Ext.grid.GridEditor(new Ext.form.TextField({})),
              'number': new Ext.grid.GridEditor(new Ext.form.NumberField({})),
              'date': new Ext.grid.GridEditor(new Ext.form.DateField({format: 'd-M-Y'
                                                 , validator: this.checkGridDates
                                                 ,enableKeyEvents   : true
                                                 ,listeners:{
                                                   keydown: function(f, e)
                                                   {
                                                     if (e.getKey() == e.DOWN)
                                                     f.onTriggerClick();
                                                   }
                                                 }
                                 })),
              'dateTime': new Ext.grid.GridEditor(new Ext.form.DateField({format: 'd-M-Y h:i:s A'
                                                 , validator: this.checkGridDates
                                                 ,enableKeyEvents   : true
                                                 ,listeners:{
                                                   keydown: function(f, e)
                                                   {
                                                     if (e.getKey() == e.DOWN)
                                                     f.onTriggerClick();
                                                   }
                                                 }
                                 }))
            },
            moveColumn: function(oldIndex, newIndex)
            {
              if (oldIndex != 0 && newIndex != 0)
              {
                var c = this.config[oldIndex];
                this.config.splice(oldIndex, 1);
                this.config.splice(newIndex, 0, c);
                this.dataMap = null;
                this.fireEvent("columnmoved", this, oldIndex, newIndex);
              }
            },
            getCellEditor: function(colIndex, rowIndex)
            {
              var rec = parentObj.ds.getAt(rowIndex);
    
              if (rec.get('readOnly') === true)
                return false;
    
              var dataType = rec.get('dataType');
              var fieldName = rec.get('fieldName');
    
              if (dataType != 'dropDown' && dataType != 'customDropDown' && dataType != 'string')
              {
                if (dataType === 'date')
                {
                  this.setRenderer(colIndex, function (data)
                    {
                     return parentObj.renderDate(data, 'd-M-Y');
                    });
                }
                else if (dataType === 'dateTime')
                {
                  this.setRenderer(colIndex, function (data)
                    {
                     return parentObj.renderDate(data, 'd-M-Y h:i:s A');
                    });
                }
                return this.editors[dataType];
              }
              else
              {
                  if (dataType === 'string' && !rec.get('hasValidValues'))
                   return this.editors[dataType];
    
                  this.setRenderer(colIndex, function(data)
                {
                  if (parentObj.storeList[fieldName])
                  {
                    var record = parentObj.storeList[fieldName].getById(data);
                    if(record)
                    {
                      return record.data.text;
                    }
                    else
                    {
                      return data;
                    }
                  }
                 }
                );
                var comboStore;
                var domValFld = '';
                if (dataType === 'customDropDown')
                {
                  domValFld = rec.get('customDomVal');
                }
                else
                {
                  domValFld = fieldName;
                }
    
                if (!parentObj.storeList[fieldName])
                {
                    var domValURL = '../Finders/getDomVals.vm?allowRedirect=false&taskId=' + parentObj.mainTaskId + '&srchTaskId=' + parentObj.taskId + '&domValFld=' + domValFld;
    
                    if (rec.get('hasValidValues'))
                      domValURL = '../Finders/getValidVals.vm?allowRedirect=false&taskId=' + parentObj.mainTaskId + '&compareTaskId=' + parentObj.taskId + '&domValFld=' + rec.get('fullName');
    
                    comboStore = new Ext.data.Store(
                    {
                      proxy:  new Ext.data.HttpProxy({
                        url: domValURL 
                      }),
                      reader:  new Ext.data.JsonReader(
                          {root: 'options', id: 'value'},
                          [
                            {name: 'text'},
                            {name: 'value'}
                          ]
                        )
                    }
                  );
                  comboStore.load();
                  parentObj.storeList[fieldName] = comboStore;
                }
                else
                {
                  comboStore = parentObj.storeList[fieldName];
                }
    
                return new Ext.grid.GridEditor(new Ext.form.ComboBox({
                  allowBlank: true,
                  store: comboStore,
                  displayField:'text',
                  valueField: 'value',
                  lazyInit: false,
                  lazyRender:false,
                  typeAhead:false,
                  triggerAction: 'all',
                  editable: false,
                  forceSelection:true,
                  loadingText: 'Fetching list...',
                  emptyText:'Select...',
                  resizable:true}));
              }
              return Ext.grid.ColumnModel.prototype.getCellEditor(this, colIndex, rowIndex);
            }
          });
        }
    
        this.cellActions = new Ext.ux.grid.CellActions({ 
          listeners:{ 
            action:function(grid, record, action, value)
            { 
              if (action === 'vddbgreen-icon' || action === 'vddbyellow-icon' || action === 'vddbred-icon')
              {
                  var fieldName = record.get('fieldName');
                  var tableName = fieldName.substring(0, fieldName.indexOf('.'));
                  fieldName = fieldName.substring(fieldName.indexOf() +1);
                  loadJS('mainForm', 
                      {
                        event: 'openLookup',
                        lookupType: 'CompareVDDB',
                        oid: record.get('oid'),
                        lookupFields: fieldName,
                        tableName: tableName
                      });
              }
              else if (action === 'cdc-icon')
              {
                  var fieldName = record.get('fieldName');
                  var tableName = fieldName.substring(0, fieldName.indexOf('.'));
                  fieldName = fieldName.substring(fieldName.indexOf() +1);
                  loadJS('mainForm', 
                      {
                        event: 'openLookup',
                        lookupType: 'CompareCDC',
                        oid: record.get('oid'),
                        lookupFields: fieldName,
                        tableName: tableName
                      });
              }
              else if (action === 'chal-icon')
              {
                /*loadJS('mainForm',
                {
                  event:'openLookup',
                  lookupId:'ft_t_chal',
                  lookupType:'CHAL',
                  'lookupCondition':"chal_oid='" + record.get('chal-oid') + "'",
                  'searchSettings':'autoExecute:true,lookupInWindow:true'
                });*/
    
                window.open("../Finders/Lookup.vm?event=openLookup&lookupType=CHAL&lookupId=ft_t_chal&lookupCondition=chal_oid='" + record.get('chal-oid') + "'&searchSettings=autoExecute:true");
              }
              else if(action === 'fvsh-icon')
              {
                loadJS('mainForm',
                {
                    event:'openLookup',
                    lookupId:'fvshLookup',
                    lookupType:'VDDB',
                    'showStartQueryButton':'false',
                    'showClearButton':'false',
                    'showConfigScreen':'false',
                    'showCancelButton':'false',
                    'allowPersistence':'false',
                    'lookupType':'null',
                    'lookupCondition':" ft_t_fvsh.tbl_id='"+record.get('table_id') +"'and ft_t_fvsh.col_nme in ('"+ record.get('col_name')+"') and VSH_TBL_KEY_TXT='"+record.get('fvsh-oid')+"' ",
                    'searchSettings':'autoExecute:true,lookupInWindow:true'});
              }
            }
          },
          align:'right' 
          });
        
        this.grid = new Ext.ux.maximgb.tg.EditorGridPanel({
          store: this.ds,
          master_column_id : 'fieldLabel',
          plugins: this.cellActions,
          autoScroll: true,
          clicksToEdit: 1,
          cm: this.cm,
          viewConfig: {hideGroupedColumn: true, forceFit: true},
          title: this.gridTitle,
          iconCls: 'icon-grid',
          el: this.containerEl,
          stateful: false,
          autoExpandColumn: 'fieldLabel',
          tools:[{
              id: 'hideVDDB',
              hidden: true,
              qtip: 'Hide VDDB Lookup Icons',
              handler: function(event, toolEl, panel)
              {
                var store = parentObj.grid.getStore();
                parentObj.showHideIcons('vddb', 'action1', store.getRange(), 'hide');
                Ext.fly(parentObj.grid.tools.hideVDDB).hide();
                Ext.fly(parentObj.grid.tools.showVDDB).show(true);
              }
            },{
              id: 'showVDDB',
              hidden: false,
              qtip: 'Show VDDB Lookup Icons',
              handler: function(event, toolEl, panel)
              {
                var store = parentObj.grid.getStore();
                parentObj.showHideIcons('vddb', 'action1', store.getRange(), 'show');
                Ext.fly(parentObj.grid.tools.showVDDB).hide();
                Ext.fly(parentObj.grid.tools.hideVDDB).show(true);
              }
            },{
              id: 'hideCDC',
              hidden: true,
              qtip: 'Hide CDC Lookup Icons',
              handler: function(event, toolEl, panel)
              {
                var store = parentObj.grid.getStore();
                parentObj.showHideIcons('cdc', 'action2', store.getRange(), 'hide');
                Ext.fly(parentObj.grid.tools.hideCDC).hide();
                Ext.fly(parentObj.grid.tools.showCDC).show(true);
              }
            },{
              id: 'showCDC',
              hidden: false,
              qtip: 'Show CDC Lookup Icons',
              handler: function(event, toolEl, panel)
              {
                var store = parentObj.grid.getStore();
                parentObj.showHideIcons('cdc', 'action2', store.getRange(), 'show');
                Ext.fly(parentObj.grid.tools.showCDC).hide();
                Ext.fly(parentObj.grid.tools.hideCDC).show(true);
              }
            },{
              id: 'hideCHAL',
              hidden: true,
              qtip: 'Hide CHAL Lookup Icons',
              handler: function(event, toolEl, panel)
              {
                var store = parentObj.grid.getStore();
                parentObj.showHideIcons('chal', 'action3', store.getRange(), 'hide');
                Ext.fly(parentObj.grid.tools.hideCHAL).hide();
                Ext.fly(parentObj.grid.tools.showCHAL).show(true);
              }
            },{
              id: 'showCHAL',
              hidden: false,
              qtip: 'Show CHAL Lookup Icons',
              handler: function(event, toolEl, panel)
              {
                var store = parentObj.grid.getStore();
                parentObj.showHideIcons('chal', 'action3', store.getRange(), 'show');
                Ext.fly(parentObj.grid.tools.showCHAL).hide();
                Ext.fly(parentObj.grid.tools.hideCHAL).show(true);
              }
            },{
              id: 'hideFVSH',
              hidden: true,
              qtip: 'Hide FVSH Lookup Icons',
              handler: function(event, toolEl, panel)
              {
                var store = parentObj.grid.getStore();
                parentObj.showHideIcons('fvsh', 'action4', store.getRange(), 'hide');
                Ext.fly(parentObj.grid.tools.hideFVSH).hide();
                Ext.fly(parentObj.grid.tools.showFVSH).show(true);
              }
            },{
              id: 'showFVSH',
              hidden: false,
              qtip: 'Show FVSH Lookup Icons',
              handler: function(event, toolEl, panel)
              {
                var store = parentObj.grid.getStore();
                parentObj.showHideIcons('fvsh', 'action4', store.getRange(), 'show');
                Ext.fly(parentObj.grid.tools.showFVSH).hide();
                Ext.fly(parentObj.grid.tools.hideFVSH).show(true);
              }
            },
                {
              id: 'expand',
              hidden: false,
              qtip: 'Expand All',
              handler: function(event, toolEl, panel)
              {
                var store = parentObj.grid.getStore();
                store.expandAll();
                /*Ext.fly(parentObj.grid.tools.expand).hide();
                Ext.fly(parentObj.grid.tools.collapse).show(true);*/
              }
            },{
              id: 'collapse',
              hidden: false,
              qtip: 'Collapse All',
              handler: function(event, toolEl, panel)
              {
                var store = parentObj.grid.getStore();
                store.collapseAll();
                /*Ext.fly(parentObj.grid.tools.collapse).hide();
                Ext.fly(parentObj.grid.tools.expand).show(true);*/
              }
            }]
        });
    
        this.grid.render();
        //this.adjustGridSize();
        this.ds.on("beforeload", function(store, options)
        {
          parentObj.grid.getEl().mask("Populating grid...");
        });
    
        this.ds.on("load", function(store, records, options)
        {
          parentObj.grid.getEl().unmask();
        });
    
        this.currTime = new Date();
        logger.info('before loading: ' + this.currTime);
        this.ds.load({callback: function (records, options, success)
          {
              var finishTime = new Date();
              logger.info('after loading: ' + finishTime);
              logger.info("Time to load data: " + (finishTime - parentObj.currTime) + " ms.");
            /*parentObj.syncCompareGridWithState();
            parentObj.showDifference();
            //parentObj.alignNumberFields();
            parentObj.adjustColumnWidths();
            parentObj.attachGridTooltips();*/
          }});
    
        this.grid.on('validateedit',
          function(editObj)
          {
            if (editObj.value.dateFormat)
            {
              if (editObj.value.dateFormat('d-M-Y h:i:s A') === editObj.originalValue)
                editObj.cancel = true;
              else if (editObj.value.dateFormat('h:i:s A') === editObj.originalValue)
                editObj.cancel = true;
            }
            else if ((editObj.originalValue === null && editObj.value === "") || (editObj.value === editObj.originalValue))
              editObj.cancel = true;
          }
        );
    
        this.grid.on("columnmove", function(oldIndex, newIndex)
          {
            parentObj.showDifference();
            //parentObj.alignNumberFields();
          }
        );
    
        this.grid.on("cellclick", function(grid, rowIndex, colIndex, evtObj)
        {
          var store = grid.getStore();
          var record = store.getAt(rowIndex);
    
          if (record.get("_is_leaf") === false)
          {
            if (store.isExpandedNode(record))
              store.collapseNode(record);
            else
              store.expandNode(record);
    
            Ext.get(grid.getView().getCell(rowIndex, colIndex)).removeClass('x-grid3-cell-selected');
          }
          else
            return true;
        });
    
        this.grid.on("cellcontextmenu", function(grid, rowIndex, cellIndex, ev)
        {
          //innerHtml.substring(innerHtml.indexOf('>') +1, innerHtml.lastIndexOf('<'))
          ev.stopEvent();
          var rec = parentObj.ds.getAt(rowIndex);
    
          if (rec.get("_is_leaf") != false)
          {
            var coords = ev.getXY();
      
            //var cell = grid.getView().getCell(rowIndex, cellIndex);
            var gcColIndex = grid.getColumnModel().findColumnIndex('gc');
            if (cellIndex != 0 && cellIndex != gcColIndex)
            {
              var menu = new Ext.menu.Menu({
                id: 'compareCtxtMenu'
              });
              menu.on("hide", function(menuComponent){
                Ext.get(grid.getView().getCell(rowIndex, cellIndex)).removeClass('gs_focusCell');
                menuComponent.destroy();
                
              });
              menu.addMenuItem({text: 'Copy To GC'}).
              setHandler(function(item, ev){
                /*var innerHtml = grid.getView().getCell(rowIndex, cellIndex).innerHTML;
                var text = innerHtml.substring(innerHtml.indexOf('>') +1, innerHtml.lastIndexOf('<'));
        
                var gcColIndex = grid.getColumnModel().findColumnIndex('gc');
                var gcInnerHTML = grid.getView().getCell(rowIndex, gcColIndex).innerHTML; 
                gcInnerHTML = gcInnerHTML.substring(0, gcInnerHTML.indexOf('>') +1) + text + gcInnerHTML.substring(gcInnerHTML.lastIndexOf('<'));
                grid.getView().getCell(rowIndex, gcColIndex).innerHTML = gcInnerHTML;
                grid.getView().focusCell(rowIndex, cellIndex);*/
                var cm = grid.getColumnModel();
                var data = rec.get(cm.getColumnById(cm.getColumnId(cellIndex)).dataIndex);
                rec.data['gc'] = data;
                rec.commit();
                var elem = Ext.get(grid.getView().getCell(rowIndex, gcColIndex));
                 var lockStatus = rec.get('lock-status');
                Ext.fly(grid.getView().getCell(rowIndex, gcColIndex)).frame("E31014", 1, { duration: 1 });
                Ext.fly(grid.getView().getCell(rowIndex, gcColIndex)).addClass('x-grid3-dirty-cell');      //Show the indicator that the cell has been edited.
      
                var from = cm.getColumnById(cm.getColumnId(cellIndex)).dataIndex;
                var datagroup = rec.get('datagroup');
                var fieldName = rec.get('fieldLabel');
                var path = rec.id;
                if(lockStatus === 'ATTR')
                {
                 elem.addClass('gs_locked');
                }
                else if(lockStatus === 'PERP')
                {
                elem.addClass('gs_permlocked');
                }else
                {    
                elem.removeClass([ 'gs_locked', 'gs_permlocked']);      
                }
                if(parentObj.inDetailPage)
                  GS.submitFormPPR(parentObj.formName, GS.noResponseId,
                  {event: 'copyToGC',
                   from: from,
                   path :path,
                   fld_value : data,
                   dataGroup: datagroup,
                   fld_nme: fieldName.replace("*",""),
                   srchTaskId: taskId,
                   taskId: mainTaskId
                  }, null, false, false);
                else
                  GS.submitFormPPR(parentObj.formName, GS.noResponseId,
                  {event: 'copyToGC',
                   from: from,
                   fld_value : data,
                   path:path,
                   dataGroup: datagroup,
                   fld_nme: fieldName.replace("*",""),
                   taskId: taskId
                  }, null, false, false);
                  
                  
              });
             
          
          
      
              Ext.get(grid.getView().getCell(rowIndex, cellIndex)).addClass('gs_focusCell');
              menu.showAt([coords[0], coords[1]]);
            }        
          }
        });
        
        this.grid.on('afteredit', 
          function(editObj)
          {
            //editObj properties: grid, record, field, value, originalValue, row, column
            var rec = parentObj.ds.getAt(editObj.row);
            var path = rec.id;
            var lockStatus = rec.get('lock-status');
            var fieldName = rec.get('fieldLabel');
            var datagroup = rec.get('datagroup');
            var editedValue = "" + editObj.value;
            var rowIndex = editObj.row;
            var gcColIndex = editObj.grid.getColumnModel().findColumnIndex('gc');
            var elem = Ext.get(editObj.grid.getView().getCell(rowIndex, gcColIndex));
             if(lockStatus === 'ATTR')
            {
                 elem.addClass('gs_locked');
            }else if(lockStatus === 'PERP')
            {
                elem.addClass('gs_permlocked');
            }else
            {
                
          elem.removeClass([ 'gs_locked', 'gs_permlocked']);
              
            }
            parentObj.submitCompareState( 
            {event: 'saveCompareState',
             modifiedCol: fieldName.replace("*",""),
             colValue: editedValue,
             datagroup: datagroup,
             recordId: path,
             srchTaskId: parentObj.taskId,
             taskId: parentObj.mainTaskId
            });
          }
        );    
      };
      this.init();
    }
    
    showHideCompareCriteria = function(hideOnly, formName, taskId, criteriaExpanded)
    {
      if(hideOnly && !criteriaExpanded)
        return true;
    
      var compareCritElem = Ext.fly('gs_compareEntities_' + this.taskId);
    
      if (compareCritElem != undefined)  //Can be undefined if 'showCriteria' is set to false.
      {
        toggleSection('gs_compareEntities_' + taskId, formName, null, null, null, taskId);
        criteriaExpanded = !criteriaExpanded;
      }
      return false;
    }
    
    Ext.override(Ext.ToolTip, {
        dismissDelay: 10000,
        onTargetOver : function(e){
            if(this.disabled || e.within(this.target.dom, true)){
                return;
            }
            var t = e.getTarget(this.delegate);
            if (t) {
                this.triggerElement = t;
                this.clearTimer('hide');
                this.targetXY = e.getXY();
                this.delayShow();
            }
        },
        onMouseMove : function(e){
            var t = e.getTarget(this.delegate);
            if (t) {
                this.targetXY = e.getXY();
                if (t === this.triggerElement) {
                    if(!this.hidden && this.trackMouse){
                        this.setPagePosition(this.getTargetXY());
                    }
                } else {
                    this.hide();
                    this.lastActive = new Date(0);
                    this.onTargetOver(e);
                }
            } else if (!this.closable && this.isVisible()) {
                this.hide();
            }
        },
        hide: function(){
            this.clearTimer('dismiss');
            this.lastActive = new Date();
            delete this.triggerElement;
            Ext.ToolTip.superclass.hide.call(this);
        }
    });
    Could you please help me out here or point me in the right direction?
    jackie

  6. #126
    Sencha User
    Join Date
    Dec 2012
    Posts
    2
    Vote Rating
    0
    dhanrajb4 is on a distinguished road

      0  

    Default editor grid panel header is not showing

    editor grid panel header is not showing


    hi,

    i am trying to render an editor grid panel inside a panel and column headers is not shown

    on load the column header is shown when the AdjacencyListStore data is loaded the column header goes invisible

    note:when i mouse over on the header section of the editor grid panel the column headers are shown.

    please help me in showing the column headers when the store is loaded

    its happening only in IE