Results 1 to 2 of 2

Thread: Empty column, something I can't get with Ext.data.TreeStore and/or Ext.tree.Panel

  1. #1
    Sencha User
    Join Date
    Jul 2011
    Posts
    29

    Default Empty column, something I can't get with Ext.data.TreeStore and/or Ext.tree.Panel

    almost SOLVED: see bigger size, red line of code below.
    It seems I need to declare what I wish as Ext.data.TreeStore's fields
    --------------------------------------------------------------------------------------------

    Hello

    please give a look at the following code:

    Code:
    Ext.onReady(function() {
    
    Ext.define("User", {
        extend: 'Ext.data.Model',
        fields: ['id', 'name', 'info'],
    
        hasMany: {model: 'Order', name: 'orders'},
    
        proxy: {
            type: 'ajax',  
            url : 'my.json',  
            reader: {
                type: 'json',
                root: 'users'
            }
        }
    });
    
    Ext.define("Order", {
        extend: 'Ext.data.Model',
        fields: ['id', 'name', 'info'],
    
        hasMany  : {model: 'OrderItem', name: 'orderItems', associationKey: 'orderItems'},
        belongsTo: 'User'
    });
    
    Ext.define("OrderItem", {
        extend: 'Ext.data.Model',
        fields: [
            'id', 'price', 'name', 'info', 'quantity', 'order_id', 'product_id'
        ],
    
        belongsTo: ['Order', {model: 'Product', associationKey: 'product'}]
    });
    
    Ext.define("Product", {
        extend: 'Ext.data.Model',
        fields: [
            'id', 'name', 'info'
        ],
    
        hasMany: 'OrderItem'
    });
    
        var store = new Ext.data.Store({
            model: 'User',
            autoLoad: true,
            listeners: {
                load: function (store, users)
                {
                    var data = buildTreeData(store)
                    var store = Ext.create('Ext.data.TreeStore', {
                        root: {
                            text: 'you welcome!',
                            expanded: true,
                            children: data
                        },
                    fields: ['id', 'text', 'info']
                    });
                    
                       var tree = Ext.create('Ext.tree.Panel', {
            store: store, 
        //displayField: 'text',  
            columns: [{
            xtype: 'treecolumn',
            text: 'name',
            dataIndex: 'text',
            width: 150,
            sortable: true
        },{ text: 'info',
            dataIndex: 'info', // no way to display into the panel, column is empty
        width: 150,
            flex: 1,
            sortable: true
        }, {
            text: 'id',
            dataIndex: 'id',
            flex: 1,
            width: 15,
            sortable: true
        }],
            //displayField: 'title',
            collapsible: true,
            viewConfig: {
                plugins: {
            ptype: 'treeviewdragdrop',  // see Ext.tree.plugin.TreeViewDragDrop
            nodeHighlightColor : '7B68EE',
            nodeHighlightOnDrop : true,  
            nodeHighlightOnRepair: true,  
            enableDrag: true,  
            enableDrop: true
                }
           },
            renderTo: 'tree-div',
            height: 300,
            width: 900,
            title: 'my table',
            useArrows: true,
            dockedItems: [{
                xtype: 'toolbar',
                items: [{
                    text: 'Expand All',
                    handler: function(){
                        tree.expandAll();
                    }
                }, {
                    text: 'Collapse All',
                    handler: function(){
                        tree.collapseAll();
                    }
                }]
            }]
        });
                }
            }
        });
    
        function buildTreeData (store)
        {
            var data = [], 
                node;
    
            store.each(function (project) {
                node = {
                    id: project.get('id'),
                    cls: 'root',
                    iconCls: 'rootIcon',
                    text: project.get('name'),
                    info: project.get('info'), // no way to pass to the panel
                    expanded: true
                };
                node.children = [];
                project.orders().each(function (levelB) {
                nodeB = {
                            id: levelB.get('id'),
                            info: levelB.get('info'), // no way to pass to the panel
                            text: levelB.get('name'),
                            expanded: true
                        };
                nodeB.children = [];
                
                levelB.orderItems().each(function (levelC) {
                nodeC = {
                            id: levelC.get('id'),
                            info: levelC.get('info'), // no way to pass to the panel
                            cls: 'leaf',
                            iconCls: 'leafIcon',
                            leaf: true,
                            text: levelC.get('name'),
                            expanded: true
                        };
                nodeB.children.push(nodeC);
            });
                node.children.push(nodeB);
            });
                data.push(node);
            });
            return data;
        }
    });

    and my.json:

    Code:
    {
        "users": [
            {
                "id": 1,
                "name": "Jon",
                "info": "hello 1",
                "orders": []
        },
        {      "id": 2,
                "name": "Jack",
                "info": "hello 2",
                "orders": [{
                        "id": 21,
                        "total": 100,
                        "info": "hello 21",
                        "name": "Joe 21",
                            "orderItems": [{
                                "id"      : 2101,
                                "price"   : 40,
                                 "info": "hello 2101",
                                 "name" : "Joe 211"
                            }]
                        }]
        }
        ]
    }
    I am not able to understand how to pass 'info' values to the panel. 'id' and 'name' values ara shown without problems.
    If I use text: node.get('info'), 'info' value are shown under the name column.

    Clearly, I miss something on how things are defined, but I have no idea on what to look for.

    help is very appreciate
    Thanks
    mario

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379

    Default

    You know the 'info' has a value in it in the node?
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

Posting Permissions

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