ツリーに新しいノードを挿入したいと思います。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');
});