2011-05-10 50 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