加载树：ExtJs-Jayrock

Question

im trying to build a treepanel (or just a simple tree i just need it to work) and load it with data from database

here is my code to build the tree

  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 using jayrock : http://code.google.com/p/jayrock/

Interact.ashx.cs :

public class 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
}

I dont have any error, but the panel is empty, i tested and i can read the data in the readtree function..so i guess the problem would be in the store maybe or the loading

its been more than two weeks that im trying to pull this off any help would be appreciated

PS: im using ExtJs4 with c# .net

thanks

Answer 1

You havent given a url for the store to get the data from

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

I would recommend looking at the response in firebug to see if the data structure being returned is valid JSON

EDIT This is how I would build the create the Tree assuming the JSON is valid for a tree (not just valid 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

i solved this by creating my own type (no jayrock)

my tree model and store:

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'
}]
});

my class:

   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; }

}

then i get my data and fill my tree like this

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 };
}

hope it helps someone