2011-05-31 59 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'), 

希望這會幫助別人。

謝謝。