2011-05-10 44 views
0

即時試圖建立一個TreePanel中(或只是一個簡單的樹我只需要它的工作),並從數據庫負荷樹:ExtJS的 - Jayrock

這裏的數據加載它是我的代碼來構建樹

var objHandler = new Interact(); 

    var treestore = new Ext.data.TreeStore ({ 

    root:{ 
      id:'root_node', 
      nodeType:'async', 
      text:'Root'    
     }, 
    proxy:{    
      type:'ajax',    
      url:'myUrl' 
     } 


});  


    function ReadTree() { 
      try { 
       objHandler.ReadAssets(function (serverResponse) { 
        if (serverResponse.error == null) { 
         var result = serverResponse.result; 

         if (result.length > 2) { 
          treestore.load(Ext.decode(result));//TreeStore does not inherit from Ext.data.Store and thus does not have a loadData method. Both TreeStore and Store inherit from Ext.data.AbstractStore which defines a load method only. Therefore TreeStore has a load method 
          } 
        } 
        else { 
         alert(serverResponse.error.message); 
        } 
       }); //eo serverResponse 
      } //eo try 
      catch (e) { 
       alert(e.message); 
      } 
     } 




var AssetTree = Ext.create('Ext.tree.Panel', { 
    title: 'Asset Tree', 
    width: 200, 
    height: 150, 
    store: treestore, 
    // loader: new Ext.tree.TreeLoader({ url: 'myurl' }), 

    columns: [ 
       { xtype: 'treecolumn',text : 'First Name', dataIndex :'Title'}/*, 
       {text : 'Last', dataIndex :'Adress'}, 
       {text : 'Hired Month', dataIndex :'Description'}*/ 
      ], 
    autoscroll : true 

}); 

    ReadTree(); 

IM使用jayrock:http://code.google.com/p/jayrock/

Interact.ashx.cs:

公共類交互:JsonRpcHandler {

[JsonRpcMethod()] 
    public string ReadAssets() 
    { 
     // Make calls to DB or your custom assembly in project and return the result in JSON format. //This part is making custom assembly calls. 

     clsDBInteract objDBInteract = new clsDBInteract(); 
     string result; 
     try 
     { 
      result = objDBInteract.FetchAssetsJSON(); 
     } 
     catch (Exception ex) 
     { 
      throw ex; 
     } 
     return result; 

    } 

clsDBInteract.cs:

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Data; 
using System.Data.Sql; 
using System.Data.SqlClient; 
using Extensions; 

namespace WebBrowser 
{ 
    public class clsDBInteract 
    { 

     SqlConnection dbConn = new SqlConnection("server=***********; user id = *****; password = ******; Database=*******"); 

     /////// data to fill assets grid 
     public DataSet FetchAssetsDS() 
     { 
      DataSet ds = new DataSet(); 
      try 
       { 
       SqlCommand sqlCommand = new SqlCommand("select Title, adress, Description from table"); 
       sqlCommand.Connection = dbConn; 
       sqlCommand.CommandType = CommandType.Text; 
       SqlDataAdapter sda = new SqlDataAdapter(sqlCommand); 
       dbConn.Open(); 
       sda.Fill(ds); 
       if (sqlCommand.Connection.State == ConnectionState.Open) 
        { 
        dbConn.Close(); 
        } 
       //ds = sqlCommand.ExecuteNonQuery(); 
       } 
      catch (Exception ex) 
      { 
       throw ex; 
      } 
      return ds; 
     }//eo FetchAssetsDS 

     public string FetchAssetsJSON() 
     { 
      string result = string.Empty; 
      try 
       { 
       DataSet ds = FetchAssetsDS(); 
       result = ds.ToJSONString(); // This method will convert the contents on Dataset to JSON format; 
       } 
      catch (Exception ex) 
      { 
       throw ex; 
      } 
      return result; 
     }//eo FetchAssetsJSON 




    }//eo clsDBInteract 
} 

我沒有任何錯誤,但是面板是空的,我測試和function..so我想這個問題,我會可以在readtree讀取數據在可能的商店或裝載

其已經超過兩個星期我試着去拉這關 任何幫助,將不勝感激

PS:使用im ExtJs4用C#.NET

感謝

回答

0

我解決了這個創造我自己的類型(無jayrock)

我的樹模型和存儲:

Ext.define('TreeModel', { 
extend: 'Ext.data.Model', 
fields: [ 
     { name: 'text' }, 
     { name: 'id' }, 
     { name: 'descr' } 

    ] 
}); 

window.TreeStore = Ext.create('Ext.data.TreeStore', { 
model: 'TreeModel', 
root: Ext.decode(obj.TreeToJson()), 
proxy: { 
    type: 'ajax' 
}, 
sorters: [{ 
    property: 'leaf', 
    direction: 'ASC' 
}, { 
    property: 'text', 
    direction: 'ASC' 
}] 
}); 

我的課:

public class TreeItem 
{ 
    public string text { get; set; } 

    public int id { get; set; } 

    public string descr { get; set; } 

    public string expanded { get; set; } 

    public string leaf { get; set; } 

    public List<TreeItem> children { get; set; } 

} 

然後我得到我的數據並像這樣填滿我的樹

public string TreeToJson() 
    { 
List<TreeItem> child = new List<TreeItem>(); 
     for (int i = 0; i < n; i++) 
     { 
      child.Add(new TreeItem() { text = t.AssetTree()[i].Item1, id = t.AssetTree()[i].Item2, ip = t.AssetTree()[i].Item3, descr = t.AssetTree()[i].Item4, expanded = "false", leaf = "true" }); 
     } 

     TreeItem tree = new TreeItem() { text = "my root", id = 0, expanded = "true", leaf = "false", children = child }; 
} 

希望它可以幫助別人

+0

你可能會覺得這很有趣:http://dextop.codaxy。 COM /展示/ – Marko 2011-10-28 12:36:17

1

您還沒有給出該商店url

proxy: { 
     url:'myurl', 
     type: 'memory', 
     reader: { 
      type: 'json', 
      root: 'users' 
     } 
    } 

獲取數據,我建議看着螢火蟲的反應,看看數據結構被返回是有效的JSON

編輯 這是我將如何構建假設JSON是有效的樹創建對於樹(而不僅僅是有效的JSON)

Ext.create('Ext.tree.Panel', { 
    rootVisible:false,  
    store:Ext.create('Ext.data.TreeStore', {   
     root:{ 
      id:'root_node', 
      nodeType:'async', 
      text:'Root'    
     }, 
     proxy:{    
      type:'ajax',    
      url:'yourUrl' 
     } 
    }) 
}); 
+0

不要操心的類型,它僅僅是因爲我試圖用一個字段來進行測試,但它在我的代碼corect。 – Armance 2011-05-13 09:20:27

+0

我在螢火蟲驗證..數據是好的 – Armance 2011-05-13 10:15:16

+0

你能否請向我解釋如何將該網址添加到商店?謝謝 – Armance 2011-05-13 12:43:54