PDA

View Full Version : Assigning div IDs to each cell of a Grid - hasRows problem [Ext2 to Ext 3 migration]



Vinni
28 Nov 2012, 11:36 PM
Hi,

We have added a plugin in Ext.grid.GridPanel for generating IDs for each row/cell in grid. This was required for automation scripts to work. It was working fine with extjs 2.

Like:
jid-gen-grdAvailInf-row-0
jid-gen-grdAvailInf-cell-0-0
jid-gen-grdAvailInf-cell-0-1

Currently we are in process of upgrading legacy Extjs 2 to Extjs 3.
Lot of DOM elements are changed in extjs 3 for many existing ext components.

Already went through Upgrading-to-Ext-3 (http://www.sencha.com/forum/showthread.php?70352-Upgrading-to-Ext-3) forum and noted the changes.

Facing issues with Ext.grid.GridView - hasRows function. This function is checking for
mainBody.dom.firstChild.nodeType == 1

For grid nodeType value is coming as 3 (TEXT_NODE) and hence it returns false.
(http://www.javascriptkit.com/domref/nodetype.shtml)
Hence view.getRow(i) returns as undefined and my project breaks.

Please help me to check proper dom elements after upgrading to Extjs 3.

Thanks,
Vinni


avlIntfTable = new Ext.grid.GridPanel({
id: 'grdAvailInf',
plugins: new plugin.GridAutoId(),
name:'avlIntf',
style: {"margin-top":"10px","margin-left":"10px"},
ds: avlIntfStore,
cm: avlIntfModel,
width: 360,height: 150,
menuDisabled:true
});

plugin.AutoId=function(config){
if(config){
Ext.apply(this,config);
}
};

plugin.GridAutoId=Ext.extend(jnpr.plugin.AutoId,{
useRecordId:false,
init:function(target){
if(!(target instanceof Ext.grid.GridPanel)){
throw new Error('jnpr.plugin.GridAutoId: target is not an Ext.grid.Grid');
}
jnpr.plugin.GridAutoId.superclass.init.call(this,target);this.target.on('render',this.onRenderGrid,this);
},
onRenderGrid:function(element){
try {
var grdDom = element.getEl().dom;
var headerDom = Ext.DomQuery.selectNode('div[class=x-grid3-header]', grdDom);
var header = Ext.DomQuery.select('div[class*=x-grid3-hd-inner]', headerDom);
if(null != header){
for(var i = 0; i < header.length; i++){
header[i].setAttribute("id",this.target.getId()+"_Header_"+i);
}
}
}
catch (e){}
var view=this.target.getView();
this.onRefreshGrid(view);
view.on('refresh',this.onRefreshGrid,this);
view.on('rowsinserted',this.onRowsInserted,this);
view.on('rowupdated',this.onRowUpdated,this);
if(!this.useRecordId){
view.on('rowremoved',this.onRowRemoved,this);
}
var ptb=this.target.getBottomToolbar();
if(ptb&&ptb instanceof Ext.PagingToolbar){
var tbEl=ptb.getEl().dom;
var idParts=['first','prev','next','last'];
for(var i=0;i<idParts.length;i++){
this.addButtonId(idParts[i],tbEl);
}
var el=Ext.DomQuery.selectNode('button[class*=x-tbar-loading]',tbEl);
if(el&&(!el.id||this.isExtId(el.id))){
el.setAttribute('id',this.autoIdPrefix+this.target.getId()+'-ptbar-refresh');
}
var inputEl=Ext.DomQuery.selectNode('input[class*=x-tbar-page-number]',tbEl);
if(inputEl&&(!inputEl.id||this.isExtId(inputEl.id))){
inputEl.setAttribute('id',this.autoIdPrefix+this.target.getId()+'-ptbar-page-number');
}
}
},
onRefreshGrid:function(view,firstRow,lastRow){
var grid=view.grid;
var store=grid.getStore();
var limit=lastRow===undefined?store.getCount():lastRow+1;
var startRow=firstRow===undefined?0:firstRow;
var sm=grid.getSelectionModel();
var isCBSelect=sm&&(sm instanceof Ext.grid.CheckboxSelectionModel);
var prefix=this.autoIdPrefix+grid.getId()+'-';
var groupCnt=1;
for(var i=startRow;i<limit;i++){
var el=view.getRow(i);
var rid;
if(this.useRecordId){
var record=store.getAt(i);
rid=Ext.util.Format.htmlEncode(record.id);
}
else{
rid=i;
}
el.setAttribute('id',prefix+'row-'+rid)
if(isCBSelect){
var cb=Ext.DomQuery.selectNode('div[class*=x-grid3-row-checker]',el);
if(cb){cb.setAttribute('id',el.id+'-check');}
}

if(view.enableGrouping){
var group_header_el=Ext.DomQuery.select('div[class*=x-grid-group-hd]',el.parentNode.parentNode);
if(group_header_el[0]&&group_header_el[0].id.substring(0,7)=="ext-gen")
group_header_el[0].id=prefix+"group-"+groupCnt++;
}
this.updateCells(el,prefix,rid);
}
},
updateCells:function(rowEl,prefix,rid){
var cells=Ext.DomQuery.select('div[class*=x-grid3-cell-inner]',rowEl);
if(cells){
for(var j=0;j<cells.length;j++){
var cell=cells[j];
var cellId=prefix+'cell-'+rid+'-'+j;
cell.setAttribute('id',cellId);
var subEls=Ext.DomQuery.select('*',cell);
if(subEls){
for(var k=0;k<subEls.length;k++){
var subEl=subEls[k];
if(!subEl.id||this.isExtId(subEl.id)||this.isAutoId(subEl.id)){
subEl.setAttribute('id',cellId+'-'+k);
}
}
}
}
}
},
onRowsInserted:function(view,firstRow,lastRow){
this.onRefreshGrid(view,firstRow,this.useRecordId?lastRow:undefined);
},
onRowRemoved:function(view,row){
this.onRefreshGrid(view,row);
},
onRowUpdated:function(view,row,record){
this.onRefreshGrid(view,row,row);
},
addButtonId:function(idPart,tbEl){
var el=Ext.DomQuery.selectNode('button[class*=x-tbar-page-'+idPart+']',tbEl);
if(el&&(!el.id||this.isExtId(el.id))){
el.setAttribute('id',this.autoIdPrefix+this.target.getId()+'-ptbar-page-'+idPart);
}
}
});