PDA

View Full Version : Tree loading Grid error



mjhaston
8 Jun 2013, 5:46 AM
I could use some help tracking down an error.

I have a tree that upon itemclick loads a grid. I can click all day expanding and reloading the tree. It loads the grid all day.

My error happens after I've clicked on any row in the grid (in the row or on the actioncolumn) and then I come back and click on a node. It doesn't happen if I expand a node. Only when I click on the node thus calling the itemclick and loading the grid again. The grid does get loaded, I can still continue on, but I see the error in my Firebug console.

Thanks in advance.





var treeStore = Ext.create('Ext.data.TreeStore', {
proxy : {
type : 'ajax',
url : '/cgi-bin/jsonusrif3.pgm'
},
root : {
text : 'Home',
id : 'src',
expanded : true
},
folderSort : true,
sorters : [{
property : 'text',
direction : 'ASC'
}]
});

var tree = Ext.create('Ext.tree.Panel', {
store : treeStore,
plugins : {
ptype : 'bufferedrenderer'
},
title : 'Integrated File System',
rootVisible : false,
useArrows : true,
dockedItems : [{
xtype : 'toolbar',
items : [{
text : 'Expand All',
disabled : true,
handler : function() {
tree.getEl().mask('Expanding tree...');
var toolbar = this.up('toolbar');
toolbar.disable();

tree.expandAll(function() {
tree.getEl().unmask();
toolbar.enable();
});
}
}, {
text : 'Collapse All',
disabled : false,
handler : function() {
var toolbar = this.up('toolbar');
toolbar.disable();

tree.collapseAll(function() {
toolbar.enable();
});
}
}]
}],
listeners : {
itemclick : function(view, record, item, index, e) {
//console.log(record.data.id)
wrklnkStore.load({
params : {
id : record.data.id
}
});
wrklnkGrid.setTitle('Work with Integrated File System: ' + record.data.id);
}
}
});

var wrklnkGrid = Ext.create('Ext.grid.Panel', {
title : 'Work with Integrated File System',
frame : false,
border : true,
store : wrklnkStore,
viewConfig : {
forceFit : true
},
split : true,
region : 'center',
columns : [{
xtype : 'actioncolumn',
//text : 'ACTIONS',
width : 30,
sortable : false,
items : [{
getClass : function(v, meta, rec) {
if (rec.get('type') == '*STMF') {
if (rec.get('filename').toLowerCase().search('.pdf') > -1) {
return 'adobeCss';
}
if (rec.get('filename').toLowerCase().search('.xls') > -1) {
return 'xlsCss';
}
if (rec.get('filename').toLowerCase().search('.xlsx') > -1) {
return 'xlsCss';
}
if (rec.get('filename').toLowerCase().search('.csv') > -1) {
return 'csvCss';
}
if (rec.get('filename').toLowerCase().search('.txt') > -1) {
return 'txtCss';
}
if (rec.get('filename').toLowerCase().search('.doc') > -1) {
return 'docCss';
}
if (rec.get('filename').toLowerCase().search('.docx') > -1) {
return 'docCss';
} else {
return 'emptyCss';
}
} else if (rec.get('type') == '*DIR') {
return 'folder';
} else if (rec.get('type') == '*SYMLNK') {
return 'folder';
} else {
return 'emptyCss';
}
},
getTip : function(v, meta, record, rowIndex, colIndex, store) {
if (record.get('type') == '*STMF') {
return 'Type: ' + record.get('description') + '<br>Authors: ' + record.get('owner') + '<br>Size: ' + record.get('size') + '<br>Date modified: ' + Ext.util.Format.date(record.get('modify_timestamp'), 'n/j/Y g:i:s A');
} else if (record.get('type') == '*DIR') {
return 'Date modified: ' + Ext.util.Format.date(record.get('change_timestamp'), 'n/j/Y g:i:s A') + '<br>Size: ' + record.get('size') + '<br>Authors: ' + record.get('owner');
} else if (record.get('type') == '*SYMLNK') {
return 'Date modified: ' + Ext.util.Format.date(record.get('change_timestamp'), 'n/j/Y g:i:s A') + '<br>Size: ' + record.get('size') + '<br>Authors: ' + record.get('owner');
} else {
return '';
}
},
handler : function(grid, rowIndex, colIndex) {
var record = wrklnkStore.getAt(rowIndex);
console.log(record.data.type)
if (record.data.type == '*STMF') {
var rec = wrklnkStore.getAt(rowIndex);
wrklnkGrid.getSelectionModel().select(rowIndex);
var body = Ext.getBody();
var myForm = body.createChild({
tag : 'form',
cls : 'x-hidden',
id : 'hidden_form',
method : 'post',
target : '_blank'
});

loadText = 'Loading... Please wait';
Ext.Ajax.request({
url : '/cgi-bin/cgireadifs.pgm',
form : myForm,
params : {
disposition : 'download',
filename : rec.get('filename'),
path : rec.get('path')
},
isUpload : true,
success : function() {
Ext.getBody().unmask
}
});
Ext.Ajax.on('requestcomplete', Ext.getBody().unmask, Ext.getBody());

} else if (record.data.type == '*DIR' || record.data.type == '*SYMLNK') {
console.log('handle folder')
}
}
}]
}, {
xtype : 'gridcolumn',
header : 'FILE NAME',
sortable : false,
flex : 2,
dataIndex : 'filename',
editable : false,
align : 'left',
id : ''
}, {
xtype : 'datecolumn',
dataIndex : 'modify_timestamp',
header : 'MODIFY DATE',
sortable : false,
flex : 1,
editable : false,
renderer : Ext.util.Format.dateRenderer('n/j/Y g:i:s A')
}, {
xtype : 'gridcolumn',
header : 'TYPE',
sortable : false,
flex : 1,
dataIndex : 'description',
editable : false,
align : 'left',
id : ''
}, {
xtype : 'gridcolumn',
header : 'SIZE',
sortable : false,
flex : 1,
dataIndex : 'size',
editable : false,
align : 'right',
id : ''
}]
});

mjhaston
8 Jun 2013, 8:36 AM
Added note ... I don't get the error when I add this to the configuration of the grid:




disableSelection: true




However, I would like to be able to select a row, if not just to highlight it.

mjhaston
10 Jun 2013, 9:51 AM
Added note. I'm getting this warning which is similar, but different to the error. Just in case that means anything to someone!




Non-standard document.all property was used. Use W3C standard document.getElementById() instead.


...aw.height],["L",v,aw.y+aw.height],["L",v,t]]);if(!ap.fillPath){ap.fillPath=z.add...

slemmon
10 Jun 2013, 12:10 PM
If you don't use the bufferedRenderer on the tree does the error persist?
If you click a node and console.log() the id of the record and then select a grid row and click the same node and console.log() the id of the record are they the same as you'd expect?
Is this with ExtJS 4.2.0? 4.2.1?

mjhaston
10 Jun 2013, 1:27 PM
Comment out bufferedRenderer and the error still exists.

If I followed your directions correctly, the id of the node was what I expected. I click on node A, clicked in the grid and then went back and click node A again. Both times the console log told me it was A.

I'm using 4.2.0 ... primarily for the bufferedRenderer. I was having horrible delays using Firefox prior to that and my tree only has 110 or so nodes and only loads one level at a time.

I feel like I'm missing something in the configuration of my grid that needs to handle the selection, even though I won't use it. Only care about my actioncolumn clicks.

Thanks for your suggestions. Maybe I'll load 4.2.1 for kicks.