Reputation: 776
How to insert new node in TreePanel in ExtJS4?
I would like to insert a new node into my Tree. I develop with Sencha library version 4. TreeNode seems not working ... Firebug error :
Erreur : uncaught exception: Ext.Loader is not enabled, so dependencies cannot be resolved dynamically. Missing required class: Ext.tree.TreeNode
I have add Loader config enable : true . it don't work too ... !
My code :
/*Ext.Loader.setConfig({
enabled: true
});
*/
Ext.require([
'Ext.form.*',
'Ext.grid.*',
'Ext.tree.*',
'Ext.data.*',
'Ext.util.*',
'Ext.loader.*',
'Ext.state.*',
'Ext.layout.container.Column',
'Ext.tab.TabPanel'
]);
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.define('Task', {
extend : 'Ext.data.Model',
fields : [
{ name : 'id', type :'int'},
{ name : 'task', type : 'string' },
{ name : 'material', type : 'string'},
{name : 'cc' , type : 'string'},
{ name : 'date_debut', type : 'string'}
]
});
var store = Ext.create('Ext.data.TreeStore',{
model : 'Task',
proxy : {
type : 'ajax',
url : 'myjson.json'
},
folderSort: true
});
var tree = Ext.create('Ext.tree.TreePanel',{
title : 'Task Manager',
width :1000,
height : 400,
//renderTo : Ext.getBody(),
collapsible : true,
useArrows : true,
rootVisible : false,
store : store,
multiSelect : true,
itemId : 'id',
singleExpand : true,
tbar : [
{
xtype : 'button' , text : 'ADD TASK ',
handler : function(){
var selectedItem = tree.getSelectionModel().getSelection();
if(!selectedItem){
selectedItem = tree.getRootNode();
}
handleCreate = function(btn, text,cBoxes){
if(btn=='ok' && text){
//alert('oui');
//var newNode = new Ext.tree.TreeNode({});
var newNode = Ext.create('Ext.tree.TreeNode',{
id : '0',
task : text,
material : 'New Material',
cc : 'new CC',
date_debut :'00/00/00',
leaf : false,
allowChildren : false
});
if(selectedItem.isLeaf()) {
selectedItem.parentNode.insertBefore(newNode, selectedItem.nextSibling);
} else {
selectedItem.insertBefore(newNode, selectedItem.firstChild);
}
}else{
alert('non');
}
}
Ext.MessageBox.show({
title:'Add new Folder Item',
msg: 'Name of Folder Item:',
buttons: Ext.MessageBox.OKCANCEL,
prompt:true,
fn: handleCreate
});
}
}
],
listeners : {
itemclick : function(a,b,c,d,e){
var size = b.length;
// alert(d + ' ' + b.toString()+' b size = '+size+' e ' + e + ' a ' + a);
if( b instanceof Task){
// Form = les champs dans le form editable
var form = fields.getForm();
//Chaque field de la zone d'edition
var fId = form.findField('id');
var ftask = form.findField('task');
var fmaterial = form.findField('material');
var fcc = form.findField('cc');
var fStartDate = form.findField('start_date');
fId.setValue(b.get('id'));
ftask.setValue(b.get('task'));
fmaterial.setValue(b.get('material'));
}
}
},
//plugins: [cellEditing],
columns : [{
text : 'ID',
dataIndex : 'id',
sortable : true,
width : 50
},{
xtype : 'treecolumn',
text : 'Task',
flex : 2,
sortable : true,
dataIndex : 'task',
width : 100
},
{
text : 'Material',
dataIndex : 'material',
width : 100
},
{
text : 'CC',
dataIndex : 'cc',
width : 100
},
{
text : 'Date_Debut',
dataIndex : 'date_debut',
width : 100
}]
});
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
]
});
var fields = Ext.create('Ext.form.Panel',{
frame : true,
title : 'Editing Zone',
width : 1000,
fieldDefaults : {
msgTarget : 'side',
labelWidth : 75
},
defaultType : 'textfield',
defaults : {
anchor : '100%'
},
items : [
//TaskName
{
fieldLabel : 'TaskName',
name : 'task',
allowBlank : false
},{
xtype: 'combo',
name : 'material',
fieldLabel: 'Choose Material',
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr'
},{
xtype:'datefield',
anchor : '100%',
disabledDays: [0, 6],
fieldLabel : 'date_debut'
},{
xtype : 'hiddenfield',
name : 'id'
}],
layout: 'hbox',
buttons: [{
text: 'Reset',
handler: function() {
this.up('form').getForm().reset();
}
}, {
text: 'Submit',
formBind: true, //only enabled once the form is valid
handler: function() {
var id =this.up('form').getForm().findField('id');
var id2 = id.getValue();
var node = tree.getSelectionModel().getSelection();
alert(node);
}
}],
});
fields.render('mesfields');
tree.render('mongrid');
});
Upvotes: 1
Views: 17891
Answers (3)
Reputation: 71
Hi I'd had a similar problem and looking in the doc found:
Ext.data.NodeInterface, is a node from the treePanel in my case I get the root node and add a child by the method apendChild
Ext.Ajax.request({
loadMask: true,
url: 'index.php?X=1',
success: function (resp) {
var t = Ext.decode(resp.responseText);
root = Ext.getCmp('tree-panel').getRootNode(); //get the root node
for (i = 0; i < t.length; i++) {
root.appendChild({
id: i,
text: t[i],
leaf: true
}); //add childs
}
Ext.get(document.body).unmask();
}
});
I can see its easer. NodeInterface has other more usefull methods :)
Upvotes: 7
Reputation: 20431
I assume that this was originally 3.x code that you are converting to 4.0? The TreeNode class no longer exists in 4.0. Instead you would create a standard Model instance and append that to your tree. In 4.0 the tree's model (what were records in 3.x) get "decorated" with the new NodeInterface class, meaning that your model objects will also have a node API when they are used in the tree. I.e., no need for a TreeNode object separate from the Model itself.
Upvotes: 8
Reputation: 3413
not sure with the error, cause i did not test your code...
but from this forum, i got conclusion that Ext.require is include a script from file system...
like
Ext.require([
'Ext.form.*',
'Ext.tree.*',
]);
it's mean include all js in src/form/ and src/tree/ more info
the error what you get is because var newNode = Ext.create('Ext.tree.TreeNode',{
and there is not a TreeNode.js in C:\xampp\htdocs\ext-4b3\src\tree (my local).
Upvotes: 2
Related Questions
- How to insert new record ( model ) in TreePanel?
- ExtJS 6. Unable to add a node to a treepanel
- How to add a child to a node in a TreePanel?
- Ext JS 3.4 - Dynamically Add Nodes in TreePanel
- ExtJS: How to dynamically add child nodes to treepanel
- ExtJS 4.2.1 , Tree, adding children to a node
- extjs4 treepanel childnode editing
- Insert a node at a specific location in Ext.tree.panel
- Creating tree panel in ExtJs 4.0
- How to use ExtJS TreeEditor