PDA

View Full Version : TreeCombo-- tree nodes not showing in IE8



JackJohnsonX
26 Jan 2015, 11:53 AM
I am using custom "treecombo" plugin. Here is the code:


Ext.define('MyApp.plugins.TreeCombo',
{
extend: 'Ext.form.field.Picker',
alias: 'widget.treecombo',
tree: false,
constructor: function(config)
{
this.addEvents(
{
"itemclick" : true
});




this.listeners = config.listeners;
this.callParent(arguments);
},
records: [],
recursiveRecords: [],
ids: [],
selectChildren: true,
canSelectFolders: true,
multiselect: false,
displayField: 'text',
valueField: 'text',
treeWidth: 300,
matchFieldWidth: false,
treeHeight: 400,
masN: 0,
recursivePush: function(node, setIds)
{

var me = this;

me.addRecRecord(node);
if(setIds) me.addIds(node);

node.eachChild(function(nodesingle)
{
if(nodesingle.hasChildNodes() == true)
{
me.recursivePush(nodesingle, setIds);
}
else
{
me.addRecRecord(nodesingle);
if(setIds) me.addIds(nodesingle);
}
});
},
recursiveUnPush: function(node)
{
var me = this;
me.removeIds(node);

node.eachChild(function(nodesingle)
{
if(nodesingle.hasChildNodes() == true)
{
me.recursiveUnPush(nodesingle);
}
else me.removeIds(nodesingle);
});
},
addRecRecord: function(record)
{
var me = this;




for(var i=0,j=me.recursiveRecords.length;i<j;i++)
{
var item = me.recursiveRecords[i];
if(item)
{
if(item.getId() == record.getId()) return;
}
}
me.recursiveRecords.push(record);
},
afterLoadSetValue: false,
setValue: function(valueInit)
{
if(typeof valueInit == 'undefined') return;

var me = this,
tree = this.tree,
values = (valueInit == '') ? [] : valueInit.split(','),
valueFin = [];

inputEl = me.inputEl;




if(tree.store.isLoading())
{
me.afterLoadSetValue = valueInit;
}




if(inputEl && me.emptyText && !Ext.isEmpty(values))
{
inputEl.removeCls(me.emptyCls);
}




if(tree == false) return false;

var node = tree.getRootNode();
if(node == null) return false;

me.recursiveRecords = [];
me.recursivePush(node, false);

me.records = [];
Ext.each(me.recursiveRecords, function(record)
{
var id = record.get(me.valueField);


var index = values.indexOf(""+id);

if(me.multiselect == true) record.set('checked', false);

if(index != -1)
{
valueFin.push(record.get(me.displayField));
if(me.multiselect == true) record.set('checked', true);
me.addRecord(record);
}
});




me.value = valueInit;
me.setRawValue(valueFin.join(', '));

me.checkChange();
me.applyEmptyText();
return me;
},
getValue: function()
{
return this.value;
},
getSubmitValue: function()
{
return this.value;
},
checkParentNodes: function(node)
{
if(node == null) return;

var me = this,
checkedAll = true;




node.eachChild(function(nodesingle)
{
var id = nodesingle.getId(),
index = me.ids.indexOf(''+id);

if(index == -1) checkedAll = false;
});

if(checkedAll == true)
{
me.addIds(node);
me.checkParentNodes(node.parentNode);
}
else
{
me.removeIds(node);
me.checkParentNodes(node.parentNode);
}
},
initComponent: function()
{
var me = this;
if (!Array.prototype.indexOf)
{
Array.prototype.indexOf = function(elt /*, from*/)
{
var len = this.length >>> 0;


var from = Number(arguments[1]) || 0;
from = (from < 0)
? Math.ceil(from)
: Math.floor(from);
if (from < 0)
from += len;


for (; from < len; from++)
{
if (from in this &&
this[from] === elt)
return from;
}
return -1;
};
}

me.tree = Ext.create('Ext.tree.Panel',
{
alias: 'widget.assetstree',
hidden: true,
minHeight: 300,
rootVisible: (typeof me.rootVisible != 'undefined') ? me.rootVisible : true,
floating: true,
useArrows: true,
width: me.treeWidth,
autoScroll: true,
height: me.treeHeight,
store: me.store,
listeners:
{
load: function(store, records)
{
if(me.afterLoadSetValue != false)
{
me.setValue(me.afterLoadSetValue);
}
},
itemclick: function(view, record, item, index, e, eOpts)
{
me.itemTreeClick(view, record, item, index, e, eOpts, me)
}
}
});

if(me.tree.getRootNode().get('checked') != null) me.multiselect = true;

this.createPicker = function()
{
var me = this;
return me.tree;
};

this.callParent(arguments);
},
addIds: function(record)
{
var me = this;

if(me.ids.indexOf(''+record.getId()) == -1) me.ids.push(''+record.get(me.valueField));
},
removeIds: function(record)
{
var me = this,
index = me.ids.indexOf(''+record.getId());

if(index != -1)
{
me.ids.splice(index, 1);
}
},
addRecord: function(record)
{
var me = this;




for(var i=0,j=me.records.length;i<j;i++)
{
var item = me.records[i];
if(item)
{
if(item.getId() == record.getId()) return;
}
}
me.records.push(record);
},
removeRecord: function(record)
{
var me = this;




for(var i=0,j=me.records.length;i<j;i++)
{
var item = me.records[i];
if(item && item.getId() == record.getId()) delete(me.records[i]);
}
},
itemTreeClick: function(view, record, item, index, e, eOpts, treeCombo)
{

var me = treeCombo,
checked = !record.get('checked');//it is still not checked if will be checked in this event

if(me.multiselect == true) record.set('checked', checked);//check record

var node = me.tree.getRootNode().findChild(me.valueField, record.get(me.valueField), true);
me.setValue(record.data.text);
if(node == null)
{
if(me.tree.getRootNode().get(me.valueField) == record.get(me.valueField)) node = me.tree.getRootNode();
else return false;
}

if(me.multiselect == false) me.ids = [];

//if it can't select folders and it is a folder check existing values and return false
if(me.canSelectFolders == false && record.get('leaf') == false)
{
me.setRecordsValue(view, record, item, index, e, eOpts, treeCombo);
return false;
}

//if record is leaf
if(record.get('leaf') == true)
{
if(checked == true)
{
me.addIds(record);
}
else
{
me.removeIds(record);
}
}
else //it's a directory
{
me.recursiveRecords = [];
if(checked == true)
{
if(me.multiselect == false)
{
if(me.canSelectFolders == true) me.addIds(record);
}
else
{
if(me.canSelectFolders == true)
{
me.recursivePush(node, true);
}
}
}
else
{
if(me.multiselect == false)
{
if(me.canSelectFolders == true) me.recursiveUnPush(node);
else me.removeIds(record);
}
else me.recursiveUnPush(node);
}
}

//this will check every parent node that has his all children selected
if(me.canSelectFolders == true && me.multiselect == true) me.checkParentNodes(node.parentNode);

me.setRecordsValue(view, record, item, index, e, eOpts, treeCombo);
},
fixIds: function()
{
var me = this;

for(var i=0,j=me.ids.length;i<j;i++)
{
if(me.ids[i] == 'NaN') me.ids.splice(i, 1);
}
},
setRecordsValue: function(view, record, item, index, e, eOpts, treeCombo)
{
var me = treeCombo;

me.fixIds();

me.setValue(me.ids.join(','));




me.fireEvent('itemclick', me, record, item, index, e, eOpts, me.records, me.ids);




if(me.multiselect == false) me.onTriggerClick();
}
});


