2011-05-31 28 views
0

TreePanel中加载数据我新的ExtJS的,我创建MVC应用程序。无法在extjs4

我想创建树面板如下。

以下是我的模型文件

Ext.define('rt.model.userinproject', { 
extend: 'Ext.data.Model', 

proxy: { 
    type: 'memory' 
}, 


fields: [ 
    { name: 'text', type: 'string'}, 
    { name: 'id', type: 'Number'} 

] 
}); 

以下是我的存储文件

Ext.define('rt.store.userinproject', { 
extend: 'Ext.data.TreeStore', 

model: 'rt.model.userinproject', 

root: { 
     text: 'Project 1', 
     id: 1, 
     expanded: true 
    }, 

folderSort: true, 

sorters: [{ 
     property: 'text', 
     direction: 'ASC' 
    }], 

data: [ 
     { 
      text: "Project 1", 
      id: 1, 
      expanded: true, 
      children: [ 
         { 
          text: "Department 1", 
          id: 1, 
          cls: "folder", 
          children:[ 
             { 
              text: "User 1", 
              id: 1, 
              leaf:true 
             }, 
             { 
              text: "User 2", 
              id: 2, 
              leaf:true 
             }, 
             { 
              text: "User 3", 
              id: 3, 
              leaf:true 
             }, 
             { 
              text: "User 4", 
              id: 4, 
              leaf:true 
             }, 
             { 
              text: "User 5", 
              id: 5, 
              leaf:true 
             } 
            ] 

         }, 
         { 
          text: "Department 2", 
          id: 2, 
          cls: "folder", 
          children:[ 
             { 
              text: "User 6", 
              id: 6, 
              leaf:true 
             }, 
             { 
              text: "User 7", 
              id: 7, 
              leaf:true 
             }, 
             { 
              text: "User 8", 
              id: 8, 
              leaf:true 
             }, 
             { 
              text: "User 9", 
              id: 9, 
              leaf:true 
             }, 
             { 
              text: "User 10", 
              id: 10, 
              leaf:true 
             } 
            ] 


         }, 
         { 
          text: "Department 3", 
          id: 2, 
          cls:"folder", 
          children:[ 
             { 
              text: "User 11", 
              id: 11, 
              leaf:true 
             }, 
             { 
              text: "User 12", 
              id: 12, 
              leaf:true 
             }, 
             { 
              text: "User 13", 
              id: 13, 
              leaf:true 
             }, 
             { 
              text: "User 14", 
              id: 14, 
              leaf:true 
             }, 
             { 
              text: "User 15", 
              id: 15, 
              leaf:true 
             } 
            ] 
         } 

        ] 
     }, 
     { 
      text: "Project 2", 
      id: 1, 
      expanded: true, 
      children: [ 
         { 
          text: "Department 1", 
          id: 1, 
          cls: "folder", 
          children:[ 
             { 
              text: "User 1", 
              id: 1, 
              leaf:true 
             }, 
             { 
              text: "User 2", 
              id: 2, 
              leaf:true 
             }, 
             { 
              text: "User 3", 
              id: 3, 
              leaf:true 
             }, 
             { 
              text: "User 4", 
              id: 4, 
              leaf:true 
             }, 
             { 
              text: "User 5", 
              id: 5, 
              leaf:true 
             } 
            ] 

         }, 
         { 
          text: "Department 2", 
          id: 2, 
          cls: "folder", 
          children:[ 
             { 
              text: "User 16", 
              id: 16, 
              leaf:true 
             }, 
             { 
              text: "User 17", 
              id: 17, 
              leaf:true 
             }, 
             { 
              text: "User 18", 
              id: 18, 
              leaf:true 
             }, 
             { 
              text: "User 19", 
              id: 19, 
              leaf:true 
             }, 
             { 
              text: "User 20", 
              id: 20, 
              leaf:true 
             } 
            ] 


         }, 
         { 
          text: "Department 3", 
          id: 2, 
          cls:"folder", 
          children:[ 
             { 
              text: "User 21", 
              id: 21, 
              leaf:true 
             }, 
             { 
              text: "User 22", 
              id: 22, 
              leaf:true 
             }, 
             { 
              text: "User 23", 
              id: 23, 
              leaf:true 
             }, 
             { 
              text: "User 24", 
              id: 24, 
              leaf:true 
             }, 
             { 
              text: "User 25", 
              id: 25, 
              leaf:true 
             } 
            ] 
         } 

        ] 
     } 
    ] 
}); 

以下是我的视图文件

Ext.define('rt.view.project.projectuser', { 
extend: 'Ext.tree.Panel', 
alias: 'widget.projectuser', 

disabled: true, 
border: false, 
cls: 'projectuser', 
autoScroll: true, 

initComponent: function() { 
    Ext.apply(this, { 
     store: this.store, 

     items: { 
     title: 'User in project', 
     } 
    }); 

    this.callParent(arguments); 
}, 


}); 

当我运行的代码,树面板似乎空没有树。

我想要做的是,我想基于存储项目ID上面

让我知道如果你需要从我的任何其他信息秀树。

谁能帮我关于此事。

在此先感谢。

+0

你有什么错误吗?看看这个:http://stackoverflow.com/q/5933874/185655它应该帮助你。 – 2011-05-31 11:28:02

+0

hello Abdel,我也检查了代码,但目前我没有收到任何错误..我错误的'me.store.getRootNode不是一个函数',我从该线程解决。目前我没有错误。无论我在做什么,事实上都没有改变。我也尝试使用extjs示例中给出的ajax代理。但它也加载空树。你还有其他建议吗?感谢 – amar4kintu 2011-05-31 11:46:35

+0

但我没有看到你重新分配存储到'initComponent'方法树(在上面的代码) – 2011-05-31 12:03:38

回答

2

我能够通过更换在我看来,文件

store: this.store, 

如下以下行来解决上述问题,

store: Ext.data.StoreManager.lookup('userinproject'), 

希望这会帮助别人。

谢谢。