2011-04-19 65 views
1

我想插入一个新的节点到我的树中。 我发展与煎茶库版本4. 树节点似乎不工作... Firebug的错误:如何在ExtJS4的TreePanel中插入新节点?

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'); 


}); 

回答

2

不知道有错误,因为我没有测试你的代码...

但是从这个论坛上,我得到的结论是Ext.require包括来自file system脚本... 像

Ext.require([ 
    'Ext.form.*', 
    'Ext.tree.*', 
]); 

这意味着包括src/form/src/tree/所有的JS

你得到的错误是因为​​
并没有在C:\xampp\htdocs\ext-4b3\src\tree(我的地方)一个TreeNode.js。

+0

对不起,只是可以告诉你为什么...我仍然在学习数据模型在ext4 .. – 2011-04-19 17:08:07

8

我假设这是最初的3.x代码,你转换到4.0? TreeNode类不再存在于4.0中。相反,您会创建一个标准Model实例并将其附加到您的树中。在4.0中,树的模型(3.x中的记录)使用新的NodeInterface类进行“装饰”,这意味着您的模型对象在树中使用时也将具有节点API。即,不需要与模型本身分开的TreeNode对象。

7

您好我喝了在doc类似的问题,并寻找发现:

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(); 
    } 
}); 

我可以看到它的easer。 NodeInterface有其他更有用的方法:)

+0

+1好信息。帮了我很多! – 2012-08-22 23:35:26