This works perfectly fine in Chrome and FF but not in IE. Has anyone ever had the same issue?

The only change I made to orginal code is highlighted in green above to fix a separate IE issue.

lumberjack
28 Jan 2015, 6:41 AM
I'd like to test this along with you. Can you post a simple test case either inline here or at https://fiddle.sencha.com?




Regards,
Brian

JackJohnsonX
28 Jan 2015, 8:12 AM
Hi Brian,

I was periodically testing in IE. Last I tested was two days ago and since then I have made many changes to my code. When I tested again now, it is working fine in IE8. So I wont be able to pinpoint what cause/fix was. Sorry. One major change I did make was using actual data coming from server as opposed to using a stubbed with dummy data, though the format was the same. Also, I had left out some crucial info: I'm using this plugin as editor in editable grid. Ill post my grid code here, might help you test.

//editable grid

Ext.define("MyApp.view.grid.FOO",{
extend:"Ext.grid.Panel",
alias:"widget.myapp_grid_foo",
requires:["MyApp.plugins.TreeCombo"],
viewConfig:{markDirty:false},

padding:"10px",

initComponent:function() {

this.cellEditing = new Ext.grid.plugin.CellEditing({
clicksToEdit: 2
});

this.plugins = [this.cellEditing];

this.columns = [
{
header:"Region",
dataIndex:"REGION,
flex:1,
editor:{rootVisible: false, xtype:"treecombo", selectChildren: true, itemId:"createregion", store:"Region", treeWidth:210, displayField:"text", valueField:"text",canSelectFolders: false}
},


//treecombo store

Ext.define("MyApp.store.Region", {
extend:"Ext.data.TreeStore",
lazyFill:true,
autoLoad:true,
fields:["id", "text", "leaf", "value", "description"],
root: {
text: "",
id: '0',
expanded:true
},
proxy: {
type: 'ajax',
url: '/blah.html',
reader: {
type: 'json',
root:"data"
}
}

});


-Jack