加载一棵树：ExtJs - Jayrock

Question

我正在尝试构建一个树面板（或者只是一个简单的树，我只需要它来工作）并使用数据库中的数据加载它，

这是我使用 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();

： http://code.google.com/p/jayrock/

Interact.ashx.cs：

公共类 Interact：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
}

我没有任何错误，但面板是空的，我测试过，我可以读取 readtree 函数中的数据..所以我猜问题可能出在商店中或者加载

超过两次我努力完成这件事的几周 任何帮助将不胜感激

PS：我使用 ExtJs4 和 c# .net

谢谢

Answer 1

您还没有为商店提供用于获取数据的 url

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

我建议您查看 firebug 中的响应，看看返回的数据结构是否是有效的 JSON

EDIT
这就是我构建树的方式，假设 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'
        }
    })
});

Answer 2

我通过创建自己的类型（没有 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 };
}

希望它可以帮助别人