extjs 4 - 无法展开动态生成的树

时间:2014-08-23 02:23:09

标签: extjs4 extjs4.2

我需要创建一个具有未知数量的列和数据的树网格,这些数据会在单击按钮时呈现。我有相同的代码。

//Model
Ext.define('SM.model.DynamicTreeModel', {
    extend: 'Ext.data.Model'
});

//Store
Ext.define('SM.store.DynamicTreeStore',{
    extend:'Ext.data.TreeStore',
    model:'SM.DynamicTreeModel',
    root: {
        expanded: true
    },  
    proxy: {
        type: 'ajax',
        url: 'TGData1.json',
        reader: {
             type: 'json',
            root: 'children'
        }
    },
    autoLoad: true
});

Ext.define('SM.view.compareScenario.DynamicTree', {
    extend: 'Ext.tree.Panel',
    alias: 'widget.DynamicTree',
    frame: true,
    columnLines: true,
    autoLoad: false,
    initComponent: function(){
        var config = {
            columns: [],
            rowNumberer: false
        };
        Ext.apply(this, config);
        Ext.apply(this.initialConfig, config);
        this.callParent(arguments);
    },
    storeLoad: function(){
        var columns = [];  
        Ext.each(this.store.proxy.reader.jsonData.columns, function(column){
            columns.push(column);
        });

        this.reconfigure(this.store, columns);
        this.store.getRootNode(this.store.getRootNode);
    },
    onRender: function(ct, position){
        SM.view.compareScenario.DynamicTree.superclass.onRender.call(this, ct, position);
        this.store.load({
            scope: this,
            callback: function(records, operation, success) {
                this.storeLoad();
            }
        });
    }
});


var influencesTree = {
            xtype: 'DynamicTree',
            id: 'influencesTree',
            pading: '5',
            region: 'south',
            height: '70%',
            collapsible: true,
            rootVisible: false,
            store: 'DynamicTreeStore'
        };

The json file is as follows:
{   
    "metaData": {
        "fields": [
            {"name":"0", "type":"string"},
            {"name":"1", "type":"string"},
            {"name":"2", "type":"string"}
          ]
    },
    "columns" : [
            {
                "xtype":"treecolumn", //this is so we know which column will show the tree
                "text":"Override Type",
                "flex":"2",
                "sortable":"true",
                "dataIndex":"0"
            },
            {
                "text":"Scenario 1",
                "dataIndex":"1"
            },
            {
                "text":"Copied Scenario",
                "dataIndex":"2"
            }
        ]
    ,
    "text": ".",
    "children": [{
            "0":"CFO",
            "1":"15",
            "2":"16",
            "children":[{
                        "0":"AW",
                        "1": "5",
                        "2": "5",
                         "leaf": "true",
                        }, 
                        {
                        "0":"AV",
                        "1":"10",
                        "2":"11",
                         "leaf": "true",
                       }
                   ]
         }
    ]
}

树呈现,但子节点无法展开,因为未显示+图标。而不是+图标,将呈现一个复选框。

对此相关的任何帮助/建议都将受到高度赞赏。

谢谢, Shalini

1 个答案:

