Results 1 to 10 of 10

Thread: How to load data for TreeGrid locally?

  1. #1

    Exclamation How to load data for TreeGrid locally?

    hi, is that possible to load data for TreeGrid locally? I checked almost all examples about TreeGrid, which requests data always through dataUrl. What I'm trying to do is to generate the JSON data for TreeGrid on my own, then pass it to TreeGrid directly, WITHOUT sending a request.

    It seems that the processDirectResponse of TreeLoader might be useful to achieve this goal, but I'm not family with the parameters, can anybody help me out?

    Any tips and suggestion is appreciated!

  2. #2
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    Configure the TreeLoader with preloadChildren:true and have your 'root' contain a 'children' array of nodes.

  3. #3

    Default

    It seems the preloadChild property only works to load all nodes at once. Can following codes work?

    var tree = new Ext.ux.tree.TreeGrid({
    columns:[{header: 'task',dataIndex: 'task',width: 230},
    {header: 'duration',dataIndex: 'duration',width: 230}]
    root: [{name:'a',iconCls:'task-folder',expanded: true,children:[
    {name:'child of a',iconCls:'task',leaf:true},
    {name:'another child of a',iconCls:'task',leaf:true}]
    ]}]
    });


    or can anybody give a little detailed code for doing this? Thanks a lot

  4. #4
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    It does if you configure the loader with clearOnLoad:false.

  5. #5

    Default

    but I got problem by running following code:

    var tree = new Ext.ux.tree.TreeGrid({
    title: 'Core Team Projects',
    region : 'center',
    enableDD: true,

    columns:[{
    header: 'Task',
    dataIndex: 'task',
    width: 230
    },{
    header: 'Duration',
    width: 100,
    dataIndex: 'duration'
    },{
    header: 'Assigned To',
    width: 150,
    dataIndex: 'user'
    }],
    root: {
    nodeType: 'async',
    attributes : [{task:'Project1',duration:13.25,user:'Tommy Maintz',expanded: true,children:[{task:'child1',duration:1.25,user:'Tommy Maintz',leaf:true},{task:'child2',duration:1.25,user:'Tommy Maintz',leaf:true}]},{task:'Project2',duration:13.25,user:'Tommy Maintz',expanded: true,children:[{task:'child21',duration:1.25,user:'Tommy Maintz',children:[{task:'child211',duration:1.25,user:'Tommy Maintz',leaf:true}]}]}]
    },
    loader: new Ext.ux.tree.TreeGridLoader({
    clearOnLoad : true
    ,preloadChilren: true
    })
    });

  6. #6
    Sencha User fay's Avatar
    Join Date
    Apr 2007
    Location
    Ireland
    Posts
    1,750

    Default

    You've mis-spelt Children:

    Code:
     
    preloadChilren: true

  7. #7

    Default

    ok, I got it works finally with following configuration, but still not perfect as an additional root node lies on the top of all (see the detached image), why?

    var tree = new Ext.ux.tree.TreeGrid({
    title: 'Core Team Projects',
    region : 'center',
    enableDD: true,

    columns:[{
    header: 'Task',
    dataIndex: 'task',
    width: 230
    },{
    header: 'Duration',
    width: 100,
    dataIndex: 'duration'
    },{
    header: 'Assigned To',
    width: 150,
    dataIndex: 'user'
    }],
    root: {
    nodeType: 'async',
    attributes : [],
    children:[{task:'Project1',duration:13.25,user:'Tommy Maintz',expanded: true,children:[{task:'child1',duration:1.25,user:'Tommy Maintz',leaf:true},{task:'child2',duration:1.25,user:'Tommy Maintz',leaf:true}]},{task:'Project2',duration:13.25,user:'Tommy Maintz',expanded: true,children:[{task:'child21',duration:1.25,user:'Tommy Maintz',children:[{task:'child211',duration:1.25,user:'Tommy Maintz',leaf:true}]}]}]
    },
    loader: new Ext.ux.tree.TreeGridLoader({
    clearOnLoad : true
    ,preloadChildren: true
    })
    });

    treegrid.JPG

  8. #8

    Default

    Ok, with following code I got a satisfied result , thanks for tipps!

    var tree = new Ext.ux.tree.TreeGrid({
    title: 'Core Team Projects',
    region : 'center',
    enableDD: true,

    columns:[{
    header: 'Task',
    dataIndex: 'task',
    width: 230
    },{
    header: 'Duration',
    width: 100,
    dataIndex: 'duration'
    },{
    header: 'Assigned To',
    width: 150,
    dataIndex: 'user'
    }],
    root: {
    nodeType: 'async',
    task: 'root',
    duration:111,
    user:'thomas mueller',
    expanded:true,
    attributes : [],
    children:[{task:'Project1',duration:13.25,user:'Tommy Maintz',expanded: true,children:[{task:'child1',duration:1.25,user:'Tommy Maintz',leaf:true},{task:'child2',duration:1.25,user:'Tommy Maintz',leaf:true}]},{task:'Project2',duration:13.25,user:'Tommy Maintz',expanded: true,children:[{task:'child21',duration:1.25,user:'Tommy Maintz',children:[{task:'child211',duration:1.25,user:'Tommy Maintz',leaf:true}]}]}]
    },
    rootVisible:true,
    loader: new Ext.ux.tree.TreeGridLoader({
    clearOnLoad : true
    ,preloadChildren: true
    })
    });

  9. #9
    Sencha Premium Member
    Join Date
    Jun 2010
    Posts
    305

    Default

    Hey can anyone help me on Ext.ux.tree.TreeGrid

    In my code data is no loading in grid

    here is my JS code
    Code:
    MS.ImpactSisterApp.FinancialProjectionsPanel = Ext.extend(Ext.Panel, {
        store: null,
        grid2:null,
        initComponent: function() { 
            debugger
            Ext.QuickTips.init();       
            this.store = new Ext.data.Store({            
                data:[],
                reader: new Ext.data.JsonReader({
                    fields: [
                        { name: 'id', mapping: 'id', type: 'int' }, 
                        { name: 'name', mapping: 'name' }, 
                        { name: 'Sync', mapping: 'Sync', type: 'date' }, 
                        { name: 'validate', mapping: 'validate' }, 
                        { name: 'version', mapping: 'version' }, 
                        { name: 'model_status', mapping: 'model_status' }, 
                        { name: 'ev_status', mapping: 'ev_status' }, 
                        { name: 'val_comm', mapping: 'val_comm' }, 
                        { name: 'updated_by', mapping: 'updated_by' }, 
                        { name: 'updated_on', mapping: 'updated_on', type: 'date' }]
                })
            });
            grid2 = new Ext.ux.tree.TreeGrid({
                enableDD: true,
                id : 'grid1',            
                store: this.store,
                master_column_id : 'name',
                columns: [
                        { header: 'Id', dataIndex: 'id', hidden:true }, 
                        { header: 'Fund/Region/Investment/Model', id: 'name', dataIndex: 'name', width: 250, minWidth: 250 }, 
                        { header: 'Sync Status', dataIndex: 'Sync', width: 100, minWidth: 100 },
                        { header: 'Validation', dataIndex: 'validate', width: 100, minWidth: 100 },
                        { header: 'Version', dataIndex: 'version', width: 100, minWidth: 100 },
                        { header: 'Model Status', dataIndex: 'model_status', width: 200, minWidth: 200, align: 'center' },
                        { header: 'EV Carry Value Status', dataIndex: 'ev_status', width: 200, minWidth: 200, align: 'center' },
                        { header: 'Val Comm Control', dataIndex: 'val_comm',width: 200, minWidth: 200, align: 'center' },
                        { header: 'Last Updated By', dataIndex: 'updated_by', width: 100, minWidth: 100 },
                        { header: 'Last Updated On', dataIndex: 'updated_on', width: 100, minWidth: 100 }
                    ],
                    stripeRows: true,
                    iconCls:'icon-grid',                           
                    height: 510,
                    frame:true,
                    rootVisible:true,
                    loader: new Ext.ux.tree.TreeGridLoader({
                        clearOnLoad : true
                        ,preloadChildren: true
                    }) 
                    /*, 
                    plugins: [                
                        new Ext.ux.grid.ColumnHeaderGroup({
                            rows: [
                                [{
                                    colspan:5
                                },
                                {
                                    header: 'Asset Management Review',
                                    align: 'center'                                
                                },
                                {
                                    header: 'Investment Control Review',
                                    align: 'center'
                                },
                                {
                                    header: 'GPG',
                                    align: 'center'
                                },{
                                    colspan:2
                                }]
                            ]
                        })
                    ]*/
            });
    
            var config = {
                frame: true,
                timeout: 60000,
                hideBorders: true,
                header: false,
                layout: 'table',
                title: "Workflow dashboard",
                items:[ grid2 ],
                closable: true
            };        
            Ext.apply(this, Ext.apply(this.initialConfig, config));
            MS.ImpactSisterApp.FinancialProjectionsPanel.superclass.initComponent.apply(this, arguments);
            //debugger
            this.store.loadData(this.FundDetails);
            //this.refreshInvestmentAssetModelsPanel(this);
        },
        refreshInvestmentAssetModelsPanel: function() {  
            try{
                this.store.removeAll();
            }catch(ex){
            }
            this.store.loadData(this.FundDetails);        
        },
        onDestroy: function() {
            
        }
    });
    here is my JSON

    Code:
    {success:true, data: {FundDetails:[{
                        id : 99999,
                        name : 'Collapse All/Expand All',
                        Sync : '',
                        validate : '',
                        version : '',
                        model_status : '',
                        ev_status : '',
                        val_comm : '',
                        updated_by : '',
                        leaf : true,
                        updated_on : ''
                        },
                        {
                        name:'MSREF I',
                        Sync : '',
                        validate : '',
                        version : '',
                        model_status : '',
                        ev_status : '',
                        val_comm : '',
                        updated_by:'',
                        updated_on : '',
                        iconCls:'task-folder',
                        expanded: true,
                        children:[{
                            name : 'America',
                            Sync : '',
                            validate : '',
                            version : '',
                            model_status : '',
                            ev_status : '',
                            val_comm : '',
                            updated_by:'',
                            updated_on : '',
                            iconCls:'task-folder',
                            children:[{
                                name : 'Investment1',
                                Sync : '',
                                validate : '',
                                version : '',
                                model_status : '',
                                ev_status : '',
                                val_comm : '',
                                updated_by : '',
                                updated_on : '',
                                iconCls:'task-folder',
                                children:[{
                                    name : 'Model1',
                                    Sync : '\/Date(1254283200000-0400)\/',
                                    validate : 'Ok',
                                    version : 'Management',
                                    model_status : 'pending',
                                    ev_status : 'pending',
                                    val_comm : 'checked',
                                    updated_by : 'samandee',
                                    updated_on : '\/Date(1254283200000-0400)\/',
                                    leaf:true,
                                    iconCls:'task'
                                },{
                                    name : 'Model2',
                                    Sync : '\/Date(1254283200000-0400)\/',
                                    validate : 'Ok',
                                    version : 'Management',
                                    model_status : 'pending',
                                    ev_status : 'pending',
                                    val_comm : 'checked',
                                    updated_by : 'samandee',
                                    updated_on : '\/Date(1254283200000-0400)\/',
                                    leaf:true,
                                    iconCls:'task'
                                },{
                                    name : 'Model3',
                                    Sync : '\/Date(1254283200000-0400)\/',
                                    validate : 'Ok',
                                    version : 'Management',
                                    model_status : 'pending',
                                    ev_status : 'pending',
                                    val_comm : 'checked',
                                    updated_by : 'samandee',
                                    updated_on : '\/Date(1254283200000-0400)\/',
                                    leaf:true,
                                    iconCls:'task'
                                },{
                                    name : 'Model4',
                                    Sync : '\/Date(1254283200000-0400)\/',
                                    validate : 'Ok',
                                    version : 'Management',
                                    model_status : 'pending',
                                    ev_status : 'pending',
                                    val_comm : 'checked',
                                    updated_by : 'samandee',
                                    updated_on : '\/Date(1254283200000-0400)\/',
                                    leaf: true,
                                    iconCls: 'task'
                                }]
                            },{
                                name : 'Investment2',
                                Sync : '',
                                validate : '',
                                version : '',
                                model_status : '',
                                ev_status : '',
                                val_comm : '',
                                updated_by : '',
                                updated_on : '',
                                leaf:true,
                                iconCls:'task'
                            },{
                                name : 'Investment3',
                                Sync : '',
                                validate : '',
                                version : '',
                                model_status : '',
                                ev_status : '',
                                val_comm : '',
                                updated_by : '',
                                updated_on : '',
                                leaf:true,
                                iconCls:'task'
                            },{
                                name : 'Investment4',
                                Sync : '',
                                validate : '',
                                version : '',
                                model_status : '',
                                ev_status : '',
                                val_comm : '',
                                updated_by : '',
                                updated_on : '',
                                leaf: true,
                                iconCls: 'task'
                            }]
                        }, {
                            name : 'Asia',
                            Sync : '',
                            validate : '',
                            version : '',
                            model_status : '',
                            ev_status : '',
                            val_comm : '',
                            updated_by:'',
                            updated_on : '',
                            iconCls:'task-folder',
                            children:[{
                                name : 'Investment1',
                                Sync : '',
                                validate : '',
                                version : '',
                                model_status : '',
                                ev_status : '',
                                val_comm : '',
                                updated_by : '',
                                updated_on : '',
                                iconCls:'task-folder',
                                children:[{
                                    name : 'Model1',
                                    Sync : '\/Date(1254283200000-0400)\/',
                                    validate : 'Ok',
                                    version : 'Management',
                                    model_status : 'pending',
                                    ev_status : 'pending',
                                    val_comm : 'checked',
                                    updated_by : 'samandee',
                                    updated_on : '\/Date(1254283200000-0400)\/',
                                    leaf:true,
                                    iconCls:'task'
                                },{
                                    name : 'Model2',
                                    Sync : '\/Date(1254283200000-0400)\/',
                                    validate : 'Ok',
                                    version : 'Management',
                                    model_status : 'pending',
                                    ev_status : 'pending',
                                    val_comm : 'checked',
                                    updated_by : 'samandee',
                                    updated_on : '\/Date(1254283200000-0400)\/',
                                    leaf:true,
                                    iconCls:'task'
                                },{
                                    name : 'Model3',
                                    Sync : '\/Date(1254283200000-0400)\/',
                                    validate : 'Ok',
                                    version : 'Management',
                                    model_status : 'pending',
                                    ev_status : 'pending',
                                    val_comm : 'checked',
                                    updated_by : 'samandee',
                                    updated_on : '\/Date(1254283200000-0400)\/',
                                    leaf:true,
                                    iconCls:'task'
                                },{
                                    name : 'Model4',
                                    Sync : '\/Date(1254283200000-0400)\/',
                                    validate : 'Ok',
                                    version : 'Management',
                                    model_status : 'pending',
                                    ev_status : 'pending',
                                    val_comm : 'checked',
                                    updated_by : 'samandee',
                                    updated_on : '\/Date(1254283200000-0400)\/',
                                    leaf: true,
                                    iconCls: 'task'
                                }]
                            },{
                                name : 'Investment2',
                                Sync : '',
                                validate : '',
                                version : '',
                                model_status : '',
                                ev_status : '',
                                val_comm : '',
                                updated_by : '',
                                updated_on : '',
                                leaf:true,
                                iconCls:'task'
                            },{
                                name : 'Investment3',
                                Sync : '',
                                validate : '',
                                version : '',
                                model_status : '',
                                ev_status : '',
                                val_comm : '',
                                updated_by : '',
                                updated_on : '',
                                leaf:true,
                                iconCls:'task'
                            },{
                                name : 'Investment4',
                                Sync : '',
                                validate : '',
                                version : '',
                                model_status : '',
                                ev_status : '',
                                val_comm : '',
                                updated_by : '',
                                updated_on : '',
                                leaf: true,
                                iconCls: 'task'
                            }]
                        }]
                    },{
                        name:'MSREF II',
                        Sync : '',
                        validate : '',
                        version : '',
                        model_status : '',
                        ev_status : '',
                        val_comm : '',
                        updated_by:'',
                        updated_on : '',
                        iconCls:'task-folder',
                        expanded: true,
                        children:[{
                            name : 'America',
                            Sync : '',
                            validate : '',
                            version : '',
                            model_status : '',
                            ev_status : '',
                            val_comm : '',
                            updated_by:'',
                            updated_on : '',
                            iconCls:'task-folder',
                            children:[{
                                name : 'Investment1',
                                Sync : '',
                                validate : '',
                                version : '',
                                model_status : '',
                                ev_status : '',
                                val_comm : '',
                                updated_by : '',
                                updated_on : '',
                                iconCls:'task-folder',
                                children:[{
                                    name : 'Model1',
                                    Sync : '\/Date(1254283200000-0400)\/',
                                    validate : 'Ok',
                                    version : 'Management',
                                    model_status : 'pending',
                                    ev_status : 'pending',
                                    val_comm : 'checked',
                                    updated_by : 'samandee',
                                    updated_on : '\/Date(1254283200000-0400)\/',
                                    leaf:true,
                                    iconCls:'task'
                                },{
                                    name : 'Model2',
                                    Sync : '\/Date(1254283200000-0400)\/',
                                    validate : 'Ok',
                                    version : 'Management',
                                    model_status : 'pending',
                                    ev_status : 'pending',
                                    val_comm : 'checked',
                                    updated_by : 'samandee',
                                    updated_on : '\/Date(1254283200000-0400)\/',
                                    leaf:true,
                                    iconCls:'task'
                                },{
                                    name : 'Model3',
                                    Sync : '\/Date(1254283200000-0400)\/',
                                    validate : 'Ok',
                                    version : 'Management',
                                    model_status : 'pending',
                                    ev_status : 'pending',
                                    val_comm : 'checked',
                                    updated_by : 'samandee',
                                    updated_on : '\/Date(1254283200000-0400)\/',
                                    leaf:true,
                                    iconCls:'task'
                                },{
                                    name : 'Model4',
                                    Sync : '\/Date(1254283200000-0400)\/',
                                    validate : 'Ok',
                                    version : 'Management',
                                    model_status : 'pending',
                                    ev_status : 'pending',
                                    val_comm : 'checked',
                                    updated_by : 'samandee',
                                    updated_on : '\/Date(1254283200000-0400)\/',
                                    leaf: true,
                                    iconCls: 'task'
                                }]
                            },{
                                name : 'Investment2',
                                Sync : '',
                                validate : '',
                                version : '',
                                model_status : '',
                                ev_status : '',
                                val_comm : '',
                                updated_by : '',
                                updated_on : '',
                                leaf:true,
                                iconCls:'task'
                            },{
                                name : 'Investment3',
                                Sync : '',
                                validate : '',
                                version : '',
                                model_status : '',
                                ev_status : '',
                                val_comm : '',
                                updated_by : '',
                                updated_on : '',
                                leaf:true,
                                iconCls:'task'
                            },{
                                name : 'Investment4',
                                Sync : '',
                                validate : '',
                                version : '',
                                model_status : '',
                                ev_status : '',
                                val_comm : '',
                                updated_by : '',
                                updated_on : '',
                                leaf: true,
                                iconCls: 'task'
                            }]
                        }, {
                            name : 'Asia',
                            Sync : '',
                            validate : '',
                            version : '',
                            model_status : '',
                            ev_status : '',
                            val_comm : '',
                            updated_by:'',
                            updated_on : '',
                            iconCls:'task-folder',
                            children:[{
                                name : 'Investment1',
                                Sync : '',
                                validate : '',
                                version : '',
                                model_status : '',
                                ev_status : '',
                                val_comm : '',
                                updated_by : '',
                                updated_on : '',
                                iconCls:'task-folder',
                                children:[{
                                    name : 'Model1',
                                    Sync : '\/Date(1254283200000-0400)\/',
                                    validate : 'Ok',
                                    version : 'Management',
                                    model_status : 'pending',
                                    ev_status : 'pending',
                                    val_comm : 'checked',
                                    updated_by : 'samandee',
                                    updated_on : '\/Date(1254283200000-0400)\/',
                                    leaf:true,
                                    iconCls:'task'
                                },{
                                    name : 'Model2',
                                    Sync : '\/Date(1254283200000-0400)\/',
                                    validate : 'Ok',
                                    version : 'Management',
                                    model_status : 'pending',
                                    ev_status : 'pending',
                                    val_comm : 'checked',
                                    updated_by : 'samandee',
                                    updated_on : '\/Date(1254283200000-0400)\/',
                                    leaf:true,
                                    iconCls:'task'
                                },{
                                    name : 'Model3',
                                    Sync : '\/Date(1254283200000-0400)\/',
                                    validate : 'Ok',
                                    version : 'Management',
                                    model_status : 'pending',
                                    ev_status : 'pending',
                                    val_comm : 'checked',
                                    updated_by : 'samandee',
                                    updated_on : '\/Date(1254283200000-0400)\/',
                                    leaf:true,
                                    iconCls:'task'
                                },{
                                    name : 'Model4',
                                    Sync : '\/Date(1254283200000-0400)\/',
                                    validate : 'Ok',
                                    version : 'Management',
                                    model_status : 'pending',
                                    ev_status : 'pending',
                                    val_comm : 'checked',
                                    updated_by : 'samandee',
                                    updated_on : '\/Date(1254283200000-0400)\/',
                                    leaf: true,
                                    iconCls: 'task'
                                }]
                            },{
                                name : 'Investment2',
                                Sync : '',
                                validate : '',
                                version : '',
                                model_status : '',
                                ev_status : '',
                                val_comm : '',
                                updated_by : '',
                                updated_on : '',
                                leaf:true,
                                iconCls:'task'
                            },{
                                name : 'Investment3',
                                Sync : '',
                                validate : '',
                                version : '',
                                model_status : '',
                                ev_status : '',
                                val_comm : '',
                                updated_by : '',
                                updated_on : '',
                                leaf:true,
                                iconCls:'task'
                            },{
                                name : 'Investment4',
                                Sync : '',
                                validate : '',
                                version : '',
                                model_status : '',
                                ev_status : '',
                                val_comm : '',
                                updated_by : '',
                                updated_on : '',
                                leaf: true,
                                iconCls: 'task'
                            }]
                        }]
                    }]
                }
        }

  10. #10

    Default extending Ext.ux.tree.TreeGrid

    Hi, can any one tell me can I extend the Ext.ux.tree.TreeGrid ? If I extend the TreeGrid and try to load root from AsyncTreeNode its not showing the data. It works if I create the new object on Ext.ux.tree.TreeGrid.

Similar Threads

  1. How to load JSON object into GridPanel locally?
    By heikan in forum Ext 2.x: Help & Discussion
    Replies: 8
    Last Post: 11 Aug 2014, 3:53 AM
  2. Have Form Submit Save Data Locally?
    By thatryan in forum Sencha Touch 1.x: Discussion
    Replies: 1
    Last Post: 21 Jan 2011, 4:25 AM
  3. PivotGrid's Axis Data Doesn't Show when feed data locally
    By mishramohar in forum Community Discussion
    Replies: 0
    Last Post: 30 Oct 2010, 7:01 AM
  4. [SOLVED] Is is possible to load the formvalues locally (not remote)
    By skaue in forum Ext 2.x: Help & Discussion
    Replies: 10
    Last Post: 19 Oct 2008, 10:01 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •