VPF::[ExtJS] Ext.tree.Panel с загрузкой узлов с сервера

ImmS

Дата 5.6.2011, 17:17 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 30
Регистрация: 6.1.2007

Репутация: нет
Всего: нет

Здравствуйте, я только начинаю изучать Ext JS. Задумал тут сделать дерево, чтобы подгружать узлы с удаленного сервера. Но не выходит, просмотрел кучу примеров, доки от Sencha...но все равно не получается, а главное не пойму что я не так делаю. Помогите разобраться что к чему.

Код index.html

Код


<html>
 <head>
    <title>Test Task Window</title>
    
    <link rel="stylesheet" type="text/css" href="../ext-4.0.1/resources/css/ext-all.css">
    <script type="text/javascript" src="../ext-4.0.1/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../ext-4.0.1/ext-all-debug.js"></script>
    <script type="text/javascript">
    
Ext.onReady(function() {
     
    var tree = new Ext.tree.TreePanel({
        id: 'tree',
        useArrows: true,
        animate: true,
        autoScroll: true,
        url: 'Nodes.php',
        root: {
            nodeType: 'async',
            text: 'TaskTree',
            id: 'rootId'
        },
        listeners: {
                beforeload: {
                    fn: function(){alert('Load begin!');}
                    },
        }
    });
     
     new Ext.window.Window({
        title: 'Window for Tree',
        height: 200,
        width: 250,
        items: [tree]
    }).show();
    
    
});

</script>
    
 </head>
 <body>
 </body>
</html>

А вот код Php файла...проверял, php отправляет то что нужно...видимо ошибка в javascript.

Код


<?php

class TreeNode {
     
        public $text = "";
        public $id = "";
        public $iconCls = "";
        public $leaf = true;
        public $draggable = false;
        public $href = "#";
        public $hrefTarget = "";
     
        function  __construct($id,$text,$iconCls,$leaf,$draggable,
                $href,$hrefTarget) {
     
            $this->id = $id;
            $this->text = $text;
            $this->iconCls = $iconCls;
            $this->leaf = $leaf;
            $this->draggable = $draggable;
            $this->href = $href;
            $this->hrefTarget = $hrefTarget;
        }
    }
     
    class TreeNodes {
     
        protected $nodes = array();
     
        function add($id,$text,$iconCls,$leaf,$draggable,
            $href,$hrefTarget) {
     
            $n = new TreeNode($id,$text,$iconCls,$leaf,
                    $draggable,$href,$hrefTarget);
     
            $this->nodes[] = $n;
        }
     
        function toJson() {
            return json_encode($this->nodes);
        }
    }
    
$requestedNode = "";
     
    if (isset($_REQUEST["node"])) {
        $requestedNode = $_REQUEST["node"];
    }
    $treeNodes = new TreeNodes();
     
    //if ('rootId' == $requestedNode) {
        $treeNodes->add("node-datasources","Datasources","",false,false,"","");
        $treeNodes->add("node-reports","Reports","",false,false,"","");
    /*} else if ('node-datasources' == $requestedNode) {
        $treeNodes->add("employees-system-node","Employee Management System","datasource",true,false,"","");
        $treeNodes->add("customers-system-node","Customer Management System","datasource",true,false,"","");
        $treeNodes->add("order-system-node","Order Processing System","datasource",true,false,"","");
    } else if ('node-reports' == $requestedNode) {
        $treeNodes->add("time-report-node","Time and Attendance","report",true,false,"","");
        $treeNodes->add("orders-by-quarter-report-node","Orders By Quarter","report",true,false,"","");
        $treeNodes->add("customers-trends-report-node","Customer Trends","report",true,false,"","");
    }
     */
    echo $treeNodes->toJson();
?>

ImmS

Дата 6.6.2011, 13:22 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 30
Регистрация: 6.1.2007

Репутация: нет
Всего: нет

Переделал index.html...теперь сервер отвечает, данные попадают в store дерева, но само дерево не перерисовывается почему-то...может надо как-то перерисовать tree.Panel...или еще что-нибудь, как-нибудь обновить? smile

Измененный javascript:

Код


<html>
 <head>
    <title>Test Task Window</title>
    
    <link rel="stylesheet" type="text/css" href="../ext-4.0.1/resources/css/ext-all.css">
    <script type="text/javascript" src="../ext-4.0.1/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../ext-4.0.1/ext-all-debug.js"></script>
    
 </head>
 <body>
 
 <script type="text/javascript">
    
Ext.onReady(function() {
    
    var store = Ext.create('Ext.data.TreeStore', {
            proxy: {
                type: 'ajax',
                url: 'Nodes.php'
                },
            root: {
                text: 'TaskTree',
                id: 'RId',
                expanded: true
                },
            storeId: 'MyStore',
            folderSort: true,
            sorters: [{
                property: 'text',
                direction: 'ASC'
                }],
            listeners: {
                load: {
                    fn: function(stor, rec, res){
                        console.log(stor);
                        console.log(rec);
                        console.log(res);
                        }
                    }
                }
            });
                
    
    var tree = new Ext.tree.TreePanel({
        id: 'tree',
        store: store,
        useArrows: true,
        editable: true,
        animate: true,
        autoScroll: true,
        });
     
     new Ext.window.Window({
        title: 'Window for Tree',
        height: 200,
        width: 250,
        items: [tree]
    }).show();
    
    
});

</script>
 
 </body>
</html>

ImmS

Дата 7.6.2011, 20:09 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 30
Регистрация: 6.1.2007

Репутация: нет
Всего: нет

Итак...опытным путем выяснено, что вся соль в том, что панель Ext.tree.Panel надодится в контейнере Window...то ли настройки окна не те...то ли настройки панели...непонятно.

ImmS

Дата 8.6.2011, 07:27 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 30
Регистрация: 6.1.2007

Репутация: нет
Всего: нет

Хех...проблема решена! Оказалось, что все с самого начала грузилось правильно, просто у Ext.tree.Panel не была задана высота, поэтому все загруженое просто не отображалось smile

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Применение библиотек \| Следующая тема »