我想在我的树中插入一个新节点。 我用Sencha库版本4开发。 TreeNode似乎不起作用...... Firebug错误：
Erreur：未捕获的异常：未启用Ext.Loader，因此无法动态解析依赖项。缺少必需的类：Ext.tree.TreeNode
我添加了Loader config enable：true。它也不起作用......！
我的代码：
/*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');
});
答案 0 :(得分：8)
我认为这是最初转换为4.0的3.x代码？ 4.0中不再存在TreeNode类。相反，您将创建一个标准的Model实例并将其附加到您的树上。在4.0中，树的模型（3.x中的记录）使用新的NodeInterface类进行“修饰”，这意味着模型对象在树中使用时也将具有节点API。即，不需要将TreeNode对象与Model本身分开。
答案 1 :(得分：7)
您好我遇到了类似的问题并查看了发现的文档：
Ext.data.NodeInterface，是我的案例中的treePanel节点，我得到根节点并通过方法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();
}
});
我可以看到它更容易。 NodeInterface还有其他更有用的方法：）
答案 2 :(得分：2)
不确定错误，因为我没有测试你的代码...
但是从这个论坛，我得出结论：Ext.require包含来自file system的脚本......
像
Ext.require([
'Ext.form.*',
'Ext.tree.*',
]);
它意味着包括src/form/和src/tree/ more info
你得到的错误是因为var newNode = Ext.create('Ext.tree.TreeNode',{
并且C:\xampp\htdocs\ext-4b3\src\tree（我的本地）中没有TreeNode.js。