答案 0 :(得分:0)

 Ext.require([
            'Ext.grid.*',
            'Ext.data.*',
            'Ext.dd.*']);

 Ext.onReady(function () {

                var myData = [{
                    name: "Rec 0",
                    type: "0"
                }, {
                    name: "Rec 1",
                    type: "1"
                }, {
                    name: "Rec 2",
                    type: "2"
                }, {
                    name: "Rec 3",
                    type: "3"
                }, {
                    name: "Rec 4",
                    type: "4"
                }, {
                    name: "Rec 5",
                    type: "5"
                }, {
                    name: "Rec 6",
                    type: "6"
                }, {
                    name: "Rec 7",
                    type: "7"
                }, {
                    name: "Rec 8",
                    type: "8"
                }, {
                    name: "Rec 9",
                    type: "9"
                }];

    // create the data store
    var firstGridStore = Ext.create('Ext.data.Store', {
                model: 'Apps.demo.model.Resource',
                autoLoad: true,
                        proxy: {
                            type: 'ajax',
                            url: '/echo/json/',
                            actionMethods: {
                                read: 'POST'
                            },
                            extraParams: {
                                json: Ext.JSON.encode(myData)
                            },
                            delay: 0
                        }
            });
    // Column Model shortcut array
    var columns = [{
                        text: "Name",
                        flex: 1,
                        sortable: true,
                        dataIndex: 'name'
                    }, {
                        text: "Type",
                        width: 70,
                        sortable: true,
                        dataIndex: 'type'
                    }];

        // declare the source Grid
    var firstGrid = Ext.create('Ext.grid.Panel', {
        viewConfig: {
            plugins: {
                ptype: 'gridviewdragdrop',
                ddGroup: 'selDD'
            },
            listeners: {
                drop: function (node, data, dropRec, dropPosition) {

                }
            }
        },
        store: firstGridStore,
        columns: columns,
        stripeRows: true,
        title: 'First Grid',
        margins: '0 2 0 0'
    });

        // create the destination Grid
    var secondTree = Ext.create('Apps.demo.view.TreeGrid', {
        viewConfig: {
            plugins: {
                ptype: 'treeviewdragdrop',
                ddGroup: 'selDD'
            },
            listeners: {
                beforedrop: function (node, data) {
                    data.records[0].set('leaf', false);
                    data.records[0].set('checked', null);
                },
                drop: function (node, data, dropRec, dropPosition) {
                    firstGrid.store.remove(data.records[0]);
                }
            }
        }
    });

    var displayPanel = Ext.create('Ext.Panel', {
                width: 650,
                height: 300,
                layout: {
                    type: 'hbox',
                    align: 'stretch',
                    padding: 5
                },
                renderTo: 'panel',
                defaults: {
                    flex: 1
                }, //auto stretch
                items: [
                firstGrid,
                secondTree],
                dockedItems: {
                    xtype: 'toolbar',
                    dock: 'bottom',
                    items: ['->', // Fill
                    {
                        text: 'Reset both components',
                        handler: function () {
                            firstGridStore.loadData(myData);
                            secondTreeStore.removeAll();
                        }
                    }]
                }
            });
        });

    var response = Ext.JSON.encode({
                "children": [{
                    "itemId": 171,
                        "type": "comedy",
                        "name": "All the way",
                        "children": [{
                        "leaf": true,
                            "itemId": 171,
                            "type": "actor",
                            "name": "Rowan Atkinson"
                    }],
                }, {
                    "itemId": 11,
                        "type": "fantasy",
                        "name": "I love You",
                        "children": [{
                        "itemId": 11,
                            "leaf": true,
                            "type": "actor",
                            "name": "Rajan",
                    }]
                }, {
                    "itemId": 173,
                        "type": "Action",
                        "name": "Fast and Furious",
                        "children": [{
                        "itemId": 174,
                            "type": "actor",
                            "name": "Dwayne Johnson",
                            "children": [{
                            "leaf": true,
                                "itemId": 175,
                                "type": "wrestler",
                                "name": "The Rock"
                        }]
                    }]
                }]
            });

    Ext.define('Apps.demo.model.Resource', {
                extend: 'Ext.data.Model',
                fields: [{
                    name: "name",
                    type: "string"
                }, {
                    name: "type",
                    type: "string"
                }]
            });

        Ext.define('Apps.demo.view.TreeGrid', {
            extend: 'Ext.tree.Panel',
            title: 'Demo',
            height: 300,
            rootVisible: true,
            singleExpand: true,

            initComponent: function () {
                Ext.apply(this, {
                    store: new Ext.data.TreeStore({
                        model: 'Apps.demo.model.Resource',
                            "root": {
                            "name": "",
                                "type": "",
                                "expanded": "true"
                        },
                        proxy: {
                            type: 'ajax',
                            url: '/echo/json/',
                            actionMethods: {
                                read: 'POST'
                            },
                            extraParams: {
                                json: response
                            },
                            delay: 0
                        }
                    }),
                    listeners: {
                        'beforeiteminsert' : function(obj, node) {
                             console.log(node);   
                        }
                    },
                    columns: [{
                        xtype: 'treecolumn',
                        text: 'Name',
                        dataIndex: 'name',
                        width: 200
                    }, {
                        text: 'Type',
                        dataIndex: 'type'
                    }]
                });
                this.callParent();
            }
        });

var grid = Ext.create('Apps.demo.view.TreeGrid');

请检查此代码。它可能不会给你正确答案,但肯定会给你提示如何实现输出。