Question

我有一个ExtJS 4.2 TreePanel，但是当我调用我的PHP代码来获取数据时，数据不会加载到树中。

数据调用成功，我收到了响应，但树数据没有加载到树中。

function onGetData(data) {
    alert('onGetData');
    alert(data);
};
Ext.onReady(function() {
    Ext.create('Ext.tree.Panel', {
        title: 'Tree Refresh Example',
        width: 300,
        height: 350,
        listeners: {
            afterRender: function() {
                this.store.getData(onGetData, this);
            }
        },
        tbar: ['->', { 
            xtype: 'button', 
            text: 'Add Banana',
            value: 1,
            margin: '0 30 0 0',
            listeners: {
                click: function(comp) {
                    sendData(comp.value);
                }
            }
        }, { 
            xtype: 'button', 
            text: 'Add Cabbage',
            value: 2,
            margin: '0 30 0 0',
            listeners: {
                click: function(comp) {
                    sendData(comp.value);
                }
            }
        }, { 
            xtype: 'button', 
            text: 'Add Yogurt',
            value: 3,
            listeners: {
                click: function(comp) {
                    sendData(comp.value);
                }
            }
        }, '->'],
        renderTo: 'content',
        store: new SampleTreeData()
    });        
});



Ext.define('SampleTreeData', {
    extend: 'Ext.data.TreeStore',
    proxy: {
        type: 'ajax',
        url : '',
        reader: {
            type: 'json',
            root: 'root'
        }
    },
    getData: function(callBack, scope) {
        alert('getData');
        var store = this;
        store.proxy.url = 'data.php?mode=getData';
        scope.collapseAll();
        store.load({
            scope : scope,
            callback : function(records, operation, success) {
                if (Ext.isFunction(callBack)) {
                    callBack(store, scope, records, success);
                }
            }
        });
    }   
});


<?php
$data = 'root: {' .
        'text: "Tree Root",' .
        'expanded: true,' .
        'children: [' .
            '{' .
                'text: "Fruits",' .
                'children: [' .
                    '{ leaf:true, text: "apple" },' .
                    '{ leaf:true, text: "orange" }' .
                ']' .
            '},' .
            '{' .
                'text: "Vegetables",' .
                'expanded: false,' .
                'children: [' .
                    '{ leaf:true, text: "carrot" },' .
                    '{ leaf:true, text: "beet" }' .
                ']' .
            '},' .
            '{' .
                'text: "Dairy",' .
                'children: [' .
                    '{ leaf:true, text: "milk" },' .
                    '{ leaf:true, text: "cheese" }' .
                ']' .
            '}' .
        ']' .
    '}';
$logref = fopen('data.log', 'w');
fwrite($logref, "Entered script.\n");


if(isset($_POST['data'])){
    fwrite($logref, "sendData\n");
    return 'sendDataSuccess';
}else {
    fwrite($logref, "getData\n");
    echo json_encode(utf8_encode($data));
}
fclose($logref);
?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <link rel="stylesheet" type="text/css" href="../../../../ext-4.2.2.1144/resources/css/ext-all.css" />
    <script type="text/javascript" src="../../../../ext-4.2.2.1144/ext-all-debug.js"></script>
    <script type="text/javascript" src="refresh1.js"></script>
    <script type="text/javascript" src="SampleTreeData.js"></script>
</head>
<body style="width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: #89E5BD;">
    <div id="content" style="margin: auto; width: 500px; height: 500px;"/>
</body>

Answer 1

解决

通过更改我的PHP以及在TreePanel上将rootVisible设置为false来实现它。

我还改了一下树店。

Ext.define('SampleTreeData', {
    extend: 'Ext.data.TreeStore',
    autoLoad: false,
    autoSync: false,
    proxy: {
        type: 'ajax',
        url : '',
        reader: {
            type: 'json',
            root: ''
        }
    },
    root: {
        expanded: true
    },  
    getData: function(callBack, scope) {
        var store = this;
        store.proxy.url = 'data.php?mode=getData';
        store.load({
            scope : scope,
            callback : function(records, operation, success) {
                if (Ext.isFunction(callBack)) {
                    callBack(store, scope, records, success);
                }
            }
        });
    }   
});

<?php
$data = '[{' .
        'text: "Tree Root",' .
        'expanded: true,' .
        'children: [' .
            '{' .
                'text: "Fruits",' .
                'children: [' .
                    '{ leaf:true, text: "apple" },' .
                    '{ leaf:true, text: "orange" }' .
                ']' .
            '},' .
            '{' .
                'text: "Vegetables",' .
                'expanded: false,' .
                'children: [' .
                    '{ leaf:true, text: "carrot" },' .
                    '{ leaf:true, text: "beet" }' .
                ']' .
            '},' .
            '{' .
                'text: "Dairy",' .
                'children: [' .
                    '{ leaf:true, text: "milk" },' .
                    '{ leaf:true, text: "cheese" }' .
                ']' .
            '}' .
        ']' .
    '}]';
$logref = fopen('data.log', 'w');
fwrite($logref, "Entered script.\n");


if(isset($_POST['data'])){
    fwrite($logref, "sendData\n");
    return 'sendDataSuccess';
}else {
    fwrite($logref, "getData\n");
    echo $data;
}
fclose($logref);
?>

Answer 2

您必须覆盖Ext.tree.Panel.setRootNode metod以考虑商店的autoLoad属性。

以下示例使用ExtJS v4.2.2进行测试。

Ext.define('Example', {
    extend: 'Ext.tree.Panel',
    title: 'Example',
    useArrows:false,
    rootVisible: false,
    border: false,

    /**
     * Override.
     */
    setRootNode: function() {
        if (this.getStore().autoLoad) {
            this.callParent(arguments);
        }
    },

    initComponent: function () {
        var store = Ext.create('Ext.data.TreeStore', {
            fields: [
                {name: 'id',     type: 'string'},
                {name: 'text',     type: 'string'}
            ],
            autoLoad : false,
            proxy: {
                type: 'ajax',
                url: '/data.php',
                reader: {
                    type: 'json',
                    root: 'results'
                }
            }

        });
        this.store = store;
        this.callParent(arguments);
    }
});

Ext.onReady(function(){

    var tree = Ext.create('Example', {
        renderTo: Ext.getBody(),
        width: 300,
        height: 300
    });

    tree.getStore().load();
});

如何在ExtJS树面板中加载我的树数据？

2 个答案: